Develop Reference

How to put width value as percentage in storyboard animation in WPF

I want to make a drawer using storyboard.
There are 2 child grids in the base grid.
One is a 'MenuGrid', the other is a 'ContentGrid'.
So I wrote a storyboard like this(This is a storyboard that adjusts the width of the 'MenuGrid'.):
<Window.Resources>
<Storyboard x:Key="MenuOpen">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width"
Storyboard.TargetName="MenuGrid">
<EasingDoubleKeyFrame KeyTime="0" Value="60"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="300"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="MenuClose" >
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width"
Storyboard.TargetName="MenuGrid">
<EasingDoubleKeyFrame KeyTime="0" Value="300"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="60"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonOpenMenu">
<BeginStoryboard Storyboard="{StaticResource MenuOpen}"/>
</EventTrigger>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonCloseMenu">
<BeginStoryboard Storyboard="{StaticResource MenuClose}"/>
</EventTrigger>
</Window.Triggers>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Width="300" x:Name="MenuGrid" Grid.Column="0">
<StackPanel>
<Button x:Name="ButtonCloseMenu" Width="60" Height="60" VerticalAlignment="Top" HorizontalAlignment="Right">
</Button>
<Button x:Name="ButtonOpenMenu" Width="60" Height="60" VerticalAlignment="Top" HorizontalAlignment="left" >
</Button>
</StackPanel>
</Grid>
<Grid x:Name="ContentGrid" Grid.Column="1">
</Grid>
</Grid>
Every time I press a certain button it works very well.
However, when the Width of the MenuGrid decreases, I want the Width of the ContentGrid to increase as well.
In EasingDoubleKeyFrame KeyTime="0" Value="300", is there a way to express 'Value' as a percentage or ratio rather than an int value?

start wpf animation from other element

how can I start this animation not at Window.Loaded event? I want to fire it at the click method of this button in the xaml.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button x:Name="myButton" Grid.Column="1" Height="25" Width="100">Start</Button>
<Canvas Name="Can1">
<Rectangle Name="Rect1" Canvas.Left="10" Fill="LightSeaGreen"
Stroke="Bisque"
StrokeThickness="5"
Width="100" Height="100">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="Rect1"
Storyboard.TargetProperty="(Canvas.Left)"
From="10" To="100"
Duration="0:0:2"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas>
</Grid>

Move the Storyboard to the Button's Triggers, in an EventTrigger on the Button.Click event:
<Button x:Name="myButton" Grid.Column="1" Height="25" Width="100" Content="Start">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Rect1"
Storyboard.TargetProperty="(Canvas.Left)"
To="100" Duration="0:0:2"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Canvas x:Name="Can1">
<Rectangle x:Name="Rect1" Canvas.Left="10" Width="100" Height="100"
Fill="LightSeaGreen" Stroke="Bisque" StrokeThickness="5"/>
</Canvas>

WPF Popup follow mouse in DataTemplate

I'm fighting with making popup follow mouse within DataTemplate
I have following DataTemplate:
<DataTemplate>
<StackPanel x:Name="MyPanel">
<Popup x:Name="MyPopup" Visibility="Visible" AllowsTransparency="True" Placement="MousePoint">
something here
</Popup>
<controls1:ImageLoader x:Name="MyImage" Margin="10,10,0,0" Source="{Binding ImageUri}" Width="100" Height="100">
</controls1:ImageLoader>
</StackPanel>
<DataTemplate.Triggers>
<EventTrigger RoutedEvent="MyImage.MouseEnter" >
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames
Storyboard.TargetName="MyPopup"
Storyboard.TargetProperty="IsOpen"
Duration="0:0:0.5">
<DiscreteBooleanKeyFrame Value="True" KeyTime="100%"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MyPanel.MouseLeave" >
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames
Storyboard.TargetName="MyPopup"
Storyboard.TargetProperty="IsOpen"
Duration="0:0:0.01">
<DiscreteBooleanKeyFrame Value="False" KeyTime="100%"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</DataTemplate.Triggers>
</DataTemplate>
Right now popup is working : I mean it shows after 500ms and hides (almost correctly)
I'm trying to make a popup follows my mouse pointer while moving around MyImage control.
How to do it?

Windows Phone - Grid Slide Animation

I'm trying to do slide animation for whole grid, but having an exception: "Cannot resolve TargetName translateTransform." What's wrong?
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RenderTransform>
<TranslateTransform x:Name="translateTransform" X="500" />
</Grid.RenderTransform>
<Grid.Resources>
<Storyboard x:Name="StoryBoard1">
<DoubleAnimation Storyboard.TargetName="ContentPanel"
Storyboard.TargetProperty="Opacity"
From="0" To="1" Duration="0:0:1"
/>
<DoubleAnimation Storyboard.TargetName="translateTransform"
Storyboard.TargetProperty="X"
From="500" To="200" Duration="0:0:1"/>
</Storyboard>
</Grid.Resources>
<TextBlock x:Name="Txt2" Text="foo">
</TextBlock>

You are missing x:Key from the Storyboard resource, all the resources needs to have x:Key. My VS2013 says that.
<Grid x:Name="ContentPanel"
Background="Purple"
Grid.Row="1" Margin="12,0,12,0">
<Grid.RenderTransform>
<TranslateTransform x:Name="translateTransform" X="500" />
</Grid.RenderTransform>
<Grid.Resources>
<Storyboard x:Key="hey" x:Name="StoryBoard1">
<DoubleAnimation Storyboard.TargetName="ContentPanel"
Storyboard.TargetProperty="Opacity"
From="0" To="1" Duration="0:0:10"
/>
<DoubleAnimation Storyboard.TargetName="translateTransform"
Storyboard.TargetProperty="X"
From="500" To="0" Duration="0:0:10"/>
</Storyboard>
</Grid.Resources>
<TextBlock x:Name="Txt2" Text="foo">
</TextBlock>
</Grid>

Animated Expander - Animates in only one direction

Can anyone tell me what might be wrong with this template. the expander only animates when expanding, not collapsing.
<ControlTemplate x:Key="ExpanderExTemplate" TargetType="{x:Type Expander}" >
<StackPanel Margin="0">
<Border BorderThickness="1" >
<Expander Name="expanderEx" Header="{TemplateBinding Header}" IsExpanded="{TemplateBinding IsExpanded}" BorderThickness="0">
<Border BorderThickness="0" >
<ContentPresenter x:Name="ExpandSite" Margin="5,5,5,5" >
<ContentPresenter.LayoutTransform>
<ScaleTransform x:Name="scaleTransform" ScaleX="1" ScaleY="1" />
</ContentPresenter.LayoutTransform>
</ContentPresenter>
</Border>
<Expander.Triggers>
<EventTrigger RoutedEvent="Expander.Expanded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard >
<DoubleAnimation From="0" To="1" Duration="0:0:0.25"
Storyboard.TargetName="ExpandSite"
Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleY)" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Expander.Collapsed">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="1" To="0" Duration="0:0:0.25"
Storyboard.TargetName="ExpandSite"
Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleY)" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Expander.Triggers>
</Expander>
</Border>
</StackPanel>
</ControlTemplate>