自定义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();
    }
}