I have created a storyboard animation, and it works for my one XAML element, however how can i apply it to multiple XAML elements ones?
here is the XAML:
<Storyboard x:Name="FlipOpen">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="Front">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-90"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="Back">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-270"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="-360"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
and the controlled XAML:
<StackPanel Background="Blue" Width="420" x:Name="Front">
<StackPanel.Projection>
<PlaneProjection/>
</StackPanel.Projection>
<TextBlock Text="Front" FontSize="25" Height="40"/>
<TextBlock Text="alcim" FontSize="10" Height=" 20"/>
</StackPanel>
<StackPanel x:Name="Back" Width="420" Background="Red">
<StackPanel.Projection>
<PlaneProjection RotationY="-270" />
</StackPanel.Projection>
<TextBlock Text="Hátlap"/>
</StackPanel>
</Grid>
How can i create the controlled party in code (multiple times), and then apply the storyboard to it? because they can't have the same x:Name property...
Define your storyboard as a resource and reference it from the controls you want animate or from a style.
<Storyboard x:Key="FlipOpenStoryboard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-90"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
Define in the stack panel when you want start the animation.
<StackPanel Background="Blue" Width="420" x:Name="Front">
<StackPanel.Triggers>
<EventTrigger RoutedEvent="StackPanel.Loaded">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource FlipOpenStoryboard}" />
</EventTrigger.Actions>
</EventTrigger>
</StackPanel.Triggers>
<StackPanel.Projection>
<PlaneProjection/>
</StackPanel.Projection>
<TextBlock Text="Front" FontSize="25" Height="40"/>
<TextBlock Text="alcim" FontSize="10" Height=" 20"/>
</StackPanel>
I don't have the PlaneProjection control so below I provide you a working example of animating the Height of the panel.
The animation:
<Storyboard x:Key="FlipOpenStoryboard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Height" >
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:4" Value="500"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
The panel:
<StackPanel Background="Blue" Width="420" Height="100">
<StackPanel.Triggers>
<EventTrigger RoutedEvent="StackPanel.Loaded">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource FlipOpenStoryboard}" />
</EventTrigger.Actions>
</EventTrigger>
</StackPanel.Triggers>
<TextBlock Text="Front" FontSize="25" Height="40"/>
<TextBlock Text="alcim" FontSize="10" Height=" 20"/>
</StackPanel>
Related
I have a working animation, now I am placing it in Apps.xaml under application.Resources, with all necessary bindings but it doesn't work. Am I missing something in the binding process? What is the proper way to bind the Storyboard.Targetname?
<Storyboard x:Key="RotateIn">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="button2">
<EasingDoubleKeyFrame KeyTime="0" Value="-100"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="button2">
<EasingDoubleKeyFrame KeyTime="0" Value="50"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="button2">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetName="AnimatedRotateTransform"
Storyboard.TargetProperty="Angle"
By="10"
To="360"
Duration="0:0:0.7"
FillBehavior="Stop" />
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="textBlock">
<EasingDoubleKeyFrame KeyTime="0" Value="90"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Button Grid.Column="1" Name="btn2" Width="150" Height="150" Background="gray">
<StackPanel >
<Image Source="{StaticResource img2}" x:Name="button2" RenderTransformOrigin=".5,.5">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="0" x:Name="AnimatedRotateTransform"/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<TextBlock x:Name="textBlock" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</TextBlock.RenderTransform>Rotate In</TextBlock>
</StackPanel>
</Button>
Above is my working animation created for a single Control. However, when I tried to make it into a resource where it can be reused like
here , (H.B.)'s answer :
<Application.Resources>
<ResourceDictionary>
<Storyboard x:Key="BindingRotate" x:Shared="False">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="{DynamicResource AnimationTarget}">
<EasingDoubleKeyFrame KeyTime="0" Value="-100"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="{DynamicResource AnimationTarget}">
<EasingDoubleKeyFrame KeyTime="0" Value="50"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="{DynamicResource AnimationTarget}">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetName="{DynamicResource AnimationTarget1}"
Storyboard.TargetProperty="Angle"
By="10"
To="360"
Duration="0:0:0.7"
FillBehavior="Stop" />
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="{DynamicResource AnimationTarget2}">
<EasingDoubleKeyFrame KeyTime="0" Value="90"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ResourceDictionary>
</Application.Resources>
<Button Grid.Column="1" Name="btn2" Width="150" Height="150" Background="gray">
<StackPanel >
<Image Source="{StaticResource img2}" x:Name="button2" RenderTransformOrigin=".5,.5">
<Image.Resources>
<sys:String x:Key="AnimationTarget">button</sys:String>
</Image.Resources>
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="0" x:Name="AnimationTarget1">
</RotateTransform>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<TextBlock x:Name="textBlock" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5" Text="Rotate In">
<TextBlock HorizontalAlignment="Center" Text="Expand In">
<TextBlock.Resources>
<sys:String x:Key="AnimationTarget2">button</sys:String>
</TextBlock.Resources>
</TextBlock>
</TextBlock>
</StackPanel>
<Button.Triggers>
<EventTrigger RoutedEvent="ButtonBase.MouseEnter">
<BeginStoryboard Storyboard="{StaticResource BindingRotate}"/>
</EventTrigger>
</Button.Triggers>
</Button>
''[Unknown]' property does not point to a DependencyObject in path '(0).(1)[3].(2)'.'
Exception is all I get. I followed exactly what was stated in the answer. Please let me know what is missing in my binding as I could not find related topic.
Another question, is there any way for me to set
<sys:String x:Key="AnimationTarget1">button</sys:String>
into
<RotateTransform.Resources>
as I did to other controls? Thank you for your time. I am still quite new to WPF.
Define the resources that you are referring to in your Storyboard, i.e. AnimationTarget, AnimationTarget1 and AnimationTarget2, in the Resources property of the Button where the EventTrigger is defined. This works for me:
<Button Grid.Column="1" Name="btn2" Width="150" Height="150" Background="gray">
<Button.Resources>
<sys:String x:Key="AnimationTarget">button2</sys:String>
<sys:String x:Key="AnimationTarget1">AnimatedRotateTransform</sys:String>
<sys:String x:Key="AnimationTarget2">button2</sys:String>
</Button.Resources>
<StackPanel >
<Image Source="{StaticResource img2}" x:Name="button2" RenderTransformOrigin=".5,.5">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform x:Name="AnimatedRotateTransform" Angle="0" />
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<TextBlock x:Name="textBlock" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5" Text="Rotate In">
<TextBlock HorizontalAlignment="Center" Text="Expand In" />
</TextBlock>
</StackPanel>
<Button.Triggers>
<EventTrigger RoutedEvent="ButtonBase.MouseEnter">
<BeginStoryboard Storyboard="{StaticResource BindingRotate}"/>
</EventTrigger>
</Button.Triggers>
</Button>
I'm hiding/showing a stackpanel with an animation using a Togglebutton defining this animation as follows:
<StackPanel Orientation="Horizontal">
<ToggleButton Width="48" Height="24" Margin="0,0,0,4" HorizontalAlignment="Left" FontFamily="Marlett" Content="6" >
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Checked">
<BeginStoryboard>
<Storyboard x:Name="HideGrid">
<DoubleAnimation Storyboard.TargetName="stackPanelName" Storyboard.TargetProperty="Height" From="0" To="520" Duration="0:0:0.3">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn"></PowerEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="5"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Unchecked">
<BeginStoryboard>
<Storyboard x:Name="ShowGrid">
<DoubleAnimation Storyboard.TargetName="stackPanelName" Storyboard.TargetProperty="Height" From="520" To="0" Duration="0:0:0.3">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn"></PowerEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="6"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
<TextBlock Margin="4">Show/Hide</TextBlock>
</StackPanel>
This is the stackpanel to which Storyboard.TargetName="stackPanelName" is referencing:
<StackPanel x:Name="stackPanelName">
<StackPanel Orientation="Horizontal" Margin="8">
<TextBlock Width="160">Name</TextBlock>
<TextBox Width="148" Margin="0,0,16,0" Text="{Binding Name}"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="8">
<TextBlock Width="160">Surname</TextBlock>
<TextBox Width="148" Margin="0,0,16,0" Text="{Binding Surname}"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="8">
<TextBlock Width="160">Phone number</TextBlock>
<TextBox Width="148" Margin="0,0,16,0" Text="{Binding PhoneNumber}"/>
</StackPanel>
</StackPanel>
This works perfectly, but i have to use this kind of togglebutton in several places and i'd like not to put <ToggleButton.Triggers>...</ToggleButton.Triggers> again and again for each togglebutton i have to use.
So i'm trying to define a template in a style...something like this:
<Style TargetType="{x:Type ToggleButton}" x:Key="tgButtonStyle1">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="2" Background="{TemplateBinding Background}" Storyboard.TargetName="{TemplateBinding Name}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Checked">
<BeginStoryboard>
<Storyboard x:Name="HideStackPanel">
<DoubleAnimation Storyboard.TargetName="{TemplateBinding Storyboard.TargetName}" Storyboard.TargetProperty="Height" From="0" To="320" Duration="0:0:0.3">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn"></PowerEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="5"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Unchecked">
<BeginStoryboard>
<Storyboard x:Name="ShowStackPanel">
<DoubleAnimation Storyboard.TargetName="{TemplateBinding Storyboard.TargetName}" Storyboard.TargetProperty="Height" From="320" To="0" Duration="0:0:0.3">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn"></PowerEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="6"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
And then:
<ToggleButton Width="48" Height="24" Margin="0,0,0,4" HorizontalAlignment="Left" FontFamily="Marlett" Content="6" Style="{Binding tgButtonStyle1}" Storyboard.TargetName="stackPanelName">
The key here is that in the trigger at <DoubleAnimation Storyboard.TargetName="{TemplateBinding Storyboard.TargetName}" ....> i'm using a templatebinding thinking that it would "catch" the value specified at <ToggleButton.... Storyboard.TargetName="stackPanelName" .../>.
But it has no effect at all, no animation.
What am i doing wrong? Is there something left to do?
Thanks.
I am trying to make ListViewItem which would increase after button click. But I have some problem when animation start's increasing it's overlap nearest items.
How can it be solved?
<ListView ItemsSource="{Binding Items}">
<ListView.ItemTemplate>
<DataTemplate>
<DataTemplate.Resources>
<Storyboard x:Key="Storyboard1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="grid">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1.27"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="grid">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1.562"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="grid">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="6.75"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="grid">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="5.625"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</DataTemplate.Resources>
<Grid x:Name="grid" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Content="{Binding .}"></Label>
<Button Grid.Column="1" Content="{Binding .}" Width="40">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard Storyboard="{StaticResource Storyboard1}"></BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Problem is in ListViewItem size, because it doesn't change?
I have a layout as below:
Grid x:Name="layoutRoot"
|--ListBox
|--Grid x:Name="detailsBaloon"
Initially my detailsBaloon's properties:
ScaleX = 0 and ScaleY = 0
so that it is not visible.
Now when user selects any item of the listBox, I want childGrid to become visible with some animation in which I set ScaleX and ScaleY to 1. It works perfectly. Now when user selects another item, I mean selection changes in the ListBox, then I want the same animation to show. But this time animation does not occur at all.
Here is my code :
<Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SwatchColorsDataSource}}">
<Grid.Resources>
<Storyboard x:Key="detailsBaloonVisibilityAnimation">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="detailsBaloon">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="5"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="detailsBaloon">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="5"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
<ListBox x:Name="SwatchListBox" ItemTemplate="{DynamicResource SwatchTemplate}" ItemsSource="{Binding XPath=/Swatches/Swatch}" ItemContainerStyle="{DynamicResource Colors_ListBoxStyle}" ItemsPanel="{DynamicResource ItemsPanelTemplate1}">
<ListBox.Triggers>
<EventTrigger RoutedEvent="ListBox.SelectionChanged">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource ResourceKey=detailsBaloonVisibilityAnimation}" />
</EventTrigger.Actions>
</EventTrigger>
</ListBox.Triggers>
<ListBox.Background>
<RadialGradientBrush>
<GradientStop Color="#FF5B5959" Offset="0"/>
<GradientStop Color="#FF242222" Offset="1"/>
</RadialGradientBrush>
</ListBox.Background>
</ListBox>
<Grid x:Name="detailsBaloon" HorizontalAlignment="Left" Height="230" Margin="78.8,26.4,0,0" VerticalAlignment="Top" Width="280" DataContext="{Binding SelectedItem, ElementName=SwatchListBox}" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0" ScaleY="0"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<Path Data="M0.5,4.5 C0.5,2.290861 2.290861,0.5 4.5,0.5 L259.5,0.5 C261.70914,0.5 263.5,2.290861 263.5,4.5 L263.79983,194.9999 C321.40044,282.59975 344.6003,286.99993 251.79984,214.19991 L4.5,213.5 C2.290861,213.5 0.5,211.70914 0.5,209.5 z" Fill="#FF2E2727" Margin="7,9,-41.778,-44.576" Stretch="Fill" Stroke="Black"/>
<TextBlock Height="30" Margin="14.6,22,15.4,0" TextWrapping="Wrap" Text="{Binding XPath=Theme}" VerticalAlignment="Top" Width="250" Foreground="White" FontSize="21.333"/>
<Rectangle Fill="{Binding XPath=Color1}" HorizontalAlignment="Left" Margin="18.6,68.6,0,76.4" RadiusY="4" RadiusX="4" Stroke="Black" Width="70" Height="85"/>
<Rectangle Fill="{Binding XPath=Color2}" Margin="102.6,68.6,107.4,76.4" RadiusY="4" RadiusX="4" Stroke="Black"/>
<Rectangle Fill="{Binding XPath=Color3}" Margin="0,68.6,23.4,76.4" RadiusY="4" RadiusX="4" Stroke="Black" HorizontalAlignment="Right" Width="70"/>
<TextBlock HorizontalAlignment="Left" Height="19.8" Margin="24.6,0,0,51.6" TextWrapping="Wrap" Text="{Binding XPath=Color1}" VerticalAlignment="Bottom" Width="70" Foreground="White"/>
<TextBlock Height="19.8" Margin="109.6,0,100.4,51.6" TextWrapping="Wrap" Text="{Binding XPath=Color2}" VerticalAlignment="Bottom" Foreground="White"/>
<TextBlock Height="19.8" Margin="0,0,15.4,51.6" TextWrapping="Wrap" Text="{Binding XPath=Color3}" VerticalAlignment="Bottom" Foreground="White" HorizontalAlignment="Right" Width="70"/>
</Grid>
</Grid>
In your animation From and To needs to specify as you havent define from value in animation evrytime and thats why animation is not upadted on every selection. here Animation considering From=To=1.
Your animation approach works as below
I have added extra DoubleAnimationUsingKeyFrames to define From="0" at keytime 0 so that grid scale on every selection
<Grid x:Name="LayoutRoot">
<Grid.Resources>
<Storyboard x:Key="detailsBaloonVisibilityAnimation">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="scale">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="5"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="scale">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="5"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="scale">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="5"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="scale">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="5"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
<ListBox x:Name="SwatchListBox" Background="Gray">
<ListBox.Triggers>
<EventTrigger SourceName="SwatchListBox" RoutedEvent="Selector.SelectionChanged">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource detailsBaloonVisibilityAnimation}"/>
</EventTrigger.Actions>
</EventTrigger>
</ListBox.Triggers>
<ListBoxItem>1</ListBoxItem>
<ListBoxItem>2</ListBoxItem>
<ListBoxItem>3</ListBoxItem>
</ListBox>
<Grid x:Name="detailsBaloon" Background="Red" HorizontalAlignment="Right" Height="230" VerticalAlignment="Top" Width="280" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<ScaleTransform x:Name="scale" ScaleX="0" ScaleY="0"/>
</Grid.RenderTransform>
</Grid>
</Grid>
I have a button on which I am adding 2 images. Later on I have to put animation on these images of button.
In below Xaml code I am using button template but after applying the templates button original behavior is lost like there is no border, no change on mouse cursor when hover etc. It is just apear as plan image.
How can I put back the button default behaviour?
<Button Height="89" Margin="0,62,158,0" Name="buttonStart" VerticalAlignment="Top" Click="buttonStart_Click" HorizontalAlignment="Right" Width="133" >
<Button.Template>
<ControlTemplate TargetType="Button" >
<Grid>
<Image x:Name="Normal" Source="/TFSCheckinReportGenerator;component/Resource/generate.png" Height="80" Width="80" Opacity="1"></Image>
<Image x:Name="Waiting" Source="/TFSCheckinReportGenerator;component/Resource/waiting.png" Height="80" Width="80" Opacity="0"></Image>
</Grid>
<ControlTemplate.Resources>
<Storyboard x:Key="ChangeImageToWaiting">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Normal" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Waiting" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Progress" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Waiting" Storyboard.TargetProperty="Width" Duration="00:00:01" AutoReverse="True">
<SplineDoubleKeyFrame Value="40"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Waiting" Storyboard.TargetProperty="Height" Duration="00:00:01" AutoReverse="True">
<SplineDoubleKeyFrame Value="40"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
</ControlTemplate>
</Button.Template>
</Button>
Instead of Template and ControlTemplate use ContentTemplate and DataTemplate and it will helps to show button original behavior like border and change button appearance on mouse hover etc.
Template defines the appearance of the control. ContentTemplate specifies how the content contained in/displayed by a ContentControl is to be displayed.
<Button Height="89" Margin="0,62,158,0" Name="buttonStart" VerticalAlignment="Top" HorizontalAlignment="Right" Width="133" >
<Button.ContentTemplate>
<DataTemplate>
<Grid>
<Image x:Name="Normal" Source="catalogscreen.png" Height="80" Width="80" Opacity="1"></Image>
<Image x:Name="Waiting" Source="catalogscreen.png" Height="80" Width="80" Opacity="0"></Image>
</Grid>
<DataTemplate.Resources>
<Storyboard x:Key="ChangeImageToWaiting">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Normal" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Waiting" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Progress" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Waiting" Storyboard.TargetProperty="Width" Duration="00:00:01" AutoReverse="True">
<SplineDoubleKeyFrame Value="40"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Waiting" Storyboard.TargetProperty="Height" Duration="00:00:01" AutoReverse="True">
<SplineDoubleKeyFrame Value="40"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</DataTemplate.Resources>
</DataTemplate>
</Button.ContentTemplate>
</Button>