User avatar
stonstad
Topic Author
Posts: 183
Joined: 06 Jun 2016, 18:14
Location: Lesser Magellanic Cloud
Contact:

Drawing Brush Alternative

11 Jan 2022, 17:58

I am attempting to create a brush that has segmentation.

e.g.
Image

At first, I tried DrawingBrush but I see that is not yet supported. What would be a good alternative, which I may apply to either a rectangle or progressbar (either is fine)?
 
User avatar
sfernandez
Site Admin
Posts: 2569
Joined: 22 Dec 2011, 19:20

Re: Drawing Brush Alternative

11 Jan 2022, 20:04

For that kind of bar you can use a repeating linear gradient, something like this:
<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Border Background="Black" Padding="2" Width="500" Height="20">
    <Grid Width="{Binding Value, ElementName=progress}" HorizontalAlignment="Left">
      <Rectangle>
        <Rectangle.Fill>
          <LinearGradientBrush StartPoint="0,0" EndPoint="175,0" MappingMode="Absolute" SpreadMethod="Repeat">
            <GradientStop Offset="0" Color="#ffcca742"/>
            <GradientStop Offset="0.99" Color="#ffcca742"/>
            <GradientStop Offset="0.99" Color="#00cca742"/>
            <GradientStop Offset="1" Color="#00cca742"/>
          </LinearGradientBrush>
        </Rectangle.Fill>
      </Rectangle>
      <Rectangle Height="2" VerticalAlignment="Bottom" Fill="#b0ffffff"/>
    </Grid>
  </Border>
  <Slider x:Name="progress" Minimum="0" Maximum="496" Value="400" Width="200" VerticalAlignment="Bottom" Margin="20"/>
</Grid>
Is that what you are looking for?
 
User avatar
stonstad
Topic Author
Posts: 183
Joined: 06 Jun 2016, 18:14
Location: Lesser Magellanic Cloud
Contact:

Re: Drawing Brush Alternative

12 Jan 2022, 16:15

Wow. That is pretty incredible. I had no idea this was possible using SpreadMode. Is there a performance trade-off between using Slider vs ProgressBar vs Rectangle vs Border if I anticipate the width updating every frame?

Thank you!
 
User avatar
sfernandez
Site Admin
Posts: 2569
Joined: 22 Dec 2011, 19:20

Re: Drawing Brush Alternative

12 Jan 2022, 18:45

Using a LinearGradientBrush with SpreadMethod wont' have any performance downside.
In this case the best option is to have a ProgressBar and include the Grid rendering the bar inside the template as the PART_Indicator element.

Who is online

Users browsing this forum: Ahrefs [Bot] and 1 guest