WPF 自定义标题栏 自定义菜单栏

自定义标题栏

自定义列表，可以直接修改WPF中的ListBox模板，也用这样类似的效果。但是ListBox是不能设置默认选中状态的。

而我们需要一些复杂的UI效果，还是直接自定义控件来的快

GitHub下载地址：https://github.com/Kybs0/MenuListControl

一、设计界面样式

<UserControl x:Class="WpfApplication6.TitleListControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             d:DesignHeight="200" d:DesignWidth="800" Loaded="TitleListControl_OnLoaded" >
    <UserControl.Resources>
        <Style x:Key="FirstButtonStyle" TargetType="RadioButton">
            <Setter Property="Margin" Value="0.5,2"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RadioButton}">
                        <Grid>
                            <Border x:Name="ButtonBorder" Height="35" Width="100" Background="#FF286E9E" CornerRadius="15,0,0,15"></Border>
                            <TextBlock Text="{TemplateBinding Content}" Foreground="White" FontSize="18" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter TargetName="ButtonBorder" Property="Background" Value="DeepSkyBlue"></Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="RadioButton">
                <Setter Property="Margin" Value="0.5,2"></Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type RadioButton}">
                            <Grid>
                                <Border x:Name="ButtonBorder" Height="35" Width="100" Background="#FF286E9E"></Border>
                                <TextBlock Text="{TemplateBinding Content}" Foreground="White" FontSize="18" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="True">
                                    <Setter TargetName="ButtonBorder" Property="Background" Value="DeepSkyBlue"></Setter>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        <Style x:Key="LastButtonStyle" TargetType="RadioButton">
                <Setter Property="Margin" Value="0.5,2"></Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type RadioButton}">
                            <Grid>
                                <Border x:Name="ButtonBorder" Height="35" Width="100" Background="#FF286E9E" CornerRadius="0,15,15,0"></Border>
                                <TextBlock Text="{TemplateBinding Content}" Foreground="White" FontSize="18" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="True">
                                    <Setter TargetName="ButtonBorder" Property="Background" Value="DeepSkyBlue"></Setter>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
    </UserControl.Resources>
    <Grid>
        <Border x:Name="ControlBorder" VerticalAlignment="Center" HorizontalAlignment="Center" CornerRadius="16,16,16,16">
            <Border.Background>
                <LinearGradientBrush StartPoint="0,1" EndPoint="1,1">
                    <GradientStop Color="White" Offset="0.2"></GradientStop>
                    <GradientStop Color="DeepSkyBlue" Offset="1"></GradientStop>
                </LinearGradientBrush>
            </Border.Background>
            <StackPanel x:Name="SpTitleList" Orientation="Horizontal" Background="Transparent" Margin="2,0">
            </StackPanel>
        </Border>
    </Grid>
</UserControl>

二、控件后台代码

public partial class TitleListControl : UserControl
    {
        public TitleListControl()
        {
            InitializeComponent();
        }
        /// <summary>
        /// get or set the items
        /// </summary>
        public List<TitleListItemModel> TitleListItems
        {
            get { return (List<TitleListItemModel>) GetValue(TitleListItemsProperty); }
            set{SetValue(TitleListItemsProperty,value);}
        }

        public static readonly DependencyProperty TitleListItemsProperty = DependencyProperty.Register("TitleListItems", typeof(List<TitleListItemModel>),
            typeof(TitleListControl),new PropertyMetadata(new List<TitleListItemModel>()));

        public UIElementCollection Items
        {
            get { return SpTitleList.Children; }
        }

        private void TitleListControl_OnLoaded(object sender, RoutedEventArgs e)
        {
            if (TitleListItems!=null)
            {
                var items = TitleListItems;
                int index = 0;
                foreach (var item in items)
                {
                    var radiaoButton=new RadioButton()
                    {
                        Content = item.Name
                    };

                    if (index == 0)
                    {
                        radiaoButton.Style = GetStyle("first");
                    }
                    else if (index == items.Count - 1)
                    {
                        radiaoButton.Style = GetStyle("last");
                    }
                    item.Index = index;
                    radiaoButton.DataContext = item;

                    radiaoButton.Checked += ToggleButton_OnChecked;

                    SpTitleList.Children.Add(radiaoButton);
                    index++;
                }
            }
        }

        private Style GetStyle(string type)
        {
            Style style = null;
            switch (type)
            {
                case "first":
                {
                    style = this.Resources["FirstButtonStyle"] as Style;
                }
                    break;
                case "last":
                {
                    style = this.Resources["LastButtonStyle"] as Style;
                }
                    break;
            }
            return style;
        }

        private void ToggleButton_OnChecked(object sender, RoutedEventArgs e)
        {
            var radioButton=sender as RadioButton;
            var dataModel=radioButton.DataContext as TitleListItemModel;
            int index = dataModel.Index;
            int count = SpTitleList.Children.Count;
            var linerBrush = new LinearGradientBrush(){StartPoint=new Point(0,1),EndPoint = new Point(1,1)};
            if (index==0)
            {
                linerBrush.GradientStops.Add(new GradientStop()
                {
                    Color = Colors.White,
                    Offset = 0.2
                });
                linerBrush.GradientStops.Add(new GradientStop()
                {
                    Color = Colors.DeepSkyBlue,
                    Offset = 1
                });
            }
            else if (index == count - 1)
            {
                linerBrush.GradientStops.Add(new GradientStop()
                {
                    Color = Colors.DeepSkyBlue,
                    Offset = 0
                });
                linerBrush.GradientStops.Add(new GradientStop()
                {
                    Color = Colors.White,
                    Offset = 0.8
                });
            }
            else
            {
                double offsetValue = Convert.ToDouble(index) / count;
                linerBrush.GradientStops.Add(new GradientStop()
                {
                    Color = Colors.DeepSkyBlue,
                    Offset = 0
                });
                linerBrush.GradientStops.Add(new GradientStop()
                {
                    Color = Colors.White,
                    Offset = offsetValue
                });
                linerBrush.GradientStops.Add(new GradientStop()
                {
                    Color = Colors.DeepSkyBlue,
                    Offset = 1
                });
            }
            ControlBorder.Background = linerBrush;
        }
    }

    public class TitleListItemModel
    {
        public int Index { get; set; }
        public string Name { get; set; }
        public string Remark { get; set; }
    }

三、引用UserControl

<Window x:Class="WpfApplication6.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:wpfApplication6="clr-namespace:WpfApplication6"
        Title="MainWindow" Height="350" Width="800" Background="LightGray">
    <Grid>
        <wpfApplication6:TitleListControl VerticalAlignment="Center" HorizontalAlignment="Center">
            <wpfApplication6:TitleListControl.TitleListItems>
                <wpfApplication6:TitleListItemModel Name="综合" ></wpfApplication6:TitleListItemModel>
                <wpfApplication6:TitleListItemModel Name="语音体验" ></wpfApplication6:TitleListItemModel>
                <wpfApplication6:TitleListItemModel Name="网页浏览"></wpfApplication6:TitleListItemModel>
                <wpfApplication6:TitleListItemModel Name="视频播放" ></wpfApplication6:TitleListItemModel>
                <wpfApplication6:TitleListItemModel Name="综合覆盖"></wpfApplication6:TitleListItemModel>
                <wpfApplication6:TitleListItemModel Name="速率性能"></wpfApplication6:TitleListItemModel>
                <wpfApplication6:TitleListItemModel Name="网络延时"></wpfApplication6:TitleListItemModel>
            </wpfApplication6:TitleListControl.TitleListItems>
        </wpfApplication6:TitleListControl>
    </Grid>
</Window>

如需要控件的SelectionChanged方法，在UserControl中添加个委托或者注册一个事件即可。