Given the following :
<Viewbox>
<Foo:Bar
x:FieldModifier="private"
x:Name="fooBar"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RenderTransformOrigin="0.5,0.5">
<Foo:Bar.RenderTransform>
<TransformGroup>
<ScaleTransform
x:FieldModifier="private"
x:Name="xfScale"/>
<RotateTransform
x:FieldModifier="private"
x:Name="xfRotate"/>
</TransformGroup>
</Foo:Bar.RenderTransform>
<Foo:Bar.Style>
<Style TargetType="{x:Type Foo:Bar}">
<Style.Triggers>
<DataTrigger
Binding="{
Binding Flip,
RelativeSource={
RelativeSource AncestorType={
x:Type local:myFooBar}}}"
Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty=""/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Foo:Bar.Style>
</Foo:Bar>
</Viewbox>
Which is for a new component that is basically a fancy label stuck inside of a ViewBox (for auto-scaling the label), what do I need to point the Storyboard.TargetProperty at to be able to animate, say, the RotateTransform Angle property?
Your TargetName will need to be set for your xfScale / xfRotate named transforms respectfully.
Your TargetProperty will be the properties of the transforms used.
Like for Scale;
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
and
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
Except that only specifies the Property, you still need to provide a Value to animate to. So in it's entirety, it would become something like;
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="xfScale"
Storyboard.TargetProperty="X">
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0" />
</DoubleAnimationUsingKeyFrames>
Or for Rotate you need your Angle Property. It's worth mentioning, Blend makes this stuff much quicker/easier to do than by hand, especially for complex animations.
Hope this helps, cheers.
Related
I have a static loader image in wpf, I can easily use it as a loading gif by using WPFAnimatedGIF nuget package, but it seems like an overkill.
There is only one scenario in my application where I want to display a busy indicator.
There is nothing to trigger, it is a hidden object in my window and upon certain condition it becomes visible. Thus it should always rotate and appear like a normal animated loading gif.
What I have tried so far
<Image RenderTransformOrigin=".5,.5" Width="44" Height="44" Source="BusyIndicator.gif">
<Image.RenderTransform>
<RotateTransform Angle="45" />
</Image.RenderTransform>
</Image>
Image that I am using is
This Style animates the Angle of a RotateTransform in 30 degree steps when the Image element is visible.
<Style TargetType="Image" x:Key="BusyIndicatorStyle">
<Setter Property="Width" Value="44"/>
<Setter Property="Height" Value="44"/>
<Setter Property="Source" Value="BusyIndicator.png"/>
<Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
<Setter Property="RenderTransform">
<Setter.Value>
<RotateTransform/>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsVisible" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="RenderTransform.Angle">
<DiscreteDoubleKeyFrame KeyTime="0:0:0.1" Value="30"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.2" Value="60"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.3" Value="90"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.4" Value="120"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.5" Value="150"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.6" Value="180"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.7" Value="210"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.8" Value="240"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.9" Value="270"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:1.0" Value="300"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:1.1" Value="330"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:1.2" Value="360"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
...
<Image Style="{StaticResource BusyIndicatorStyle}" />
In order to avoid using an animation with many DiscreteDoubleKeyFrames, you may derive from DoubleAnimation and add a Step property:
public class DoubleAnimationWithSteps : DoubleAnimation
{
public static readonly DependencyProperty StepProperty = DependencyProperty.Register(
nameof(Step), typeof(double), typeof(DoubleAnimationWithSteps));
public double Step
{
get { return (double)GetValue(StepProperty); }
set { SetValue(StepProperty, value); }
}
protected override double GetCurrentValueCore(
double from, double to, AnimationClock animationClock)
{
var value = base.GetCurrentValueCore(from, to, animationClock);
if (Step > 0d)
{
value = Step * Math.Floor(value / Step);
}
return value;
}
protected override Freezable CreateInstanceCore()
{
return new DoubleAnimationWithSteps();
}
}
You would use it like this:
<Storyboard RepeatBehavior="Forever">
<local:DoubleAnimationWithSteps
Storyboard.TargetProperty="RenderTransform.Angle"
Duration="0:0:1.2" To="360" Step="30"/>
</Storyboard>
I know that this question already has an answer, but there is a different approach. Just use ProgressBar and set IsIndeterminate to True:
<ProgressBar Visibility="{Binding IsBusy, Converter={StaticResource BooleanToVisibilityConverter}}" Style="{StaticResource MaterialDesignCircularProgressBar}" IsIndeterminate="True" Width="36"/>
The style is from Material Design In XAML Toolkit. There is no need to use GIFs as busy indicators, I made the same mistake some time ago
I have a static loader image in wpf, I can easily use it as a loading gif by using WPFAnimatedGIF nuget package, but it seems like an overkill.
There is only one scenario in my application where I want to display a busy indicator.
There is nothing to trigger, it is a hidden object in my window and upon certain condition it becomes visible. Thus it should always rotate and appear like a normal animated loading gif.
What I have tried so far
<Image RenderTransformOrigin=".5,.5" Width="44" Height="44" Source="BusyIndicator.gif">
<Image.RenderTransform>
<RotateTransform Angle="45" />
</Image.RenderTransform>
</Image>
Image that I am using is
This Style animates the Angle of a RotateTransform in 30 degree steps when the Image element is visible.
<Style TargetType="Image" x:Key="BusyIndicatorStyle">
<Setter Property="Width" Value="44"/>
<Setter Property="Height" Value="44"/>
<Setter Property="Source" Value="BusyIndicator.png"/>
<Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
<Setter Property="RenderTransform">
<Setter.Value>
<RotateTransform/>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsVisible" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="RenderTransform.Angle">
<DiscreteDoubleKeyFrame KeyTime="0:0:0.1" Value="30"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.2" Value="60"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.3" Value="90"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.4" Value="120"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.5" Value="150"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.6" Value="180"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.7" Value="210"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.8" Value="240"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.9" Value="270"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:1.0" Value="300"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:1.1" Value="330"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:1.2" Value="360"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
...
<Image Style="{StaticResource BusyIndicatorStyle}" />
In order to avoid using an animation with many DiscreteDoubleKeyFrames, you may derive from DoubleAnimation and add a Step property:
public class DoubleAnimationWithSteps : DoubleAnimation
{
public static readonly DependencyProperty StepProperty = DependencyProperty.Register(
nameof(Step), typeof(double), typeof(DoubleAnimationWithSteps));
public double Step
{
get { return (double)GetValue(StepProperty); }
set { SetValue(StepProperty, value); }
}
protected override double GetCurrentValueCore(
double from, double to, AnimationClock animationClock)
{
var value = base.GetCurrentValueCore(from, to, animationClock);
if (Step > 0d)
{
value = Step * Math.Floor(value / Step);
}
return value;
}
protected override Freezable CreateInstanceCore()
{
return new DoubleAnimationWithSteps();
}
}
You would use it like this:
<Storyboard RepeatBehavior="Forever">
<local:DoubleAnimationWithSteps
Storyboard.TargetProperty="RenderTransform.Angle"
Duration="0:0:1.2" To="360" Step="30"/>
</Storyboard>
I know that this question already has an answer, but there is a different approach. Just use ProgressBar and set IsIndeterminate to True:
<ProgressBar Visibility="{Binding IsBusy, Converter={StaticResource BooleanToVisibilityConverter}}" Style="{StaticResource MaterialDesignCircularProgressBar}" IsIndeterminate="True" Width="36"/>
The style is from Material Design In XAML Toolkit. There is no need to use GIFs as busy indicators, I made the same mistake some time ago
I saw some examples for changing colors and brushes for selected item in a ListBox
I was wondering if there is a way to change visual properties of an item in a list box based on events in our code
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Name="spSceneThumb" Width="110">
<Border BorderThickness="1" Background="#FFfcfcfc" BorderBrush="#aaaaff" >
<StackPanel></StackPanel>
</Border>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
Let say I want to change border color of 5th item based on some event
I tried IValueConverter But changes to property wont effect border color
You can declare a custom RoutedEvent that you could listen to with an EventTrigger. You can find out how to declare a custom RoutedEvent in the How to: Create a Custom Routed Event page on MSDN. Once created, you can reference your custom event using the class name before the event name and not forgetting the XAML Namespace Prefix that you define for the namespace where it was declared. Something like this:
RoutedEvent="YourNamespacePrefix:YourClassName.YourEventName"
However, changing discrete values like Brushes is not so simple using an EventTrigger. You'll have to use a Storyboard with a DiscreteObjectKeyFrame element. You could try something like this:
<DataTemplate x:Key="Something">
<StackPanel Name="spSceneThumb" Width="110">
<Border Name="Border" BorderThickness="1" Background="#FFFCFCFC">
<StackPanel>
...
</StackPanel>
<Border.Resources>
<SolidColorBrush x:Key="EventBrush" Color="Red" />
</Border.Resources>
<Border.Style>
<Style TargetType="{x:Type Border}">
<Setter Property="BorderBrush" Value="#FFAAAAFF" />
<Style.Triggers>
<EventTrigger RoutedEvent="Prefix:YourClassName.YourEventName">
<EventTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="Border"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="{StaticResource EventBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.EnterActions>
</EventTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
</StackPanel>
</DataTemplate>
I have the following simple animation:
<Window x:Class="AnimationTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<StackPanel Background="Black">
<TextBox Name="Box" >
</TextBox>
<TextBlock Text="{Binding Text, ElementName=Box, NotifyOnTargetUpdated=True}" Foreground="White" >
<TextBlock.Style>
<Style TargetType="TextBlock" >
<Style.Triggers>
<EventTrigger RoutedEvent="Binding.TargetUpdated">
<BeginStoryboard>
<Storyboard>
<ColorAnimation AutoReverse="True" To="#A933FF" Duration="0:0:1" Storyboard.TargetProperty="Foreground.Color" FillBehavior="Stop" IsCumulative="True" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
</Window>
It just makes flash a value when the value changes. if you write a letter you see it flash correctly to the color set in the animation and go back. But if you click several times the duration is longer (which is the desired behavior) but then it goes to the original color without fading out. Why does this happen and how to avoid it?
So once again, we have a question where a user provides some code and says why is this happening? The answer in this case is the normal answer to these questions:
You wrote some code to make it happen
So to dig a little deeper, you have asked:
if you write a letter you see it flash correctly to the color set in the animation and go back. But if you click several times the duration is longer (which is the desired behavior) but then it goes to the original color without fading out. Why does this happen and how to avoid it?
First, why does this happen?
So the reason why it is happening is because you declared a ColorAnimation that has no From value set, so it will always start from the current value, whether this value has been manipulated by an Animation or not:
<ColorAnimation AutoReverse="True" To="#A933FF" Duration="0:0:1" FillBehavior="Stop"
Storyboard.TargetProperty="Foreground.Color" IsCumulative="True" />
For a single character entered, you'll see the ColorAnimation as you expected. However, when you continually type further characters, it will already have reached your set purple colour and you won't see any further animations until you stop typing, because it is now trying to animate from your purple colour to the same purple colour.
Now, how to avoid it?
To fix this issue, either supply a From colour, or set the Duration to be much quicker, or preferably both:
<ColorAnimation AutoReverse="True" From="White" To="#A933FF" Duration="0:0:0.1"
Storyboard.TargetProperty="Foreground.Color" FillBehavior="Stop"
IsCumulative="True" />
You can achieve the desired result using ColorAnimationUsingKeyFrames this will offer you much precise control over the same using keyframes instead of reversing the double animation which loses the initial value after being invoked multiple time and FillBehavior stop force it to revert to original value as result of animation complere
sample for you
<TextBlock Text="{Binding Text, ElementName=Box, NotifyOnTargetUpdated=True}" Foreground="White" >
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<EventTrigger RoutedEvent="Binding.TargetUpdated">
<BeginStoryboard>
<Storyboard>
<ColorAnimationUsingKeyFrames Duration="0:0:2" Storyboard.TargetProperty="Foreground.Color" >
<SplineColorKeyFrame Value="#A933FF"/>
<SplineColorKeyFrame Value="White" KeyTime="0:0:1"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
more cleaner approach involves stopping the previous storyboard and invoking a new one
<TextBlock Text="{Binding Text, ElementName=Box, NotifyOnTargetUpdated=True}" Foreground="White" >
<TextBlock.Style>
<Style TargetType="TextBlock" >
<Style.Resources>
<Storyboard x:Key="animate">
<ColorAnimationUsingKeyFrames Duration="0:0:2" Storyboard.TargetProperty="Background.Color" >
<SplineColorKeyFrame Value="#A933FF"/>
<SplineColorKeyFrame Value="White" KeyTime="0:0:1"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</Style.Resources>
<Style.Triggers>
<EventTrigger RoutedEvent="Binding.TargetUpdated">
<StopStoryboard BeginStoryboardName="beginAnimate"/>
<BeginStoryboard x:Name="beginAnimate" Storyboard="{StaticResource animate}"/>
</EventTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
is it possible to create a c# animation for the AttachedPropertys like Alignment? Maybe 1 Second Move between the Change from HorizontalAlignment.Left to HorizontalAlignment.Right - is it possible?
Thanks a lot.
You can't animate it in the sense of producing a smooth animation where something slides from left to right since they are discrete states. There aren't any in-between values. It is possible to create an "animation" which changes the alignment at some point from left to right, it just won't slide across. You could also do a lot of work and measure all the controls to manually create an animation which moves something from one side of the screen to the other using things like Canvas.Left or margins to position the controls.
The attached property part is not an issue, just use the full name of the attached property in the target property part of your animation.
While it's not possible to directly animate smoothly between two properties like
HorizontalAlignment="Right" VerticalAlignment="Bottom"
to
HorizontalAlignment="Center" VerticalAlignment="Center"
I did come up with a way to do this for an app in a way that I thought might be worth sharing. I simply placed the control in a grid that took up the full pane of the window. I aligned the control to the bottom right of the grid. Then I animated the grid with to transform and scale the corner down that I need to the point I want to align the control too (center in this example. See the complete code below.
<Grid Margin="5,5,14,70" Visibility="{Binding Path=AdminModeIsEnabled, Converter={StaticResource CollapsedVisibilityConverter}, FallbackValue=Visible}">
<Grid.Style>
<Style TargetType="Grid">
<Setter Property="LayoutTransform">
<Setter.Value>
<ScaleTransform/>
</Setter.Value>
</Setter>
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform/>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding CenterPanel}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(LayoutTransform).(ScaleTransform.ScaleY)" To="2" Duration="0:0:0.5" />
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)" To=".5" Duration="0:0:0.5" />
<DoubleAnimation Storyboard.TargetProperty="(LayoutTransform).(ScaleTransform.ScaleX)" To="2" Duration="0:0:0.5" />
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)" To=".5" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(LayoutTransform).(ScaleTransform.ScaleY)" To="1" Duration="0:0:0.5" />
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)" To="1" Duration="0:0:0.5" />
<DoubleAnimation Storyboard.TargetProperty="(LayoutTransform).(ScaleTransform.ScaleX)" To="1" Duration="0:0:0.5" />
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)" To="1" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
<Image Height="15" Source="\Images\Test.png" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
</Grid>
It is possible, here is an example:
class StoryBoardManager : System.Windows.Media.Animation.Storyboard
{
public void ChangeRectangleAlignment(DependencyObject target, VerticalAlignment verticalAlignment, HorizontalAlignment horizontalAlignment, int BeginTimeMillisecond)
{
ObjectAnimationUsingKeyFrames objectAnimation = new ObjectAnimationUsingKeyFrames()
{
BeginTime = TimeSpan.FromMilliseconds(0)
};
Storyboard.SetTarget(objectAnimation, target);
Storyboard.SetTargetProperty(objectAnimation, new PropertyPath("(FrameworkElement.HorizontalAlignment)"));
DiscreteObjectKeyFrame keyFrame = new DiscreteObjectKeyFrame(horizontalAlignment, TimeSpan.FromMilliseconds(BeginTimeMillisecond));
objectAnimation.KeyFrames.Add(keyFrame);
this.Children.Add(objectAnimation);
}
}
For more information, see this other question.