<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; }}

<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>