We Keep Coding

Use MetroProgressBar control animation in a project without Mahapps.Metro assembly

I am trying to use the existing progress animation MetroProgressBar from MahApps.Metro framework only without the framework as a whole.
Here is what I have tried so far:
Added dictionary MetroProgressBar.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Test_Tmp"
xmlns:System="clr-namespace:System;assembly=mscorlib">
<System:Double x:Key="MahApps.Sizes.ProgressBar.MinHeight">6</System:Double>
<Style x:Key="MahApps.Styles.MetroProgressBar" TargetType="{x:Type local:MetroProgressBar}">
<Setter Property="Background" Value="#1FFFFFFF" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Foreground" Value="red" /> <!-- replace dynamic ressource from mahapps for demo-->
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Maximum" Value="100" />
<Setter Property="MinHeight" Value="{StaticResource MahApps.Sizes.ProgressBar.MinHeight}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:MetroProgressBar}">
<ControlTemplate.Resources>
<Storyboard x:Key="IndeterminateStoryboard" RepeatBehavior="Forever">
<DoubleAnimation x:Name="MainDoubleAnim"
Storyboard.TargetName="EllipseGrid"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
Duration="0:0:3.917" />
<DoubleAnimationUsingKeyFrames x:Name="E1Anim"
Storyboard.TargetName="E1"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1" />
<EasingDoubleKeyFrame KeyTime="0:0:2" />
<SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:3" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames x:Name="E2Anim"
Storyboard.TargetName="E2"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.167" Value="0" />
<SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1.167" />
<EasingDoubleKeyFrame KeyTime="0:0:2.167" />
<SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:3.167" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames x:Name="E3Anim"
Storyboard.TargetName="E3"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.333" Value="0" />
<SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1.333" />
<EasingDoubleKeyFrame KeyTime="0:0:2.333" />
<SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:3.333" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames x:Name="E4Anim"
Storyboard.TargetName="E4"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0" />
<SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1.5" />
<EasingDoubleKeyFrame KeyTime="0:0:2.5" />
<SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:3.5" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames x:Name="E5Anim"
Storyboard.TargetName="E5"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.667" Value="0" />
<SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1.667" />
<EasingDoubleKeyFrame KeyTime="0:0:2.667" />
<SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:3.667" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="B1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0" Value="-50" />
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="100" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="B2" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0" Value="-50" />
<EasingDoubleKeyFrame KeyTime="0:0:0.667" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:2.167" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:3.167" Value="100" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="B3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0" Value="-50" />
<EasingDoubleKeyFrame KeyTime="0:0:0.833" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:2.333" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:3.333" Value="100" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="B4" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0" Value="-50" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:2.5" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:3.5" Value="100" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="B5" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0" Value="-50" />
<EasingDoubleKeyFrame KeyTime="0:0:1.167" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:2.667" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:3.667" Value="100" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetName="EllipseGrid"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
<DoubleAnimation Storyboard.TargetName="DeterminateRoot"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0" />
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="E1" Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame KeyTime="0" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="E2" Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.167" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.167" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:3.167" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:3.167" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="E3" Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.333" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.333" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:3.333" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:3.333" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="E4" Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:3.5" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:3.5" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="E5" Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.667" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.667" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:3.667" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:3.667" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid x:Name="ContainingGrid">
<Grid x:Name="EllipseClip" ClipToBounds="True">
<Grid x:Name="EllipseGrid" Opacity="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RenderTransform>
<TranslateTransform />
</Grid.RenderTransform>
<Border x:Name="B1"
Grid.Column="8"
RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TranslateTransform />
</Border.RenderTransform>
<Ellipse x:Name="E1"
Width="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Height="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Fill="{TemplateBinding Foreground}"
RenderTransformOrigin="0.5,0.5">
<Ellipse.RenderTransform>
<TranslateTransform />
</Ellipse.RenderTransform>
</Ellipse>
</Border>
<Rectangle Grid.Column="7" Width="{Binding EllipseOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
<Border x:Name="B2"
Grid.Column="6"
RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TranslateTransform />
</Border.RenderTransform>
<Ellipse x:Name="E2"
Width="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Height="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Fill="{TemplateBinding Foreground}"
RenderTransformOrigin="0.5,0.5">
<Ellipse.RenderTransform>
<TranslateTransform />
</Ellipse.RenderTransform>
</Ellipse>
</Border>
<Rectangle Grid.Column="5" Width="{Binding EllipseOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
<Border x:Name="B3"
Grid.Column="4"
RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TranslateTransform />
</Border.RenderTransform>
<Ellipse x:Name="E3"
Width="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Height="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Fill="{TemplateBinding Foreground}"
RenderTransformOrigin="0.5,0.5">
<Ellipse.RenderTransform>
<TranslateTransform />
</Ellipse.RenderTransform>
</Ellipse>
</Border>
<Rectangle Grid.Column="3" Width="{Binding EllipseOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
<Border x:Name="B4"
Grid.Column="2"
RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TranslateTransform />
</Border.RenderTransform>
<Ellipse x:Name="E4"
Width="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Height="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Fill="{TemplateBinding Foreground}"
RenderTransformOrigin="0.5,0.5">
<Ellipse.RenderTransform>
<TranslateTransform />
</Ellipse.RenderTransform>
</Ellipse>
</Border>
<Rectangle Grid.Column="1" Width="{Binding EllipseOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
<Border x:Name="B5"
Grid.Column="0"
RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TranslateTransform />
</Border.RenderTransform>
<Ellipse x:Name="E5"
Width="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Height="{Binding EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Fill="{TemplateBinding Foreground}"
RenderTransformOrigin="0.5,0.5">
<Ellipse.RenderTransform>
<TranslateTransform />
</Ellipse.RenderTransform>
</Ellipse>
</Border>
</Grid>
</Grid>
<Grid x:Name="DeterminateRoot"
Margin="{TemplateBinding Padding}"
Opacity="0">
<Border x:Name="PART_Track"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" />
<Rectangle x:Name="PART_Indicator"
HorizontalAlignment="Left"
Fill="{TemplateBinding Foreground}" />
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Determinate" />
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsIndeterminate" Value="False">
<Setter TargetName="DeterminateRoot" Property="Opacity" Value="1" />
</Trigger>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="MinHeight" Value="0" />
<Setter Property="MinWidth" Value="{StaticResource MahApps.Sizes.ProgressBar.MinHeight}" />
<Setter Property="UseLayoutRounding" Value="True" />
<Setter TargetName="ContainingGrid" Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Merging dictionary in App.xaml:
<ResourceDictionary Source="Styles/MetroProgressBar.xaml"/>
Also I have added the class MetroProgressBar.cs, which introduced at this line, following error:
bar.Invoke(resetAction);
Error CS1061 'MetroProgressBar' does not contain a definition for 'Invoke' and no accessible extension method 'Invoke' accepting a first argument of type 'MetroProgressBar' could be found (are you missing a using directive or an assembly reference?)
TestWindow.xaml:
<Window x:Class="Test_Tmp.TestWindow" x:Name="win"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Test_Tmp"
mc:Ignorable="d"
Title="TestWindow" Height="450" Width="800">
<Grid>
<local:MetroProgressBar IsIndeterminate="True" Foreground="Red" VerticalAlignment="Center" HorizontalAlignment="Stretch"/>
</Grid>
</Window>
What do I have to do to correctly implement the required Invoke() method to be able to use MetroProgressBar control?

Unfortunately you need a MetroWindow to show any Dialog shipped with MahApps. That said MahApps is open source, so you can get the code and implement it on your own. Also an integration of MaterialDesign inside a MetroWindow works.

WPF Storyboard with TranslateTransform

I have a Storyboard such as
<Storyboard x:Key="NewsFlow">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"
Storyboard.TargetName="TextBlock"
RepeatBehavior="Forever" AutoReverse="True">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="-80"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="80"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
And Grid
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="100" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Border Grid.Row="1" Background="BlanchedAlmond"></Border>
<TextBlock Grid.Row="1" Text="News" FontSize="40" HorizontalAlignment="Center" ></TextBlock>
</Grid>
Grid.Row="1" is News Viewing zone (yellow line)
But Storyboard ignored Grid.RowDefinitions like picture
I want to like this
If you create a Storyboard should work like this:
<Storyboard x:Key="NewsFlow">
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin"
Storyboard.TargetName="TextBlock"
RepeatBehavior="Forever" AutoReverse="True">
<EasingThicknessKeyFrame KeyTime="0:0:0" Value="0,0,0,150"/>
<EasingThicknessKeyFrame KeyTime="0:0:1" Value="0,0,0,0"/>
<EasingThicknessKeyFrame KeyTime="0:0:2" Value="0, 150,0,0"/>
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
But Margin lagged behind TranslateTransform. And Textblock The other side is broken during the animation is played
Thank you, regards

<Window.Resources>
<Storyboard x:Key="NewsFlow">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Height"
Storyboard.TargetName="News"
RepeatBehavior="Forever" AutoReverse="True">
<EasingDoubleKeyFrame KeyTime="0:0:00" Value="-80"/>
<EasingDoubleKeyFrame KeyTime="0:0:02" Value="80"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="100" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Grid.Row="1" Background="BlanchedAlmond"/>
<TextBlock Grid.Row="1" x:Name="News" Text="News" FontSize="40" HorizontalAlignment="Center">
<TextBlock.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard Storyboard="{StaticResource NewsFlow}"/>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
</Grid>

Animation occurs only first time in wpf

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>

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 invoke Application.MainWindow Property

This property driving me nuts , i have a button in my wpf form,what am trying to achieve here is
When i click button, disable the main window and pop up the message box.
this the code behind
private void button1_Click(object sender, System.Windows.RoutedEventArgs e)
{
if (sender is Button)
{
Application.Current.Dispatcher.Invoke(new Action(() =>
{
Application.Current.MainWindow.IsEnabled = false;
MessageBox.Show(Application.Current.MainWindow, "test");
}));
}
}
Initialize my main window
protected override void InitializeShell()
{
base.InitializeShell();
Application.Current.MainWindow = (Shell)this.Shell;
Application.Current.MainWindow.Show();
}
It throws exception "'[Unknown]' property does not point to a DependencyObject in path '(0).(1)[1].(2)'."at "Application.Current.MainWindow.IsEnabled = false;" .
Here is the stack trace of few lines
at System.Windows.Media.Animation.Storyboard.VerifyPathIsAnimatable(PropertyPath path)
at System.Windows.Media.Animation.Storyboard.ClockTreeWalkRecursive(Clock currentClock, DependencyObject containingObject, INameScope nameScope, DependencyObject parentObject, String parentObjectName, PropertyPath parentPropertyPath, HandoffBehavior handoffBehavior, HybridDictionary clockMappings, Int64 layer)
If i bypass then it display message box but am wondering why it throw exception at isEnable=false ?
Any help much appreciated.
Thanks in Advance
My shell.xaml
<Window x:Class="Webster.Client.Shell"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:c="clr-namespace:Webster.Client"
xmlns:cal="http://www.codeplex.com/CompositeWPF"
xmlns:Controls="clr-namespace:Webster.Client.Controls"
xmlns:inf="clr-namespace:Webster.Client.Infrastructure;assembly=Webster.Client.Infrastructure"
Title="Webster - News Segmentation and Encoding" WindowStartupLocation="CenterScreen" WindowState="Normal"
Icon="/Webster.Client;component/Resources/film_clip64.png" SizeToContent="Manual" HorizontalAlignment="Center"
MinWidth="390" Loaded="Window_Loaded">
<!-- window -->
<Window.Background>
<ImageBrush ImageSource="Resources/background.png" Stretch="Fill"/>
</Window.Background>
<Window.Resources>
<DataTemplate DataType="{x:Type inf:ExtendedHeader}">
<StackPanel Orientation="Horizontal" ToolTip="{Binding Path=ToolTip}">
<Image Source="{Binding Path=IconUri}" Width="16" Height="16" />
<TextBlock Text="{Binding Path=Title}" />
</StackPanel>
</DataTemplate>
<Storyboard x:Key="InTransition">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Logo" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:02.5000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ContentGrid" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ContentGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="-72"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="-157"/>
<SplineDoubleKeyFrame KeySpline="0.5,0,0.5,1" KeyTime="00:00:01.5000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Logo" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="-50"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="-101"/>
<SplineDoubleKeyFrame KeySpline="0,0,0,1" KeyTime="00:00:02.5000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MainToolbar" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MainToolbar" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="100"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="100"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="0" KeySpline="0,0.495999991893768,0.504000008106232,1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource InTransition}"/>
</EventTrigger>
</Window.Triggers>
<!-- content grid -->
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Top" >
<Grid RenderTransformOrigin="0.5,0.5" Margin="0,0,0,0" Grid.RowSpan="2">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="*" />
<RowDefinition Height="25"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30*" />
<ColumnDefinition Width="627*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!-- logo -->
<Canvas x:Name="Logo" Grid.ColumnSpan="3" RenderTransformOrigin="0.5,0.5">
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Canvas.RenderTransform>
<TextBlock
Text=""
TextAlignment="Center"
TextWrapping="NoWrap"
Foreground="#FFC4CFD6"
FontSize="50"
Opacity="0.85"
Canvas.Left="9"
Canvas.Top="6"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Height="60"
Width="{Binding ElementName=Logo,Path=ActualWidth}"
FontWeight="Bold" />
</Canvas>
<!-- main bar -->
<ItemsControl x:Name="MainToolbar" cal:RegionManager.RegionName="{x:Static inf:RegionNames.MainToolBarRegion}" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,0,0" Grid.Row="1" RenderTransformOrigin="0.5,0.5" Grid.Column="1">
<ItemsControl.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ItemsControl.RenderTransform>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Margin="10, 0, 10, 10">
</StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<!-- content -->
<Grid x:Name="ContentGrid" Grid.Row="1" RenderTransformOrigin="0.5,0.5" Grid.ColumnSpan="2">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<Controls:AnimatedTabControlWebster
x:Name="StoryTab"
SelectedIndex="0"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
ItemContainerStyle="{StaticResource ShellTabItemStyle}"
Background="{StaticResource headerBarBG}"
cal:RegionManager.RegionName="{x:Static inf:RegionNames.MainRegion}"
AutomationProperties.AutomationId="PositionSummaryTab" IsEnabled="True">
</Controls:AnimatedTabControlWebster>
</Grid>
<!-- footer -->
<StackPanel
Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="3"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Orientation="Horizontal"
FlowDirection="RightToLeft"
Margin="0 0 10 0"
>
<Button Name="btnExit" Click="btnExit_Click">Exit</Button>
</StackPanel>
<StackPanel
Grid.Row="3"
Grid.Column="0"
Grid.ColumnSpan="3"
VerticalAlignment="Stretch"
HorizontalAlignment="Center"
Orientation="Horizontal"
>
<ItemsControl
cal:RegionManager.RegionName="{x:Static inf:RegionNames.MainFooterRegion}"
/>
</StackPanel>
</Grid>
</Grid>