Using an image for the top of a ProgressBar's Value

n0kx 1

Basically, I want to have a vertical ProgressBar that represents water and I'd like for the top of the ProgressBar line to be a wave instead of the default line.

Is there a way to use an image like that in the ProgressBar? I really just need to have an image that sits right at the top of the Value of the ProgressBar.

For example, A would be a normal ProgressBar and B is what I'd like to have.

Code Wanderer 396 Reputation points

2020-03-24T19:17:44.173+00:00

Yes.

You have two options, edit style for existing progress bar or create new.

Whatever you choose, trick is create Grid with AutoSize and divide it in to two areas, bottom for rectangle and top for the water graphic. Water area will have constant Height size and Rectangle area will be auto size. You will bind only the Height of the rectangle to the progress bar.
Size of the image of wave can be small, like you subtract left progress bar (image you provide) rectangle from right and you get the result.
n0kx 1 Reputation point

2020-03-25T02:57:42.147+00:00

Nice! I like that approach too. I ended up creating a Slider template and using an image for the thumb. And I just layered the Slider over the ProgressBar.

Thanks for the reply!

1 answer

Alex Li-MSFT 1,096

Hi,

Welcome to our Microsoft Q&A platform!

example:

 <Grid>  
        <ProgressBar Width="200" Height="40" Name="progressBar1" Orientation="Horizontal" RenderTransformOrigin="0.5,0.5">  
            <ProgressBar.Template>  
                <ControlTemplate TargetType="ProgressBar">  
                    <Border BorderBrush="Black" x:Name="Root" BorderThickness="0.5">  
                        <Grid Name="PART_Track"  >  
                            <Grid.ColumnDefinitions>  
                                <ColumnDefinition Width="Auto"/>  
                                <ColumnDefinition  Width="Auto"/>  
                            </Grid.ColumnDefinitions>  
                            <Path  StrokeThickness="1" Grid.Column="1" Fill="Blue">  
                                <Path.Data>  
                                    <PathGeometry>  
                                        <PathFigure StartPoint="0,0">  
                                            <PolyLineSegment Points="10,4 8,8 10,12 8,16 7,20 8,24 10,28 7,32 9,36 0,40"></PolyLineSegment>  
                                        </PathFigure>  
                                    </PathGeometry>  
                                </Path.Data>  
                            </Path>  
                            <Rectangle Name="PART_Indicator" HorizontalAlignment="Left" Fill="Blue"   Grid.Column="0" >  
  
                            </Rectangle>  
                              
                        </Grid>  
                    </Border>  
                </ControlTemplate>  
            </ProgressBar.Template>  
            <ProgressBar.RenderTransform>  
                <TransformGroup>  
                    <RotateTransform Angle="270"/>  
                </TransformGroup>  
            </ProgressBar.RenderTransform>  
        </ProgressBar>  
         
    </Grid>

Thanks.

Share via

Using an image for the top of a ProgressBar's Value

1 answer

Your answer