Page 1 of 1
Radial progress bars
Posted: 18 Dec 2020, 13:59
by Tiddan
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 :)
Re: Radial progress bars
Posted: 18 Dec 2020, 16:07
by sfernandez
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>
Re: Radial progress bars
Posted: 18 Dec 2020, 22:19
by Tiddan
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?
Re: Radial progress bars
Posted: 21 Dec 2020, 10:22
by sfernandez
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.
Re: Radial progress bars
Posted: 22 Dec 2020, 08:50
by Tiddan
I will look into that. Thanks for the great replies :)
Re: Radial progress bars
Posted: 27 Apr 2021, 18:24
by Susanna.Rowland
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
Re: Radial progress bars
Posted: 27 Apr 2021, 21:28
by KeldorKatarn
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.
Re: Radial progress bars
Posted: 28 Apr 2021, 11:04
by jsantos
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.
Re: Radial progress bars
Posted: 31 Dec 2021, 18:50
by stonstad
This is great stuff! Thank you for the XAML toy samples.