带有圆角的自定义Silverlight进度条控件

Question

我打算创建一个自定义进度栏控件，该控件支持进度切片。最终的外观将是：

我是比较新的Silverlight控件开发，所以这里是我的想法和问题：

1. 我会被定义在XAML控制的结构作为ItemsControl。
2. ItemsControl元素将被绑定到数据源，该数据源将包含条形截面。
3. ItemTemplate将定义绘制这些部分的方式。

“诀窍”是，第一个和最后一个部分分别应该有一个左右圆角。我怎样才能定义这个约束，以便源头的第一个和最后一个项目都是用圆角绘制的？我可以在XAML或代码中做到这一点吗？如果代码，我在哪里注入逻辑？

Answer 1

您可以创建一个边框列表，从列表中取第一个和最后一个边框并应用角半径。

XAML：

<Window x:Class="TestWpf.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:TestWpf="clr-namespace:TestWpf" Title="MainWindow" Height="350" Width="525"> 
    <Window.Resources> 
     <TestWpf:AchievedConverter x:Key="AchievedConverter"/> 
    </Window.Resources> 
    <Grid> 
     <ListBox Name="listBox" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ItemsSource="{Binding Bars}"> 
      <ListBox.ItemsPanel> 
       <ItemsPanelTemplate> 
        <WrapPanel IsItemsHost="True" /> 
       </ItemsPanelTemplate> 
      </ListBox.ItemsPanel> 
      <ListBox.ItemTemplate> 
       <DataTemplate> 
        <Border Height="10" CornerRadius="{Binding Corner}" Width="{Binding Width}" Background="{Binding IsAchieved, Converter={StaticResource AchievedConverter}}"/> 
       </DataTemplate> 
      </ListBox.ItemTemplate> 
     </ListBox> 
    </Grid> 
</Window> 

C＃：

/// <summary> 
/// Interaction logic for MainWindow.xaml 
/// </summary> 
public partial class MainWindow : Window 
{ 
    private ObservableCollection<Bar> _bars; 

    public MainWindow() 
    { 
     InitializeComponent(); 
     this.DataContext = this; 

     _bars = new ObservableCollection<Bar>(); 

     //Init 
     _bars.Add(new Bar {Width = 20, IsAchieved = true, Corner = new CornerRadius(5, 0, 0, 5)}); 
     _bars.Add(new Bar {Width = 60, IsAchieved = true}); 
     _bars.Add(new Bar {Width = 80, IsAchieved = true}); 
     _bars.Add(new Bar {Width = 20, IsAchieved = false}); 
     _bars.Add(new Bar {Width = 50, IsAchieved = false, Corner = new CornerRadius(0, 5, 5, 0)}); 
    } 

    public ObservableCollection<Bar> Bars 
    { 
     get { return _bars; } 
    } 
} 

public class Bar 
{ 
    public double Width { get; set; } 
    public bool IsAchieved { get; set; } 
    public CornerRadius Corner { get; set; } 
} 

public class AchievedConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     if ((bool)value) 
      return new SolidColorBrush(Colors.Green); 
     else 
      return new SolidColorBrush(Colors.Red); 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     throw new NotImplementedException(); 
    } 
}