WPF滚动菜单

我想制作一个WPF菜单结构，就像Windows Media Center的音乐库界面一样。基本上，前提是有一个类别和项目列表。您可以使用左/右箭头键滚动类别。可用类别“环绕”屏幕，列表中的第二项始终是所选项目。该类别的可用项目位于类别下面的列表中。当您处于类别中时，您可以按向下箭头导航到列表，这样做会导致上面的类别“删除”字体大小并淡出一点，列表项会弹出一个字体大小并淡出一点。在项目列表中，您现在可以左、右、上、下导航项目。如果在项目的最上面一行按向上键，您将返回到“类别”列表，并使其弹出一个字体大小，而项目则向下弹出一个字体大小

我是一个彻头彻尾的wpfnoob。。。任何指导都将不胜感激

最好的例子是尝试WMC音乐库界面——但对于未安装该界面的用户，我提供了几个屏幕截图：

我做了一些事情：

对于我使用的基本元素TabControl，根据您的屏幕截图，他是最合适的。此外，它可以是任何控件的选项卡项（如DataGrid）。首先，您需要在TabItem中添加导航箭头（它代表一个类别），并需要它们隐藏未选中的TabItem。要正确执行此操作，您需要在TabItem（App.xaml）的模板中执行此操作：

事件处理程序：

    private void TabControl_Loaded(object sender, RoutedEventArgs e)
    {
        var items = SampleTabControl.Items;

        foreach (TabItem item in items)
        {
            Button MyPrevButton = (Button)item.Template.FindName("PrevButton", item);
            Button MyNextButton = (Button)item.Template.FindName("NextButton", item);

            MyPrevButton.Click += new RoutedEventHandler(MyPrevButton_Click);
            MyNextButton.Click += new RoutedEventHandler(MyNextButton_Click);
        }
    }

    private void MyPrevButton_Click(object sender, RoutedEventArgs e)
    {
        NavigationTabItem(SampleTabControl, "Prev", 1);
    }

    private void MyNextButton_Click(object sender, RoutedEventArgs e)
    {
        NavigationTabItem(SampleTabControl, "Next", 1);
    }

为便于导航，创建了以下功能：

    private void NavigationTabItem(TabControl MyTabControl, string Direction, int Num) 
    {
        if (Direction == "Prev")
        {
            MyTabControl.SelectedIndex -= Num;
        }

        if (Direction == "Next")
        {
            MyTabControl.SelectedIndex += Num;
        }
    }

现在我们需要截取键盘接口。为此，在窗口上创建并安装了处理程序（最好在TabControl上安装，并在程序开始将其置于焦点时安装）：

私有void SampleTabControl_KeyDown（对象发送方，KeyEventArgs e）
{
如果（e.Key==Key.Down）
{
如果（SampleTabControl.SelectedIndex==0）
{
SoccerListBox.Focus（）；
}
如果（SampleTabControl.SelectedIndex==1）
{
HockeyListBox.Focus（）；
}
如果（SampleTabControl.SelectedIndex==2）
{
BasketbolListBox.Focus（）；
}
如果（SampleTabControl.SelectedIndex==3）
{
baseballistbox.Focus（）；
}
}
如果（e.Key==Key.Left）
{
NavigationTabItem（SampleTabControl，“Prev”，1）；
}
如果（e.Key==Key.Right）
{
NavigationTabItem（SampleTabControl，“下一步”，1）；
}
}

---

作为可选选项，可以设置为在ListBoxItem和TabItem上选择动画。

那么到目前为止，您尝试了哪些方法来实现这一点？说你是WPF新手并没有多大帮助，因为你对WPF的基本UI设计不太满意，但你已经直接开始复制一个可能涉及很多事情的成熟应用程序。我对此的典型回答是“是完全可行的，拥有一个

ItemsControl

，其中

WrapPanel

作为

PanelTemplate

和

itemstemplate

在

Canvas

背景中附带

故事板

，用于所需的动画。”.谢谢你的精彩例子。

    private void TabControl_Loaded(object sender, RoutedEventArgs e)
    {
        var items = SampleTabControl.Items;

        foreach (TabItem item in items)
        {
            Button MyPrevButton = (Button)item.Template.FindName("PrevButton", item);
            Button MyNextButton = (Button)item.Template.FindName("NextButton", item);

            MyPrevButton.Click += new RoutedEventHandler(MyPrevButton_Click);
            MyNextButton.Click += new RoutedEventHandler(MyNextButton_Click);
        }
    }

    private void MyPrevButton_Click(object sender, RoutedEventArgs e)
    {
        NavigationTabItem(SampleTabControl, "Prev", 1);
    }

    private void MyNextButton_Click(object sender, RoutedEventArgs e)
    {
        NavigationTabItem(SampleTabControl, "Next", 1);
    }

    private void NavigationTabItem(TabControl MyTabControl, string Direction, int Num) 
    {
        if (Direction == "Prev")
        {
            MyTabControl.SelectedIndex -= Num;
        }

        if (Direction == "Next")
        {
            MyTabControl.SelectedIndex += Num;
        }
    }

<Window ... KeyDown="SampleTabControl_KeyDown">

    private void SampleTabControl_KeyDown(object sender, KeyEventArgs e)
    {
        if (e.Key == Key.Down) 
        {
            if (SampleTabControl.SelectedIndex == 0)
            {
                SoccerListBox.Focus();
            }

            if (SampleTabControl.SelectedIndex == 1)
            {
                HockeyListBox.Focus();
            }

            if (SampleTabControl.SelectedIndex == 2)
            {
                BasketbolListBox.Focus();
            }

            if (SampleTabControl.SelectedIndex == 3)
            {
                BaseballListBox.Focus();
            }
        }

        if (e.Key == Key.Left)
        {
            NavigationTabItem(SampleTabControl, "Prev", 1);
        }

        if (e.Key == Key.Right)
        {
            NavigationTabItem(SampleTabControl, "Next", 1);
        }
    }