We Keep Coding

How do i change the image in a "flip" animation in XAML?

So I am trying to make an animation for a memory game project. The animation I am having trouble with is the flip animation. I have no problem making the image flip, but I want to make it change the image after the scale.x went from -1 to 0. This is what I have so far:
<Window.Resources>
<ControlTemplate TargetType="Button" x:Key="ImageButton">
<Image Source="gurbe1.jpg"
x:Name="image"
Height="{TemplateBinding Height}"
Width="{TemplateBinding Width}" />
</ControlTemplate>
</Window.Resources>
<Grid>
<Button Template="{StaticResource ImageButton}"
Width="100" Click="Button_Click" RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform>
<ScaleTransform x:Name="AnimatedScaleTransform" ScaleX="-1" />
</Button.RenderTransform>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="0" Duration="0:0:1" Storyboard.TargetName="AnimatedScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleX)"/>
<DoubleAnimation To="1" BeginTime="0:0:1" Duration="0:0:1" Storyboard.TargetName="AnimatedScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleX)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
</Window>
I already looked on here and tried some stuff, but I couldn't get it to work :
xaml change image source
How can I do multiple animations in a single storyboard in C#/XAML?

For people also having this problem, it's as simple as this:
<Grid>
<Button Width="100" Click="Button_Click" RenderTransformOrigin="0.5,0.5" Height="100">
<Button.RenderTransform>
<ScaleTransform x:Name="AnimatedScaleTransform" ScaleX="-1" />
</Button.RenderTransform>
<Button.Template>
<ControlTemplate>
<Image Source="gurbe1.jpg"/>
</ControlTemplate>
</Button.Template>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="0" Duration="0:0:1" Storyboard.TargetName="AnimatedScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleX)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Button Width="100" Click="Button_Click" RenderTransformOrigin="0.5,0.5" Height="100">
<Button.RenderTransform>
<ScaleTransform x:Name="AnimatedScaleTransform2" ScaleX="0" />
</Button.RenderTransform>
<Button.Template>
<ControlTemplate>
<Image Source="gurbe2.jpg"/>
</ControlTemplate>
</Button.Template>
<Button.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="0" To="1" BeginTime="0:0:2.3" Duration="0:0:1" Storyboard.TargetName="AnimatedScaleTransform2" Storyboard.TargetProperty="(ScaleTransform.ScaleX)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
It's not smooth atm, but you can get pretty close by adjusting the begin time

Start storyboard at the same time with one buttonclick in xaml

I'm trying to make a flip animation, and have one that flips when it's a loaded RoutedEvent, but I want it to flip when the RoutedEvent is Button.Click. This is my code so far:
<Grid>
<Button Width="100" Click="Button_Click" RenderTransformOrigin="0.5,0.5" Height="100">
<Button.RenderTransform>
<ScaleTransform x:Name="AnimatedScaleTransform" ScaleX="-1" />
</Button.RenderTransform>
<Button.Template>
<ControlTemplate>
<Image Source="gurbe1.jpg"/>
</ControlTemplate>
</Button.Template>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard x:Name="Storyboard1" Completed="Storyboard1_Completed">
<DoubleAnimation To="0" Duration="0:0:1" Storyboard.TargetName="AnimatedScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleX)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Button Width="100" Click="Button_Click" RenderTransformOrigin="0.5,0.5" Height="100">
<Button.RenderTransform>
<ScaleTransform x:Name="AnimatedScaleTransform2" ScaleX="0" />
</Button.RenderTransform>
<Button.Template>
<ControlTemplate>
<Image Source="gurbe2.jpg"/>
</ControlTemplate>
</Button.Template>
<Button.Triggers>
<EventTrigger RoutedEvent="loaded">
<BeginStoryboard>
<Storyboard x:Name="Storyboard2">
<DoubleAnimation From="0" To="1" BeginTime="0:0:2.3" Duration="0:0:1" Storyboard.TargetName="AnimatedScaleTransform2" Storyboard.TargetProperty="(ScaleTransform.ScaleX)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
So is there a way to start the storyboards with just one click?

So i think i got it:
XAML
<Window.Resources>
<BeginStoryboard x:Key="begin">
<Storyboard x:Name="Storyboard1">
<DoubleAnimation To="0" Duration="0:0:1" Storyboard.TargetName="AnimatedScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleX)"/>
</Storyboard>
</BeginStoryboard>
<BeginStoryboard x:Key="twa">
<Storyboard x:Name="Storyboard2">
<DoubleAnimation From="0" To="1" BeginTime="0:0:2.3" Duration="0:0:1" Storyboard.TargetName="AnimatedScaleTransform2" Storyboard.TargetProperty="(ScaleTransform.ScaleX)"/>
</Storyboard>
</BeginStoryboard>
</Window.Resources>
<Grid>
<Button x:Name="button1" Width="100" Click="button1_Click" RenderTransformOrigin="0.5,0.5" Height="100">
<Button.RenderTransform>
<ScaleTransform x:Name="AnimatedScaleTransform" ScaleX="-1" />
</Button.RenderTransform>
<Button.Template>
<ControlTemplate>
<Image Source="gurbe1.jpg"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="100" Click="button1_Click" RenderTransformOrigin="0.5,0.5" Height="100">
<Button.RenderTransform>
<ScaleTransform x:Name="AnimatedScaleTransform2" ScaleX="0" />
</Button.RenderTransform>
<Button.Template>
<ControlTemplate>
<Image Source="gurbe2.jpg"/>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
C#
private void Clicked_Button(object sender, RoutedEventArgs e)
{
BeginStoryboard sb = this.FindResource("begin2") as BeginStoryboard;
sb.Storyboard.Begin();
}

WPF: Change visiable of Label when other control click

I just go to WPF and have many problems, I very much like WPF and started working with it. I just make a design with WPF:
Now, I want when I click on label (icon with 3 line), then label without icon in sidebar will hide (can hide with animation).
Here my code:
Icon button:
<DockPanel DockPanel.Dock="Left">
<!-- Minimize Sidebar -->
<Label Name="LblMinimizeSideBar" Style="{StaticResource FontAwesome}" Foreground="{DynamicResource MainColor}" FontSize="24" Margin="10 0 0 0" VerticalAlignment="Center" MouseLeftButtonDown="LblMinimizeSideBar_MouseLeftButtonDown"></Label>
</DockPanel>
Sidebar:
<StackPanel DockPanel.Dock="Left" Width="80" Background="{DynamicResource MainColor}">
<ItemsControl Name="IcTodoList">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel IsEnabled="{Binding IsEnabled}" Orientation="Vertical" Background="{Binding Background}" SnapsToDevicePixels="True" Cursor="Hand">
<Label Style="{StaticResource FontAwesome}" HorizontalAlignment="Center" FontSize="20" Foreground="#FFF">

</Label>
<Label HorizontalAlignment="Center" Foreground="#FFF" Padding="0 0 0 10" Content="{Binding Title}"></Label>
<StackPanel.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(StackPanel.Background).Color">
<LinearColorKeyFrame Value="#DB1918" KeyTime="0:0:0.6"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(StackPanel.Background).Color">
<LinearColorKeyFrame Value="#FF5750" KeyTime="0:0:0.6"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</StackPanel.Triggers>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
Any easy way to make this?
Thankyou very much!

you can use this in the label triggers to start animation in the items control
Example
<ItemsControl Name="TheItemYouWantToChange" />
in the view resources
<!-- Begin the Storyboard -->
<EventTrigger RoutedEvent="Button.Click\MOUSEDOWN" SourceName="YOUR_LABLE\BUTTON_NAME">
<BeginStoryboard Name="MyBeginStoryboard">
<Storyboard >
<DoubleAnimation
Storyboard.TargetName="TheItemYouWantToChange"
Storyboard.TargetProperty="Opacity"
Duration="0:0:5" From="1" To="0" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
you can use animation to change opacity and visibility
for more info you can see : (the example is partly from there) http://msdn.microsoft.com/en-us/library/ms744905(v=vs.110).aspx

StartStoryboard on another control

I have this xaml:
<Window x:Class="StoryboardTest.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">
<Grid>
<Grid.Resources>
<Style TargetType="Button">
<Setter Property="RenderTransformOrigin" Value="0.5 0.5"/>
<Setter Property="RenderTransform">
<Setter.Value>
<RotateTransform x:Name="rt" Angle="0"/>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="Start">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation From="0" To="100" Storyboard.TargetName="pbar" Storyboard.TargetProperty="Value" Duration="0:0:6"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Button Grid.Row="1" Content="1" x:Name="btn1">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard x:Name="bs1">
<Storyboard>
<DoubleAnimation From="0" To="90" Storyboard.TargetProperty="RenderTransform.Angle" Duration="0:0:1" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Button Grid.Row="1" Grid.Column="1" Content="2" x:Name="btn2">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard x:Name="bs2">
<Storyboard>
<DoubleAnimation From="0" To="90" Storyboard.TargetProperty="RenderTransform.Angle" Duration="0:0:1" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Button Grid.Row="1" Grid.Column="2" Content="3" x:Name="btn3">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard x:Name="bs3">
<Storyboard>
<DoubleAnimation From="0" To="90" Storyboard.TargetProperty="RenderTransform.Angle" Duration="0:0:1" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<ProgressBar x:Name="pbar" Maximum="100" Grid.Row="2" Grid.ColumnSpan="3"/>
</Grid>
</Window>
As you can see there are 4 buttons(Start button - the main one, buttons 1, 2 and 3) and a progress bar. When I click buttons 1,2 or 3 they rotate slightly. My question is how can I trigger that rotations(which are described by respective storyboards) in Start's button EventTrigger? Is it possible to achieve this not writing 3 other storyboards in the Start button but invoking already attached storyboards for buttons 1,2,3 in xaml only?

<Window.Resources>
<Storyboard x:Key="StoryboardName">
<DoubleAnimation From="0" To="90" Storyboard.TargetProperty="RenderTransform.Angle" Storyboard.TargetName="btn1" Duration="0:0:1" AutoReverse="True"/>
<DoubleAnimation From="0" To="90" Storyboard.TargetProperty="RenderTransform.Angle" Storyboard.TargetName="btn2" Duration="0:0:1" AutoReverse="True"/>
<DoubleAnimation From="0" To="90" Storyboard.TargetProperty="RenderTransform.Angle" Storyboard.TargetName="btn3" Duration="0:0:1" AutoReverse="True"/>
</Storyboard>
</Window.Resources>
<Button Grid.Column="1" Content="Start">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard Storyboard="{StaticResource StoryboardName}"/>
</EventTrigger>
</Button.Triggers>
</Button>
Doubleanimations declared in storyboard will run simultaneously.
<Button>
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=start, Path=IsPressed}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
...
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>

How to rotate Grid background image in WPF?

I want to rotate Grid background image in WPF. I have animation code for image rotation. But when I implement in grid background, Image not accepted so Imagebrush only accepted.
<Grid.Background>
<ImageBrush ImageSource="../Images/1.jpg" Stretch="UniformToFill" TileMode="Tile"/>
</Grid.Background>
I can't implemented below animation code in WPF.
<Canvas ClipToBounds="True" >
<Image Source="/Images/1.jpg" Width="600" >
<Image.RenderTransform>
<RotateTransform x:Name="TransRotate" />
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard TargetProperty="Angle">
<DoubleAnimation Storyboard.TargetName="TransRotate" Storyboard.TargetProperty="Angle" By="40" Duration="0:0:10" AutoReverse="True" RepeatBehavior="Forever" />
<DoubleAnimation Storyboard.TargetName="TransRotate" Storyboard.TargetProperty="Angle" By="-40" Duration="0:0:15" AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
</Canvas>
EDIT 1-
If I set the images as a content in grid, row 0 only show the image animation.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Canvas ClipToBounds="True" >
<Image Name="logo" Source="/Images/1.jpg" Width="800" >
<Image.RenderTransform>
<RotateTransform x:Name="TransRotate" />
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard TargetProperty="Angle">
<DoubleAnimation Storyboard.TargetName="TransRotate" Storyboard.TargetProperty="Angle" By="40" Duration="0:0:10" AutoReverse="True" RepeatBehavior="Forever" />
<DoubleAnimation Storyboard.TargetName="TransRotate" Storyboard.TargetProperty="Angle" By="-40" Duration="0:0:15" AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
</Canvas>
<Border Grid.Row="0" Height="180" >
<Image Source="Images/01.jpg" Height="100" />
</Border>
<Border Grid.Row="1" Height="180">
<Image Source="Images/01.jpg" Height="100" />
</Border>
<Border Grid.Row="2" Height="180">
<Image Source="Images/01.jpg" Height="100" />
</Border>
</Grid>

You could rotate an ImageBrush like in the example below. You may also want to set the CenterX and CenterY properties of the RotateTransform.
<Grid>
<Grid.Background>
<ImageBrush ImageSource="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg"
Stretch="UniformToFill">
<ImageBrush.Transform>
<RotateTransform/>
</ImageBrush.Transform>
</ImageBrush>
</Grid.Background>
<Grid.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Background.Transform.Angle"
By="40" Duration="0:0:10"
AutoReverse="True" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
</Grid>

As you figured out, Grid.Background can only take a Brush. A solution will be to add the Image as a child to the Grid control:
<Grid>
<Image ... />
... grid child elements ...
<Grid>
You will need to keep the Image element as the first child of the grid so that it will appear as grid background, and take care of possible additional problems (like ZOrder of the child elements, number of Grid row / columns, etc), but you should be able to obtain the effect you want.