CODEWITHSUNDEEP
wpf
Abu Sufyan
Abu Sufyan

Reputation: 307

WPF Progressbar Rectangle

I am using the following ProgressBar Style:

<Style TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type ProgressBar}">
            <Grid MinHeight="14"  MinWidth="400" Background="{TemplateBinding Background}">
                <Border x:Name="PART_Track" CornerRadius="2" BorderThickness="1">
                    <Border.BorderBrush>
                        <SolidColorBrush Color="#FFFFFF" />
                    </Border.BorderBrush>
                </Border>
                <Border x:Name="PART_Indicator" CornerRadius="2"  BorderThickness="1" HorizontalAlignment="Left" 
                        Background="{TemplateBinding Foreground}" Margin="0,-1,0,1">
                    <Grid ClipToBounds="True" x:Name="Animation">
                        <Rectangle x:Name="PART_GlowRect" Width="200" HorizontalAlignment="Left"
                                     Fill="#3399FF" Margin="0,0,0,0" />
                    </Grid>
                </Border>
            </Grid>                    
        </ControlTemplate>
    </Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#404040"/>
</Style>

It's working fine but I want to display three rectangles with different colors at a time (Left, Center, Right) as the indicator part, how can I achieve this?

Upvotes: 1

Views: 1551

Answers (1)

qqbenq
qqbenq

Reputation: 10460

You should change your PART_GlowRect to be a Border instead of a Rectangle, and add the desired rectangles inside that:

<Border x:Name="PART_Indicator" CornerRadius="2"  BorderThickness="1" HorizontalAlignment="Left" 
        Background="{TemplateBinding Foreground}" Margin="0,-1,0,1">
    <Grid ClipToBounds="True" x:Name="Animation">
        <Border x:Name="PART_GlowRect" Width="150" HorizontalAlignment="Left"
                     Background="Transparent" Margin="0,0,0,0" >
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Rectangle Grid.Column="0" Fill="Red"  />
                <Rectangle Grid.Column="1" Fill="Green" />
                <Rectangle Grid.Column="2" Fill="Blue" />
            </Grid>
        </Border>
    </Grid>
</Border>

This is how it will look like:

progressbar

Upvotes: 4

Related Questions