question

n0kx avatar image
0 Votes"
n0kx asked ·

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

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.

Water-Progress-Bar.png


windows-wpf
· 2
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

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.

5801-wpb.jpg


0 Votes 0 · ·
wpb.jpg (31.3 KiB)
n0kx avatar image n0kx CodeWanderer-1205 ·

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!

0 Votes 0 · ·

1 Answer

AlexLi-MSFT avatar image
0 Votes"
AlexLi-MSFT answered ·

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>

5841-1.gif



Thanks.


1.gif (64.8 KiB)
· Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.