Tiddan
Topic Author
Posts: 7
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 :)

Tags:
 
User avatar
sfernandez
Site Admin
Posts: 2056
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: 7
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: 2056
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: 7
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 :)

Who is online

Users browsing this forum: No registered users and 0 guests