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

Question

question

n0kx asked Mar 24, '20 AlexLi-MSFT answered Mar 25, '20

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.

windows-wpf

· 2

5 |1600 characters needed characters left characters exceeded

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

CodeWanderer-1205 · Mar 24, 2020 at 07:17 PM

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.

0 ·

wpb.jpg (31.3 KiB)

n0kx CodeWanderer-1205 · Mar 25, 2020 at 02:57 AM

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 ·

Answer 1 · 2020-03-25T03:59:02.513Z

AlexLi-MSFT answered Mar 25, '20

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.

1.gif (64.8 KiB)

5 |1600 characters needed characters left characters exceeded

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

question