Tiddan
Topic Author
Posts: 8
Joined: 05 Mar 2019, 14:12

Radial progress bars

18 Dec 2020, 13:59

Hi all,

I'm remaking existing UI for a Unity project that uses a lot of radial progress-bars for showing things like cooldowns and health. In Unity UI systems you would simply use the Image components "fill" value using the 360 mode.

I'm struggling a bit to find a good way to achieve this with XAML. I also saw some >5y old posts on this topic, but how would one do this now in 2020? Is there a good way by now?

Hope someone can give me a push in the right direction on this :)
 
User avatar
sfernandez
Site Admin
Posts: 2984
Joined: 22 Dec 2011, 19:20

Re: Radial progress bars

18 Dec 2020, 16:07

We recently did a sample showing different loading spinners:



You can use the same technique (stroked ellipses with noesis:Path.TrimStart, TrimEnd, TrimOffset) in the template of a ProgressBar control.
<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:noesis="clr-namespace:NoesisGUIExtensions;assembly=Noesis.GUI.Extensions">
  <Grid.Resources>
    <ControlTemplate x:Key="t" TargetType="ProgressBar">
      <Ellipse Stroke="Black" StrokeThickness="10" noesis:Path.TrimStart="0"
               noesis:Path.TrimEnd="{Binding Value, RelativeSource={RelativeSource TemplatedParent}}"/>
    </ControlTemplate>
  </Grid.Resources>
  <ProgressBar Width="200" Height="200" Template="{StaticResource t}" Minimum="0" Maximum="1" Value="0.3"/>
</Grid>
 
Tiddan
Topic Author
Posts: 8
Joined: 05 Mar 2019, 14:12

Re: Radial progress bars

18 Dec 2020, 22:19

Wow, those samples are amazing!

Right now we are using sprites but seeing this we might reconsider and try to make something cool just using simple geometry.

If I do want to keep the sprites, then what would be the best setup? My best guess would be some kind of OpacityMask animation?
 
User avatar
sfernandez
Site Admin
Posts: 2984
Joined: 22 Dec 2011, 19:20

Re: Radial progress bars

21 Dec 2020, 10:22

Using OpacityMask could be an option, or you can use a Clip geometry generated with a converter depending on the value of the progress bar:
<Rectangle Fill="{StaticResource ProgressSprite}"
  Clip="{Binding Value, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource RadialClipConverter}}/>
Then the converter can use StreamGeometry.Open() to build the appropriate clip geometry.
 
Tiddan
Topic Author
Posts: 8
Joined: 05 Mar 2019, 14:12

Re: Radial progress bars

22 Dec 2020, 08:50

I will look into that. Thanks for the great replies :)
 
Susanna.Rowland
Posts: 11
Joined: 07 Apr 2021, 15:20

Re: Radial progress bars

27 Apr 2021, 18:24

Just adding a note that the Path.TrimStart/End functionality used in the above example is not currently working in blend, although it is fine in C++.
I have raised a ticket for this. For reference #0001986
 
KeldorKatarn
Posts: 193
Joined: 30 May 2014, 10:26

Re: Radial progress bars

27 Apr 2021, 21:28

This might also help:
https://stackoverflow.com/questions/230 ... tery-meter

Radial progress bars and stuff like that is relatively easy to do with some custom controls.
 
User avatar
jsantos
Site Admin
Posts: 3906
Joined: 20 Jan 2012, 17:18
Contact:

Re: Radial progress bars

28 Apr 2021, 11:04

Our implementation of Path trimming is far more efficient than any approach in WPF because the properties are internally handled by our geometry generator.

As said in the ticket, let's see if we can find a workaround implementation (even if slow) for Blend / WPF.
 
User avatar
stonstad
Posts: 241
Joined: 06 Jun 2016, 18:14
Location: Lesser Magellanic Cloud
Contact:

Re: Radial progress bars

31 Dec 2021, 18:50

This is great stuff! Thank you for the XAML toy samples.

Who is online

Users browsing this forum: No registered users and 83 guests