How to make a multi-color segmented progress bar in wpf?

Question

I am trying to create a UserControl that acts as a kind of segmented progress bar. The input will be a set of objects, each object will have a category, a duration property, and a state property. UserControl must stretch the width and height of the parent control. Each item in the collection should represent a progress bar segment; the segment color is associated with the status, the segment width is associated with the duration, and the text superimposed on the segment will be associated with a category or something.

Example: Custom execution bar

The text can be an identifier of a collection item, the color of the top segment will be associated with the status, the bottom color will be associated with the category and width associated with the duration.

Some of the options that I have considered are:

• Create a stack panel and define each width of each element and wrap it all in the viewport to stretch the height and width. How can I control the size of the text, how to make the content fit in height, how to link the glass collection to the collection?
• Make an attached property for a grid control that will dynamically create columns and map collection items to grids. It seems like a lot of work, and I hope theres a simpler solution, as my requirements are quite specific.
• Maybe this is a way to redefine a single grid to make it uneven?
• , , ?

, , - .

Answer 1

.

: http://1drv.ms/1QmAVuZ

1. , Grid

:

public class StepItem
{
    public int Length { get; set; }
    public int Index { get; set; }
    public String  Label { get; set; }
    public Brush Brush { get; set; }
}

2. CustomControl ItemsControl

CustomControl, Progressbar.

ItemsControl, :

- ItemsSource StepItems

- ItemsControl DataTemplate

- ItemsControl Panel Grid ,

3. Generic.xaml

-layoutGrid " "

-overlayGrid ( )

- ItemsPresenter DataTemplates, StepItem

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type local:ProgressItemsControl}">
            <Border BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">
                <Grid x:Name="layoutGrid">
                    <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    <Grid x:Name="overlayGrid" Width="100" HorizontalAlignment="Right" Background="White"/>
                </Grid>
            </Border>
        </ControlTemplate>
    </Setter.Value>
</Setter>

4. ItemsPanel ( )

<Setter Property="ItemsPanel">
    <Setter.Value>
        <ItemsPanelTemplate >
            <Grid x:Name="stepsGrid" IsItemsHost="True" />
        </ItemsPanelTemplate>
    </Setter.Value>
</Setter>

5.

int i = 0;
foreach (StepItem stepItem in ItemsSource)
{
    total += stepItem.Length;
    var columnDefinition = new ColumnDefinition() { Width = new GridLength(stepItem.Length, GridUnitType.Star) };
    stepsGrid.ColumnDefinitions.Add(columnDefinition);
    Grid.SetColumn(stepsGrid.Children[i], stepItem.Index);
    i++;
}

6. ,

()

public int Value
{
    get { return (int)GetValue(ValueProperty); }
    set { SetValue(ValueProperty, value); }
}
// Using a DependencyProperty as the backing store for Value.  This enables animation, styling, binding, etc...
public static readonly DependencyProperty ValueProperty =
    DependencyProperty.Register("Value", typeof(int), typeof(ProgressItemsControl), new PropertyMetadata(0));

7.

<local:CustomProgressBar
    x:Name="customProgressBar1"
    HorizontalAlignment="Left" Height="50" Margin="32,49,0,0"      
    VerticalAlignment="Top" Width="379"/>

8.

private List<StepItem> stepItems = new List<StepItem>{
            new StepItem{
                Index=0,
                Label="Step1",
                Length=20,
                Brush = new SolidColorBrush(Color.FromArgb(255,255,0,0)),
            new StepItem{
                Index=4,
                Label="Step5",
                Length=25,
                Brush = new SolidColorBrush(Color.FromArgb(255,0,128,0)),
           },
        };
void MainWindow_Loaded(object sender, RoutedEventArgs e)
{
    progressItemsControl1.ItemsSource = stepItems;
}