Radial progress bars
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 :)
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 :)
-
sfernandez
Site Admin
- Posts: 2991
- Joined:
Re: Radial progress bars
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.
You can use the same technique (stroked ellipses with noesis:Path.TrimStart, TrimEnd, TrimOffset) in the template of a ProgressBar control.
Code: Select all
<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
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?
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?
-
sfernandez
Site Admin
- Posts: 2991
- Joined:
Re: Radial progress bars
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:
Then the converter can use StreamGeometry.Open() to build the appropriate clip geometry.
Code: Select all
<Rectangle Fill="{StaticResource ProgressSprite}"
Clip="{Binding Value, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource RadialClipConverter}}/>
Re: Radial progress bars
I will look into that. Thanks for the great replies :)
- Susanna.Rowland
- Posts: 11
- Joined:
Re: Radial progress bars
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
I have raised a ticket for this. For reference #0001986
- KeldorKatarn
- Posts: 193
- Joined:
Re: Radial progress bars
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.
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
Our implementation of Path trimming is far more efficient than any approach in WPF because the properties are internally handled by our geometry generator.This might also help:
https://stackoverflow.com/questions/230 ... tery-meter
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
This is great stuff! Thank you for the XAML toy samples.
Who is online
Users browsing this forum: Ahrefs [Bot], Semrush [Bot] and 56 guests