- extsmichalak
- Posts: 21
- Joined:
Animated ProgressBar
Hey!
Is it possible to animate the dynamic value that's passed to `ProgressBar`? For example I found such solution here: viewtopic.php?f=3&t=2081&p=11609&hilit= ... bar#p11609 but it doesn't work for me:
Do I have to add custom Behavior for ProgressBar or create my own custom ProgressBar? Thanks
Is it possible to animate the dynamic value that's passed to `ProgressBar`? For example I found such solution here: viewtopic.php?f=3&t=2081&p=11609&hilit= ... bar#p11609 but it doesn't work for me:
Code: Select all
<ProgressBar
x:Name="CustomProgressBar"
Style="{DynamicResource LoadingBar}"
Width="..."
Height="..."
Foreground="..."
Background="..."
Maximum="1"
Minimum="0"
Orientation="Horizontal"
Value="{Binding progress}">
<ProgressBar.Triggers>
<EventTrigger RoutedEvent="RangeBase.ValueChanged">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Value"
To="{Binding progress}"
Duration="0:0:3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ProgressBar.Triggers>
</ProgressBar>
-
sfernandez
Site Admin
- Posts: 2997
- Joined:
Re: Animated ProgressBar
You just need to bind the viewmodel property to a different property (Tag or any attached property you defined) and animate the Value property of the progress bar when that other property changes:
You can also encapsulate this inside a Behavior that fires the animation internally when its own property changes:
Code: Select all
<Grid
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions">
<ProgressBar x:Name="progress" Width="400" Height="30" Minimum="0" Maximum="500" Tag="{Binding Value, ElementName=source}">
<i:Interaction.Triggers>
<ei:PropertyChangedTrigger Binding="{Binding Tag, ElementName=progress}">
<ei:ControlStoryboardAction>
<ei:ControlStoryboardAction.Storyboard>
<Storyboard>
<DoubleAnimation To="{Binding Value, ElementName=source}" Duration="0:0:0.3"
Storyboard.TargetProperty="Value" Storyboard.TargetName="progress"/>
</Storyboard>
</ei:ControlStoryboardAction.Storyboard>
</ei:ControlStoryboardAction>
</ei:PropertyChangedTrigger>
</i:Interaction.Triggers>
</ProgressBar>
<Slider x:Name="source" Minimum="0" Maximum="500" Width="200"
VerticalAlignment="Bottom" Margin="10" IsMoveToPointEnabled="True"/>
</Grid>
Code: Select all
<ProgressBar Style="{DynamicResource LoadingBar}">
<i:Interaction.Behaviors>
<local:AnimatedProgressBehavior Progress="{Binding progress}"/>
</i:Interaction.Behaviors>
</ProgressBar>
Code: Select all
public class AnimatedProgressBehavior: Behavior<ProgressBar>
{
...
private void OnProgressChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
AnimatedProgressBehavior behavior = (AnimatedProgressBehavior)d;
if (behavior.AssociatedObject != null)
{
behavior.animation.To = (float)e.NewValue;
behavior.storyboard.Begin(behavior.AssociatedObject);
}
}
}
- extsmichalak
- Posts: 21
- Joined:
Re: Animated ProgressBar
Thank you @sfernandez! Tested out XAML way and it works perfectly
-
sfernandez
Site Admin
- Posts: 2997
- Joined:
Re: Animated ProgressBar
Great, I'm marking this as solved.
Who is online
Users browsing this forum: Ahrefs [Bot], Bing [Bot] and 5 guests