自定义标题栏
自定义列表，可以直接修改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中添加个委托或者注册一个事件即可。