We Keep Coding

Disable Storyboard or Animation in WPF

I created a simple notification window with animation and some message. But, can I disable animation or storyboard on eg. MouseEnter event, like a Facebook notification. Gradually reduced the opacity, and when I drag the Mouse on the window, then set opacity to 100%. How to do?
Here is a xaml code:
WindowStyle="None" AllowsTransparency="True" Background="Transparent" >
<Grid x:Name="gridData" RenderTransformOrigin="0,1" MouseRightButtonDown="Window_MouseRightButtonDown" MouseEnter="Grid_MouseEnter">
<Border BorderThickness="1" Background="SkyBlue" BorderBrush="Black" CornerRadius="10">
<StackPanel Margin="20">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="32"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="txtTitle" Grid.Row="0" Grid.Column="0" Text="" FontWeight="Bold" VerticalAlignment="Center"/>
<Image x:Name="image" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Left" Visibility="Collapsed"/>
<TextBlock x:Name="txtMessage" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Text="" TextWrapping="Wrap"/>
</Grid>
</StackPanel>
</Border>
<Grid.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded" >
<BeginStoryboard >
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
<SplineDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
<Grid.RenderTransform>
<ScaleTransform ScaleY="1" />
</Grid.RenderTransform>
</Grid>

Add a name to your BeginStoryboard:
<BeginStoryboard Name="ScaleAndFadeOut">
then add another event trigger for a different event, and use a StopStoryboard element:
<Grid.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
...
</EventTrigger>
<EventTrigger RoutedEvent="FrameworkElement.MouseMove">
<StopStoryboard BeginStoryboardName="ScaleAndFadeOut" />
</EventTrigger>
</Grid.Triggers>
MSDN: "How to: Use Event Triggers to Control a Storyboard After It Starts"

Animate control based on other control

I am creating a media player application and I am trying to animate hiding the controls when the mouse is not inside the program window.
I have a animation setup and working, but I can't think of how to set the EventTrigger to the parent grid rather than the grid I actually want to animate. Essentially I want to set the EventTrigger to be grdMain and animate the height of grdControls.
Animation:
<Window.Resources>
<Style x:Key="FadeInOut" TargetType="Grid">
<Style.Triggers>
<EventTrigger RoutedEvent="Control.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:1" To="40" Storyboard.TargetProperty="Height"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Control.MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:1" To="0" Storyboard.TargetProperty="Height"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
Grids:
<Grid x:Name="grdMain" Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<MediaElement x:Name="meVideo" IsMuted="True" Stretch="Uniform" MediaOpened="meVideo_MediaOpened" MediaEnded="meVideo_MediaEnded" Grid.RowSpan="2" />
<Grid Grid.Row="1" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ProgressBar x:Name="pgbVideoTimeline" HorizontalAlignment="Stretch" Height="7" Background="#252525" Foreground="Maroon" BorderThickness="0" Grid.Row="1" MouseDown="pgbVideoTimeline_MouseDown" MouseMove="pgbVideoTimeline_MouseMove" MouseUp="pgbVideoTimeline_MouseUp" />
<Grid x:Name="grdControls" Grid.Row="2" Background="#0C0D0D" Height="0" Style="{StaticResource FadeInOut}" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel x:Name="stpPlaybackControls" Orientation="Horizontal" HorizontalAlignment="Left" Grid.Column="0">
<Image x:Name="btnPlayPause" Height="30" Margin="10,0,5,0" ToolTip="Play" Source="Resources/Images/UI/Play.png" MouseEnter="btnVideoControl_MouseEnter" MouseLeave="btnVideoControl_MouseLeave" MouseUp="btnPlayPause_MouseUp" />
<Image x:Name="btnReplay" Height="20" Margin="5,0,5,0" ToolTip="Replay" Source="Resources/Images/UI/Replay.png" MouseEnter="btnVideoControl_MouseEnter" MouseLeave="btnVideoControl_MouseLeave" MouseUp="btnReplay_MouseUp" />
</StackPanel>
<StackPanel x:Name="stpMiscControls" Orientation="Horizontal" HorizontalAlignment="Right" Grid.Column="1">
<Image x:Name="btnFullScreen" Height="25" Margin="5" ToolTip="Fullscreen" Source="Resources/Images/UI/FullScreen.png" MouseEnter="btnVideoControl_MouseEnter" MouseLeave="btnVideoControl_MouseLeave" MouseUp="btnFullScreen_MouseUp" />
<Image x:Name="btnSettings" Height="30" Margin="5,5,10,5" ToolTip="Settings" Source="Resources/Images/UI/Settings.png" MouseEnter="btnVideoControl_MouseEnter" MouseLeave="btnVideoControl_MouseLeave" />
</StackPanel>
</Grid>
</Grid>
</Grid>

The rule when using Trigger (in case TargetName can't be used) is the Trigger should belong to the element which has the properties you want to modify. In this case the Trigger should belong to the grdControls. However you can use DataTrigger to walk up the tree and listen to some other property change of any visual upwards in the tree. The following code should work:
<Style x:Key="FadeInOut" TargetType="Grid">
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=grdMain}"
Value="true">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:1" To="40"
Storyboard.TargetProperty="Height"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:1" To="0"
Storyboard.TargetProperty="Height"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
The second approach close to what Peter Dunno suggested in his comment requires you to have to set the EventTrigger directly in the Triggers property of the main Grid. You can either set the Storyboards directly or define them as Resource. Here is the code for that approach:
<Grid x:Name="grdMain" Background="Black">
<Grid.Triggers>
<EventTrigger RoutedEvent="Control.MouseEnter">
<BeginStoryboard>
<Storyboard TargetName="grdControls">
<DoubleAnimation Duration="0:0:1" To="40"
Storyboard.TargetProperty="Height"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Control.MouseLeave">
<BeginStoryboard>
<Storyboard TargetName="grdControls">
<DoubleAnimation Duration="0:0:1" To="0"
Storyboard.TargetProperty="Height"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
<!-- remaining code -->
</Grid>
Note that the Style you define now is no longer needed.

how to apply storyboard animation to multiple xaml element

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>

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.

How do I switch windows without actually opening a new one?

I created an animation in xaml, and I'd like the second part to be played in a new window. I certainly could open a new one after the login animation completes and play it, but I was wondering if I could stay in the same window, but use a different xaml file.
<Window x:Class="TestWpfAnimation1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="600" Width="1000"
WindowStartupLocation="CenterScreen">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.Row="1"
Grid.ColumnSpan="2"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<StackPanel x:Name="StackPanelName"
Orientation="Horizontal"
HorizontalAlignment="Left"
VerticalAlignment="Center">
<StackPanel.RenderTransform>
<TranslateTransform X="0" />
</StackPanel.RenderTransform>
<Label Content="_Name:"
Target="{Binding ElementName=TextBoxName}" />
<TextBox Height="19"
Width="110"
Margin="18.55,0,0,0" />
</StackPanel>
<StackPanel x:Name="StackPanelPassword"
Orientation="Horizontal"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<StackPanel.RenderTransform>
<TranslateTransform />
</StackPanel.RenderTransform>
<Label Content="_Password:" />
<PasswordBox Height="19"
Width="110" />
</StackPanel>
<Button
Content="Log in"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
Width="60"
IsDefault="True"
Margin="0,13,0,0"
Grid.Row="1"
Grid.ColumnSpan="2">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="StackPanelName"
Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0:0:0.5"
Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:1.5"
Value="-381" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="StackPanelName"
Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame KeyTime="0:0:0.5"
Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:1.5"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="StackPanelPassword"
Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0:0:0.5"
Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:1.5"
Value="381" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="StackPanelPassword"
Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame KeyTime="0:0:0.5"
Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:1.5"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ImageProfilePicture"
Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame KeyTime="0:0:1.5"
Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:2"
Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="StackPanelNameTitle"
Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame KeyTime="0:0:2"
Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:3"
Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Left"
VerticalAlignment="Top">
<Rectangle x:Name="ImageProfilePicture"
Fill="Black"
Height="50"
Width="50"
HorizontalAlignment="Left"
Margin="10,10,0,0"
Opacity="0"/>
<StackPanel x:Name="StackPanelNameTitle"
VerticalAlignment="Center"
Opacity="0">
<TextBlock Text="First Last name"
Margin="8,0,0,0"
FontSize="13"
FontWeight="SemiBold"/>
<TextBlock Text="Student"
HorizontalAlignment="Center"/>
</StackPanel>
</StackPanel>
</Grid>