Silverlight 自定义类似ListBox菜单

Generic.xaml:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:SLMyControl.MyControl">

    <Style x:Key="ButtonStyleLeft" TargetType="Button">
        <Setter Property="Visibility" Value="Collapsed"></Setter>
        <Setter Property="Margin" Value="-10 0 0 0"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Canvas Height="10">
                        <Path Data="M76.625206,1.250002 L63.601143,15.039444 L76.878647,28.32745 L90.972031,28.32745 L78.289795,14.552532 L90.870972,1.250002 z"
                                  Stretch="Fill" UseLayoutRounding="False" RenderTransformOrigin="0.5,0.5" Fill="White" Width="9" Height="9">
                        </Path>
                        <ContentPresenter />
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ButtonStyleRight" TargetType="Button">
        <Setter Property="Visibility" Value="Collapsed"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Canvas Height="10">
                        <Path Data="M78.543419,1.250002 L91.019333,14.552531 L78.593788,28.32745 L92.596634,28.32745 L104.77825,14.458512 L93.061401,1.250002 z"
                                  Stretch="Fill" UseLayoutRounding="False" Width="9" RenderTransformOrigin="0.5,0.5" Height="9" Fill="White">
                        </Path>
                        <ContentPresenter />
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>



    <Style TargetType="local:OneMenu">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:OneMenu">
                    <Canvas Height="150">
                        <ItemsPresenter />
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <local:OneMenuItem />
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="local:OneMenuItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:OneMenuItem">
                    <Grid Name="myGrid">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" >
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="myCategoryTextBlockColor" Storyboard.TargetProperty="Color" Duration="0:0:0.2" To="#FF4B77A2"></ColorAnimation>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="myCategoryTextBlockColor" Storyboard.TargetProperty="Color" Duration="0:0:0.2" To="#cfd3da"></ColorAnimation>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectStates">
                                <VisualState x:Name="Unselected" />
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="myCategoryTextBlockColor" Storyboard.TargetProperty="Color" Duration="0:0:0.2" To="White"></ColorAnimation>
                                        <DoubleAnimation Storyboard.TargetName="myCategoryTextBlock" Storyboard.TargetProperty="FontSize" Duration="0:0:0.2" To="26"></DoubleAnimation>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="myLeftButton" Storyboard.TargetProperty="(Button.Visibility)">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="Visible"></DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="myRightButton" Storyboard.TargetProperty="(Button.Visibility)">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="Visible"></DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="myTwoMenu" Storyboard.TargetProperty="Visibility" Duration="0:0:0.3">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="Visible">
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="120" />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <StackPanel Orientation="Horizontal">
                            <Border Name="myCategoryBorder" Width="200" Height="50" BorderBrush="White" BorderThickness="0" CornerRadius="8">
                                <StackPanel Name="myCategoryStackPanel" Orientation="Horizontal" HorizontalAlignment="Center">
                                    <Button Name="myLeftButton" Style="{StaticResource ButtonStyleLeft}"/>
                                    <TextBlock Name="myCategoryTextBlock" Text="{Binding Path=GroupName}" Margin="5" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center">
                                            <TextBlock.Foreground>
                                                <SolidColorBrush x:Name="myCategoryTextBlockColor" Color="#FF4B77A2" />
                                            </TextBlock.Foreground>
                                    </TextBlock>
                                    <Button Name="myRightButton" Style="{StaticResource ButtonStyleRight}" />
                                </StackPanel>
                            </Border>
                        </StackPanel>
                        <StackPanel Orientation="Horizontal" Grid.Row="1">
                            <local:TwoMenu x:Name="myTwoMenu" Opacity="1" ItemsSource="{Binding Path=SubMenuItems}" />
                        </StackPanel>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="local:TwoMenu">
        <Setter Property="Margin" Value="20 0 0 0"></Setter>
        <Setter Property="Visibility" Value="Collapsed" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:TwoMenu">
                    <Canvas >
                        <ItemsPresenter />
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <local:TwoMenuItem />
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="local:TwoMenuItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:TwoMenuItem">
                    <Grid x:Name="LayoutRoot">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="150" />
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="myPGPBordr" Storyboard.TargetProperty="(Border.BorderThickness)">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Storyboard.TargetName="myPGPGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" To="1" Duration="0:0:0.1" />
                                        <DoubleAnimation Storyboard.TargetName="myPGPGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" To="1" Duration="0:0:0.1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="myPGPTextBlock" Storyboard.TargetProperty="(TextBlock.Visibility)">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="myPGPContent" Storyboard.TargetProperty="(TextBlock.Visibility)">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="myPGPBordr" Storyboard.TargetProperty="(Border.BorderThickness)">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Storyboard.TargetName="myPGPGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" To="1.3" Duration="0:0:0.1" />
                                        <DoubleAnimation Storyboard.TargetName="myPGPGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" To="1.3" Duration="0:0:0.1" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectStates">
                                <VisualState x:Name="Unselected" />
                                <VisualState x:Name="Selected" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <Grid Name="myPGPGrid" RenderTransformOrigin="0.5,0.5">
                            <Grid.RenderTransform>
                                <ScaleTransform />
                            </Grid.RenderTransform>
                            <Border Name="myPGPBordr" Width="200" BorderThickness="0" BorderBrush="White" CornerRadius="3" />
                            <Image Name="myPGPImage" Margin="1" Source="{Binding Path=URL}" Stretch="Fill" />
                        </Grid>
                        <TextBlock Name="myPGPTextBlock" Foreground="White" Visibility="Collapsed" Grid.Row="1" HorizontalAlignment="Right" Margin="3,30,3,0" FontSize="15" Text="{Binding Path=Title}">
                        </TextBlock>
                        <TextBlock Name="myPGPContent" Foreground="White" Visibility="Collapsed" Grid.Row="2" HorizontalAlignment="Right" Margin="3,30,3,0" FontSize="12" Text="{Binding Path=Content}">
                        </TextBlock>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>
OneMenu.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SLMyControl.MyControl
{
    public class OneMenu : ItemsControl
    {
        public List<OneMenuItem> OneMenuItemList { get; set; }
        public bool State = true;

        public OneMenu()
        {
            this.DefaultStyleKey = typeof(OneMenu);
            OneMenuItemList = new List<OneMenuItem>();
        }

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            this.KeyUp += (s, e) =>
            {
                switch (e.Key)
                {
                    case Key.Left:
                        if (((App)(App.Current)).State)
                        {
                            KeyDownLeft();
                        }
                        break;
                    case Key.Right:
                        if (((App)(App.Current)).State)
                        {
                            KeyDownRight();
                        }
                        break;
                    case Key.Down:
                        ((App)(App.Current)).State = false;
                        break;
                }
            };
        }

        #region 键盘操作
        public bool KeyDownLeft()
        {
            if (OneMenuItemList.Count > 0)
            {
                if (_selectedIndex != 0)
                {
                    SelectedIndex -= 1;
                }
                return true;
            }
            else
            {
                return false;
            }
        }
        public bool KeyDownRight()
        {
            if (OneMenuItemList.Count > 0)
            {
                if (_selectedIndex != OneMenuItemList.Count - 1)
                {
                    SelectedIndex += 1;
                }
                return true;
            }
            else
            {
                return false;
            }
        }

        #endregion

        #region  自定义属性
        private OneMenuItem _selectedItem = null;
        public OneMenuItem SelectedItem
        {
            get { return _selectedItem; }
            set
            {
                if (_selectedItem != value)
                {
                    int selectIndex = _selectedIndex;

                    _selectedItem = value;

                    if (_selectedItem != null)
                    {
                        for (int i = 0; i < OneMenuItemList.Count; i++)
                        {
                            OneMenuItem item = OneMenuItemList[i];
                            if (_selectedItem != item && item.IsSelected == true)
                            {
                                item.IsSelected = false;
                                break;
                            }
                        }
                    }
                    _selectedItem.IsSelected = true;
                }
            }
        }

        private int _selectedIndex = -1;
        public int SelectedIndex
        {
            get { return _selectedIndex; }
            set
            {
                if ((value > 0 || value < OneMenuItemList.Count - 1) && OneMenuItemList.Count > 0)
                {
                    int selectIndex = _selectedIndex;
                    _selectedIndex = value;
                    _selectedItem = OneMenuItemList[_selectedIndex];
                    if (_selectedItem != null)
                    {
                        for (int i = 0; i < OneMenuItemList.Count; i++)
                        {
                            OneMenuItem item = OneMenuItemList[i];
                            if (_selectedItem != item && item.IsSelected == true)
                            {
                                item.IsSelected = false;
                                break;
                            }
                        }
                    }
                    _selectedItem.IsSelected = true;
                }
            }
        }
        #endregion
    }
}

OneMenuItem.cs


using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;





namespace SLMyControl.MyControl

{

    [TemplateVisualState(GroupName = "CommonStates", Name = "MouseOver")]

    [TemplateVisualState(GroupName = "CommonStates", Name = "Normal")]

    [TemplateVisualState(GroupName = "SelectStates", Name = "Selected")]

    [TemplateVisualState(GroupName = "SelectStates", Name = "Unselected")]

    public class OneMenuItem : ContentControl

    {

        public OneMenuItem()

        {

            this.DefaultStyleKey = typeof(OneMenuItem);

        }

        public override void OnApplyTemplate()

        {

            base.OnApplyTemplate();





            OneMenu ParentItem = (OneMenu)InitParent(this, typeof(OneMenu));

            ParentItem.OneMenuItemList.Add(this);

            ParentItem.SelectedIndex = 0;

            int Index = ParentItem.OneMenuItemList.Count - 1;





            #region 获取StackPanel,对其操作

            StackPanel ItemPanel = GetTemplateChild("myCategoryStackPanel") as StackPanel;

            ItemPanel.MouseEnter += (se, ee) => { if (!_isSelected) { VisualStateManager.GoToState(this, "MouseOver", true); } };

            ItemPanel.MouseLeave += (se, ee) => { if (!_isSelected) { VisualStateManager.GoToState(this, "Normal", true); } };

            ItemPanel.MouseLeftButtonUp += (se, ee) =>

            {

                ParentItem.SelectedItem = this;

                ParentItem.SelectedIndex = Index;

            };

            #endregion

        }





        private bool _isSelected;

        public bool IsSelected

        {

            get { return _isSelected; }

            set

            {

                if (_isSelected != value)

                {

                    _isSelected = value;

                    if (_isSelected)

                    {

                        VisualStateManager.GoToState(this, "Selected", true);

                    }

                    else

                    {

                        VisualStateManager.GoToState(this, "Unselected", true);

                    }

                }

            }

        }





        public DependencyObject InitParent(DependencyObject obj, Type type)

        {

            if (obj.GetType() == type)

            {

                return obj;

            }

            else

            {

                return InitParent(VisualTreeHelper.GetParent(obj), type);

            }

        }

    }

}





TwoMenu.cs:


using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;





namespace SLMyControl.MyControl

{

    public class TwoMenu : ItemsControl

    {

        public List<TwoMenuItem> TwoMenuItemList { get; set; }

        public bool TwoState = true;





        public TwoMenu()

        {

            this.DefaultStyleKey = typeof(TwoMenu);

            TwoMenuItemList = new List<TwoMenuItem>();

        }





        public override void OnApplyTemplate()

        {

            base.OnApplyTemplate();





            #region 键盘按下





            OneMenu oneMenu = GetOneMenuObject();

            oneMenu.KeyUp += (s, e) =>

            {

                if (this.Visibility == System.Windows.Visibility.Visible)

                {

                    switch (e.Key)

                    {

                        case Key.Left:

                            if (!((App)(App.Current)).State)

                            {

                                this.MovePrevious();

                            }

                            break;

                        case Key.Right:

                            if (!((App)(App.Current)).State)

                            {

                                this.MoveNext();

                            }

                            break;

                        case Key.Up:

                            ((App)(App.Current)).State = true;

                            break;

                    }

                }

            };

            #endregion

        }





        private OneMenu GetOneMenuObject()

        {

            DependencyObject obj = this;

            while (obj.GetType() != typeof(OneMenu))

            {

                obj = VisualTreeHelper.GetParent(obj);

            }

            return obj as OneMenu;

        }





        /// <summary>

        /// 根据当前选中项做处理

        /// </summary>

        private TwoMenuItem _selectItem = null;

        public TwoMenuItem SelectItem

        {

            get { return _selectItem; }

            set

            {

                if (_selectItem != value)

                {

                    _selectItem = value;





                    if (_selectItem != null)

                    {

                        for (int i = 0; i < TwoMenuItemList.Count; i++)

                        {

                            TwoMenuItem item = TwoMenuItemList[i];





                            if (_selectItem != item && item.IsSelected == true)

                            {

                                item.IsSelected = false;

                                Canvas.SetZIndex((ContentPresenter)VisualTreeHelper.GetParent(item), 0);

                                break;

                            }

                        }

                    }

                    Canvas.SetZIndex((ContentPresenter)VisualTreeHelper.GetParent(_selectItem), 1);

                    _selectItem.IsSelected = true;

                }

            }

        }





        /// <summary>

        /// 根据当前选中项Index做处理

        /// </summary>

        private int _selectIndex = -1;

        public int SelectIndex

        {

            get { return _selectIndex; }

            set

            {

                if ((value >= 0 && value < TwoMenuItemList.Count) && TwoMenuItemList.Count > 0)

                {

                    int selectIndex = _selectIndex;





                    _selectIndex = value;





                    _selectItem = TwoMenuItemList[value];





                    if (_selectItem != null)

                    {

                        for (int i = 0; i < TwoMenuItemList.Count; i++)

                        {

                            TwoMenuItem item = TwoMenuItemList[i];

                            if (_selectItem != item && item.IsSelected == true)

                            {

                                Canvas.SetZIndex((ContentPresenter)VisualTreeHelper.GetParent(item), 0);

                                item.IsSelected = false;

                                break;

                            }

                        }

                    }

                    Canvas.SetZIndex((ContentPresenter)VisualTreeHelper.GetParent(_selectItem), 1);

                    _selectItem.IsSelected = true;

                }

            }

        }





        #region 左右移动

        /// <summary>

        /// 移动到前一项

        /// </summary>

        /// <returns></returns>

        public bool MovePrevious()

        {

            if (TwoMenuItemList.Count > 0)

            {

                if (SelectIndex != 0)

                {

                    SelectIndex -= 1;

                }

                return true;

            }

            else

            {

                return false;

            }

        }





        /// <summary>

        /// 移动到后面一项

        /// </summary>

        /// <returns></returns>

        public bool MoveNext()

        {

            if (TwoMenuItemList.Count > 0)

            {

                if (SelectIndex != TwoMenuItemList.Count - 1)

                {

                    SelectIndex += 1;

                }

                return true;

            }

            else

            {

                return false;

            }

        }

        #endregion





    }

}





TwoMenuItem.cs:


using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;





namespace SLMyControl.MyControl

{

    [TemplateVisualState(GroupName = "SelectStates", Name = "Selected")]

    [TemplateVisualState(GroupName = "SelectStates", Name = "Unselected")]

    [TemplateVisualState(GroupName = "CommonStates", Name = "MouseOver")]

    [TemplateVisualState(GroupName = "CommonStates", Name = "Normal")]

    public class TwoMenuItem : ContentControl

    {

        public TwoMenuItem()

        {

            this.DefaultStyleKey = typeof(TwoMenuItem);

        }





        public TwoMenu ParentItem { get; set; }

        public int Index { get; set; }





        public override void OnApplyTemplate()

        {

            base.OnApplyTemplate();





            ParentItem = (TwoMenu)InitParent(this, typeof(TwoMenu));

            ParentItem.TwoMenuItemList.Add(this);

            this.Index = ParentItem.TwoMenuItemList.Count - 1;





            Grid myGrid = (Grid)GetTemplateChild("myPGPGrid");

            myGrid.MouseEnter += (s, e) =>

            {

                VisualStateManager.GoToState(this, "MouseOver", true);

                this.ParentItem.SelectItem = this;

                this.ParentItem.SelectIndex = this.Index;

            };









            this.LayoutUpdated += SetItemsCanvas;

        }









        /// <summary>

        /// 根据集合中的每一项去定位

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

        private bool ischange = false;

        private void SetItemsCanvas(object sender, EventArgs e)

        {

            if (!ischange)

            {

                if (this.Index > 0)

                {

                    ContentPresenter MyContainer = (ContentPresenter)VisualTreeHelper.GetParent(this); //获取下一个对象

                    double previousElementWidth = 0;

                    double previousElementLeft = 0;

                    #region 获取上一个对象,拿它的宽度和Left 去设置下一个对象的位置

                    ContentPresenter previousContainer = (ContentPresenter)VisualTreeHelper.GetParent(ParentItem.TwoMenuItemList[this.Index - 1]);

                    previousElementWidth = previousContainer.ActualWidth;

                    previousElementLeft = Canvas.GetLeft(previousContainer);

                    Canvas.SetLeft(MyContainer, previousElementWidth + previousElementLeft);

                    #endregion

                }

                this.LayoutUpdated -= SetItemsCanvas;

                ischange = true;

            }

        }









        /// <summary>

        /// 返回父级对象

        /// </summary>

        /// <param name="obj">子集对象</param>

        /// <returns></returns>

        private DependencyObject InitParent(DependencyObject obj, Type type)

        {

            if (obj.GetType() == type)

            {

                return obj;

            }

            else

            {

                return InitParent(VisualTreeHelper.GetParent(obj), type);

            }

        }









        /// <summary>

        /// 是否被选中

        /// </summary>

        private bool _isSelected = false;

        public bool IsSelected

        {

            get { return _isSelected; }

            set

            {

                if (_isSelected != value)

                {

                    _isSelected = value;





                    if (_isSelected)

                    {

                        VisualStateManager.GoToState(this, "MouseOver", true);

                    }

                    else

                    {

                        VisualStateManager.GoToState(this, "Normal", true);

                    }

                }

            }

        }

    }

}





OneMenuDataSource.cs:


using System;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Collections.ObjectModel;





namespace SLMyControl.DTSource

{

    public class OneMenuDataSource

    {

        public OneMenuDataSource()

        {

            this.SubMenuItems = new ObservableCollection<OneMenuDataSource>();

        }





        public OneMenuDataSource(string title, string url, string content)

        {

            this.title = title;

            this.url = url;

            this.content = content;

        }





        #region 定义属性





        private string groupName;

        public string GroupName { get { return groupName; } set { groupName = value; } }





        private string title;

        public string Title { get { return title; } set { title = value; } }





        private string url;

        public string URL { get { return url; } set { url = value; } }





        private string content;

        public string Content { get { return content; } set { content = value; } }





        /// <summary>

        /// 子菜单项

        /// </summary>

        public ObservableCollection<OneMenuDataSource> SubMenuItems { get; private set; }





        #endregion

    }

    public class OneMenuDataSources : ObservableCollection<OneMenuDataSource>

    {

        public OneMenuDataSources()

            : base()

        {

            OneMenuDataSource content = new OneMenuDataSource() { GroupName = "美少女展示组1" };

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士1号", @"/SLMyControl;component/Image/1.jpg", "这里添加说明1"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士2号", @"/SLMyControl;component/Image/2.jpg", "这里添加说明2"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士3号", @"/SLMyControl;component/Image/3.jpg", "这里添加说明3"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士4号", @"/SLMyControl;component/Image/4.jpg", "这里添加说明4"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士5号", @"/SLMyControl;component/Image/5.jpg", "这里添加说明5"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士6号", @"/SLMyControl;component/Image/6.jpg", "这里添加说明6"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士7号", @"/SLMyControl;component/Image/0.jpg", "这里添加说明7"));

            Add(content);

            content = new OneMenuDataSource() { GroupName = "美少女展示组2" };

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士9号", @"/SLMyControl;component/Image/2.jpg", "这里添加说明1"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士10号", @"/SLMyControl;component/Image/6.jpg", "这里添加说明6"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士3号", @"/SLMyControl;component/Image/3.jpg", "这里添加说明3"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士4号", @"/SLMyControl;component/Image/4.jpg", "这里添加说明4"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士5号", @"/SLMyControl;component/Image/5.jpg", "这里添加说明5"));

            Add(content);

            content = new OneMenuDataSource() { GroupName = "美少女展示组3" };

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士11号", @"/SLMyControl;component/Image/3.jpg", "这里添加说明1"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士3号", @"/SLMyControl;component/Image/3.jpg", "这里添加说明3"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士4号", @"/SLMyControl;component/Image/4.jpg", "这里添加说明4"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士5号", @"/SLMyControl;component/Image/5.jpg", "这里添加说明5"));

            Add(content);

            content = new OneMenuDataSource() { GroupName = "美少女展示组4" };

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士12号", @"/SLMyControl;component/Image/4.jpg", "这里添加说明1"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士3号", @"/SLMyControl;component/Image/3.jpg", "这里添加说明3"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士4号", @"/SLMyControl;component/Image/4.jpg", "这里添加说明4"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士5号", @"/SLMyControl;component/Image/5.jpg", "这里添加说明5"));

            Add(content);

            content = new OneMenuDataSource() { GroupName = "美少女展示组5" };

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士13号", @"/SLMyControl;component/Image/5.jpg", "这里添加说明1"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士3号", @"/SLMyControl;component/Image/3.jpg", "这里添加说明3"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士4号", @"/SLMyControl;component/Image/4.jpg", "这里添加说明4"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士5号", @"/SLMyControl;component/Image/5.jpg", "这里添加说明5"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士3号", @"/SLMyControl;component/Image/3.jpg", "这里添加说明3"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士4号", @"/SLMyControl;component/Image/4.jpg", "这里添加说明4"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士5号", @"/SLMyControl;component/Image/5.jpg", "这里添加说明5"));

            Add(content);

            content = new OneMenuDataSource() { GroupName = "美少女展示组6" };

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士14号", @"/SLMyControl;component/Image/6.jpg", "这里添加说明1"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士3号", @"/SLMyControl;component/Image/3.jpg", "这里添加说明3"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士4号", @"/SLMyControl;component/Image/4.jpg", "这里添加说明4"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士5号", @"/SLMyControl;component/Image/5.jpg", "这里添加说明5"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士3号", @"/SLMyControl;component/Image/3.jpg", "这里添加说明3"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士4号", @"/SLMyControl;component/Image/4.jpg", "这里添加说明4"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士5号", @"/SLMyControl;component/Image/5.jpg", "这里添加说明5")); 

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士3号", @"/SLMyControl;component/Image/3.jpg", "这里添加说明3"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士4号", @"/SLMyControl;component/Image/4.jpg", "这里添加说明4"));

            content.SubMenuItems.Add(new OneMenuDataSource("美少女战士5号", @"/SLMyControl;component/Image/5.jpg", "这里添加说明5"));

            Add(content);

        }

    }

}





MainPage.xaml:
<UserControl x:Class="SLMyControl.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d" xmlns:oneSource="clr-namespace:SLMyControl.DTSource"

    xmlns:my="clr-namespace:SLMyControl.MyControl">

    <UserControl.Resources>

        <oneSource:OneMenuDataSources x:Key="OneDataSources"></oneSource:OneMenuDataSources>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="Silver">

        <my:OneMenu x:Name="myOneMenu" Margin="100 -200 0 0" ItemsSource="{Binding Source={StaticResource OneDataSources}}" />

    </Grid>

</UserControl>