Question

I’m planning to create a custom progress bar control, that supports progress sectioning. The final look will be:

I am comparatively new to Silverlight control development, so here is my idea and question:

1. I will be defining control’s structure in XAML as an ItemsControl.
2. ItemsControl element will be bound to a data source, that will contain bar sections.
3. An ItemTemplate is going to define the way those sections are drawn.

The “trick” is, that the first and the last section should have a left and right rounded corners respectively. How can I define this constrain, so that the first and the last item from a source are drawn with rounded corners? Could I do it in XAML, or from code. If code, where do I inject the logic?

Answer 1

You can create a List of Border, take the first and last Border from your List and apply a corner radius.

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