带圆角的自定义 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();
    }
}