using WPF made by Blend to interop with winforms(vb,net)? - wpf

I created an animation with a logo in Blend 4 and I want it to be in my WinfForms like a user control how do I Incorporate the WPF with WinForms(vb.net) so that it would be like a user-control that gets triggered when ever I want it to?
so far i tried adding it as a new item but it doesn't work!
links are greatly appreciated
This is the xaml for the wpf
<Window
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" mc:Ignorable="d"
x:Class="MainWindow"
x:Name="Window"
Title="MainWindow"
Width="300" Height="150">
<Window.Resources>
<Storyboard x:Key="OnLoaded1"/>
<Storyboard x:Key="OnLoaded2">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0" Value="-42"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="38"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="118"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="198"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse_Copy">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-42"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="38"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="118"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="198"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse_Copy">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse_Copy1">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="-42"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="38"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="118"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.9" Value="198"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse_Copy1">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.9" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="Window">
<BeginStoryboard x:Name="OnLoaded2_BeginStoryboard1" Storyboard="{StaticResource OnLoaded2}"/>
</EventTrigger>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard x:Name="OnLoaded2_BeginStoryboard" Storyboard="{StaticResource OnLoaded2}"/>
</EventTrigger>
</Window.Triggers>
<Grid x:Name="LayoutRoot" Background="#FF00A7FF">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0" Value="-42"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="38"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="118"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="198"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse_Copy">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-42"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="38"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="118"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="198"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse_Copy">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse_Copy1">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="-42"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="38"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="118"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.9" Value="198"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse_Copy1">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.9" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
</Grid.ColumnDefinitions>
<Grid x:Name="grid" Margin="10.333,32.333,-4.333,-26.333">
<Ellipse x:Name="ellipse" HorizontalAlignment="Left" Margin="-7.337,32.805,0,0" StrokeThickness="0" Width="15" RenderTransformOrigin="0.5,0.5" Height="15" VerticalAlignment="Top">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
<SkewTransform/>
<RotateTransform Angle="79"/>
<TranslateTransform X="-42"/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="ellipse_Copy" HorizontalAlignment="Left" Margin="-7.337,32.805,0,0" StrokeThickness="0" Width="15" RenderTransformOrigin="0.5,0.5" Height="15" VerticalAlignment="Top">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
<SkewTransform/>
<RotateTransform Angle="79"/>
<TranslateTransform X="-42"/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="ellipse_Copy1" HorizontalAlignment="Left" Margin="-7.337,32.805,0,0" StrokeThickness="0" Width="15" RenderTransformOrigin="0.5,0.5" Height="15" VerticalAlignment="Top">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
<SkewTransform/>
<RotateTransform Angle="79"/>
<TranslateTransform X="-42"/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<TextBlock Margin="7.833,0,0,0" TextWrapping="Wrap" FontSize="26.667" Foreground="White" FontWeight="Bold"><Run FontFamily="Segoe UI Semibold" Text="Kirusoft"/><Run Text=" "/><Run FontFamily="Segoe UI Light" Text="Dev."/></TextBlock>
</Grid>
</Grid>


You are not able to embed another Wpf Window into a Wpf Window, you will need to create an UserControl.
What I have done it the past when I have a Window that I want to convert to a UserControl is to change all references to Windowin the Xaml to UserControl. In your case it would look something like this.
<UserControl
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" mc:Ignorable="d"
x:Class="WpfApplication2.UserControl1"
x:Name="Logo"
Width="300" Height="150">
<UserControl.Resources>
<Storyboard x:Key="OnLoaded1"/>
<Storyboard x:Key="OnLoaded2">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0" Value="-42"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="38"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="118"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="198"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse_Copy">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-42"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="38"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="118"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="198"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse_Copy">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse_Copy1">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="-42"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="38"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="118"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.9" Value="198"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse_Copy1">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.9" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter" >
<BeginStoryboard x:Name="OnLoaded2_BeginStoryboard1" Storyboard="{StaticResource OnLoaded2}"/>
</EventTrigger>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard x:Name="OnLoaded2_BeginStoryboard" Storyboard="{StaticResource OnLoaded2}"/>
</EventTrigger>
</UserControl.Triggers>
<Grid x:Name="LayoutRoot" Background="#FF00A7FF">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0" Value="-42"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="38"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="118"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="198"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse_Copy">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-42"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="38"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="118"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="198"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse_Copy">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse_Copy1">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="-42"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="38"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="118"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.9" Value="198"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse_Copy1">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.9" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
</Grid.ColumnDefinitions>
<Grid x:Name="grid" Margin="10.333,32.333,-4.333,-26.333">
<Ellipse x:Name="ellipse" HorizontalAlignment="Left" Margin="-7.337,32.805,0,0" StrokeThickness="0" Width="15" RenderTransformOrigin="0.5,0.5" Height="15" VerticalAlignment="Top">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
<SkewTransform/>
<RotateTransform Angle="79"/>
<TranslateTransform X="-42"/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="ellipse_Copy" HorizontalAlignment="Left" Margin="-7.337,32.805,0,0" StrokeThickness="0" Width="15" RenderTransformOrigin="0.5,0.5" Height="15" VerticalAlignment="Top">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
<SkewTransform/>
<RotateTransform Angle="79"/>
<TranslateTransform X="-42"/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="ellipse_Copy1" HorizontalAlignment="Left" Margin="-7.337,32.805,0,0" StrokeThickness="0" Width="15" RenderTransformOrigin="0.5,0.5" Height="15" VerticalAlignment="Top">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
<SkewTransform/>
<RotateTransform Angle="79"/>
<TranslateTransform X="-42"/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<TextBlock Margin="7.833,0,0,0" TextWrapping="Wrap" FontSize="26.667" Foreground="White" FontWeight="Bold"><Run FontFamily="Segoe UI Semibold" Text="Kirusoft"/><Run Text=" "/><Run FontFamily="Segoe UI Light" Text="Dev."/></TextBlock>
</Grid>
</Grid>
</UserControl>

Related

Dynamic double animation end - XAML

I have a progress bar that I have styled to look like the indeterminate windows ui progress bar, with the 5 ellipses going from side to side,
the animation is based inside of a canvas, the problem is my application is resolution and size independent, thus the canvas's width property is dynamic, I want to make the animation's end property (Canvas.Left) to dynamically change to the width of the canvas minus the with of the ellipse. I have tried to bind it somehow (I am still a beginner at binding) so I always get a runtime error...
Can someone please help?
Canvas:
<Canvas Name="canvas" Height="9" HorizontalAlignment="Stretch" VerticalAlignment="Center" Width="{TemplateBinding Width}">
<Ellipse Name="ellipse" Style="{DynamicResource ProgressBarEllipse}" Width="9" Fill="{TemplateBinding Foreground}" Canvas.Left="0" Canvas.Top="0" />
<Ellipse Name="ellipse1" Style="{DynamicResource ProgressBarEllipse}" Width="9" Fill="{TemplateBinding Foreground}" Canvas.Left="0" Canvas.Top="0" />
<Ellipse Name="ellipse2" Style="{DynamicResource ProgressBarEllipse}" Width="9" Fill="{TemplateBinding Foreground}" Canvas.Left="0" Canvas.Top="0" />
<Ellipse Name="ellipse3" Style="{DynamicResource ProgressBarEllipse}" Width="9" Fill="{TemplateBinding Foreground}" Canvas.Left="0" Canvas.Top="0" />
<Ellipse Name="ellipse4" Style="{DynamicResource ProgressBarEllipse}" Width="9" Fill="{TemplateBinding Foreground}" Canvas.Left="0" Canvas.Top="0" />
</Canvas>
And The Story Board:
<Storyboard RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="ellipse">
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="1260" KeySpline="0,1,1,0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="ellipse1">
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="1260" KeySpline="0,0.8,1,0.2" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="ellipse2">
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="1260" KeySpline="0,0.6,1,0.4" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="ellipse3">
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="1260" KeySpline="0,0.4,1,0.6" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="ellipse4">
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="1260" KeySpline="0,0.2,1,0.8" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0" Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.5" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ellipse1">
<EasingDoubleKeyFrame KeyTime="0" Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.5" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ellipse3">
<EasingDoubleKeyFrame KeyTime="0" Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.5" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ellipse2">
<EasingDoubleKeyFrame KeyTime="0" Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.5" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ellipse4">
<EasingDoubleKeyFrame KeyTime="0" Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.5" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
I want to change the storyboard values that are 1260 to the value of the canvas width minus the width of the ellipse

What are the values of Transition property of TransitioningContentControl from Silverlight Toolkit?

What are the possible values that can take the Transition property of TransitioningContentControl from the Silverlight Toolkit?
That property is string type. I not found any answer, even in the silverlight toolkit official site.

Your options are:
DefaultTransition
Normal
UpTransition
DownTransition
How I found out:
What my VisualStudio ObjectBrowser-Window told me about the TransitioningContentControl:
public string Transition { set; get; }
Member of System.Windows.Controls.TransitioningContentControl
Summary: Gets or sets the name of the transition to use. These
correspond directly to the VisualStates inside the PresentationStates
group.
and
public const string DefaultTransitionState
Member of System.Windows.Controls.TransitioningContentControl
Summary: The name of the state that represents the default transition.
and what opening the default template in Blend told me about the PresentationStates group ... wait a moment... loading blend... keeps crashing... I hate Blend ...now I got it:
<Style x:Key="TransitioningContentControlDefaultStyle" TargetType="TransitioningContentControl">
<Setter Property="IsTabStop" Value="True"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Transition" Value="DefaultTransition"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TransitioningContentControl">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="2">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="PresentationStates">
<VisualState x:Name="DefaultTransition">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="CurrentContentPresentationSite">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PreviousContentPresentationSite">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PreviousContentPresentationSite">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="UpTransition">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="CurrentContentPresentationSite">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="CurrentContentPresentationSite">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="30"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PreviousContentPresentationSite">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="PreviousContentPresentationSite">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="-30"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="DownTransition">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="CurrentContentPresentationSite">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="CurrentContentPresentationSite">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="-40"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PreviousContentPresentationSite">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="PreviousContentPresentationSite">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="40"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<ContentPresenter x:Name="PreviousContentPresentationSite" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{x:Null}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<ContentPresenter.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ContentPresenter.RenderTransform>
</ContentPresenter>
<ContentPresenter x:Name="CurrentContentPresentationSite" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{x:Null}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<ContentPresenter.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

WPF storyboards non interactive error when correct .Begin(this,true) used

I am new to WPF. I come from a C# and ASP.NET background.
I am attempting to create a very basic WPF application with 2 storyboards that are started programmatically through the interactive Begin overload .Begin(this,true).
When the OnCompleted event is raised the status of the other storyboard is checked. If the status is that the storyboard is not running it should begin the storyboard.
I receive the following error inthe Completed handler:
Throws: Cannot perform action because the specified Storyboard was not applied to this object for interactive control.
I believe I used the correct .Begin(this,true) overload for interactive control.
I've included the MainWindow.cs and MainWindow.xaml code below. I am purposely not starting the animations through a Trigger in Xaml. I need to start the animations dynamically and check states of other multiple animations. Example stripped down to focus on main issue.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
namespace StoryboardExample
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public Storyboard Storyboard1 { get; set; }
public Storyboard Storyboard2 { get; set; }
public MainWindow()
{
InitializeComponent();
Storyboard1 = (System.Windows.Media.Animation.Storyboard)FindResource("Storyboard1");
Storyboard1.Name = "MegatronStoryboard";
Storyboard1.Completed +=new EventHandler(Storyboard1_Completed);
Storyboard2 = (System.Windows.Media.Animation.Storyboard)FindResource("Storyboard2");
Storyboard2.Name = "TransformerStoryboard";
Storyboard2.Completed += new EventHandler(Storyboard2_Completed);
Storyboard2.Begin(this, true);
}
void Storyboard1_Completed(object sender, EventArgs e)
{
if (Storyboard2.GetCurrentState() == ClockState.Stopped)
{
Storyboard2.Begin(this, true);
//Throws: Cannot perform action because the specified Storyboard was not applied to this object for interactive control.
//I thought I was calling the Begin overload with the correct params for interactive control
//I thought I was calling the Begin overload with the correct params for interactive control .Begin(this,true)
}
}
void Storyboard2_Completed(object sender, EventArgs e)
{
if (Storyboard1.GetCurrentState() == ClockState.Stopped)
{
Storyboard1.Begin(this, true);
//Throws: Cannot perform action because the specified Storyboard was not applied to this object for interactive control.
//I thought I was calling the Begin overload with the correct params for interactive control .Begin(this,true)
}
}
}
}
<Window x:Name="MainWindow1" x:Class="StoryboardExample.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">
<Window.Resources>
<Storyboard x:Key="Storyboard1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="cnvsStoryboard1">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="cnvsStoryboard1">
<EasingDoubleKeyFrame KeyTime="0" Value="0.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="0.2"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="cnvsStoryboard1">
<EasingDoubleKeyFrame KeyTime="0" Value="0.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="0.2"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="cnvsStoryboard1">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="26"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="26"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="18"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="cnvsStoryboard1">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="353"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="353"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="5"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Storyboard2">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="cnvsStoryboard2">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="cnvsStoryboard2">
<EasingDoubleKeyFrame KeyTime="0" Value="0.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:4" Value="0.2"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="cnvsStoryboard2">
<EasingDoubleKeyFrame KeyTime="0" Value="0.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:4" Value="0.2"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="cnvsStoryboard2">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-230"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="-230"/>
<EasingDoubleKeyFrame KeyTime="0:0:4" Value="137"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="cnvsStoryboard2">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-10"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="-10"/>
<EasingDoubleKeyFrame KeyTime="0:0:4" Value="-13"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Canvas x:Name="LayoutRoot">
<Canvas x:Name="cnvsStoryboard1"
Height="203" Canvas.Left="223"
Canvas.Top="-284" Width="253"
Opacity="0"
RenderTransformOrigin="0.5,0.5">
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.2" ScaleY="0.2"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Canvas.RenderTransform>
<Image x:Name="imgTransformer" Height="148"
Canvas.Left="42" Source="Images/transformer.png"
Stretch="Fill" Canvas.Top="8" Width="176"
RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform X="1" Y="1"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<Label x:Name="lblTank" Content="Tank" Canvas.Left="101" Canvas.Top="160" FontSize="21.333">
<Label.Foreground>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black"/>
<GradientStop Color="#FFCA2828" Offset="1"/>
<GradientStop Color="#FE412424" Offset="0.003"/>
</LinearGradientBrush>
</Label.Foreground>
</Label>
</Canvas>
<Canvas x:Name="cnvsStoryboard2" Height="318"
Canvas.Left="41" Canvas.Top="229"
Width="215" Opacity="0"
RenderTransformOrigin="0.5,0.5">
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.2" ScaleY="0.2"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Canvas.RenderTransform>
<Image x:Name="imgMegatron" Height="264" Canvas.Left="33"
Source="Images/Megatron.png"
Stretch="Fill" Canvas.Top="8"
Width="153"/>
<Label x:Name="lblMegatron"
Content="Megatron"
Canvas.Left="56"
Canvas.Top="278"
FontSize="21.333"
Width="107.707"
RenderTransformOrigin="0.696,0.599" Height="40">
<Label.Foreground>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black"/>
<GradientStop Color="#FFCA2828" Offset="1"/>
<GradientStop Color="#FE412424" Offset="0.003"/>
</LinearGradientBrush>
</Label.Foreground>
</Label>
</Canvas>
</Canvas>
</Window>
I've been looking into this and I think that my first parameter in the storyboard.Begin(this,true) overload may be incorrect?
Any help is greatly appreciated.
-Aaron

Does it work if you use .GetCurrentState(this)? Alternately, perhaps call .Stop(this); immediately prior to calling .Start(this, true)?

Also, Make sure the Storyboard is controllable. From MSDN: "To make a storyboard controllable in code, you must use the appropriate overload of the storyboard's Begin method and specify true to make it controllable."
More info: http://msdn.microsoft.com/en-us/library/cc672521.aspx

Animated UserControl : StoryBoard not starting?

I'm trying to create an animation in one of my apps.
The animation is a Control that has a StoryBoard defined in its Resources and starts this StoryBoard after it's been loaded. Here's the (somewhat stripped) XAML:
<UserControl x:Class="LernInsel.Resources.Assets.Water" x:Name="UserControl">
<UserControl.Resources>
<Storyboard x:Key="BaseAnimation" x:Name="BaseAnimation" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveLeft">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="0.45"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveRight">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="0.45"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveLeft_Copy">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.39"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveRight_Copy">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.39"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveLeft_Copy1">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.41"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveRight_Copy1">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.41"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveLeft_Copy2">
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.9" Value="0.35"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.9" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveRight_Copy2">
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.9" Value="0.35"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.9" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource BaseAnimation}"/>
</EventTrigger>
</UserControl.Triggers>
<Grid>
<Rectangle x:Name="Background" Fill="#FF0B5FBC" Height="88" VerticalAlignment="Top"/>
<Rectangle x:Name="waveLeft" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="25.5,6,286.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="waveRight" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="308.5,6,3.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="waveLeft_Copy" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="-3.5,15,315.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="waveRight_Copy" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="279.5,15,32.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="waveLeft_Copy1" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="45.5,25,266.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="waveRight_Copy1" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="0,25,-16.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="waveLeft_Copy2" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="-3.5,38,315.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="waveRight_Copy2" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="279.5,38,32.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
</Grid>
</UserControl>
When I create an instance of this on my Window, this looks fine in the designer, even the animation is being displayed. At Runtime, the Control is displayed as a unicolor Box (background color), but the animation never starts. Do you see anything wrong with the way Blend created the Trigger that might keep it from working?
Thanks a lot in advance!
Sebi

Cannot reproduce this, given that waveBright is actually defined in a reachable scope of your UserControl. This might be the only weakness of that code.

Setting the foreground[text] color of the button in a resource dictionary

I am defining a button style in Buttons.xaml file. Can you please tell me how to set the foreground property of the button? I need to use a gradient as foreground property. Code is as below. Right now i am setting the gradient within the button tag.
<Style x:Key="ButtonCancel" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ControlTemplate.Resources>
<Storyboard x:Key="Storyboard1">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.68"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1.1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1.1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1.1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Storyboard_Copy1">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.68"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid>
<Image x:Name="image" Source="../images/UnCategorized/Red_Oval_Button_With_Cross.png" Stretch="Fill" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True" Content="CANCEL" RenderTransformOrigin="0.5,0.5">
<ContentPresenter.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True"/>
<Trigger Property="IsDefaulted" Value="True"/>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.ExitActions>
<BeginStoryboard x:Name="Storyboard_Copy1_BeginStoryboard" Storyboard="{StaticResource Storyboard_Copy1}"/>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsPressed" Value="True"/>
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Button Style="{DynamicResource ButtonCancel}" Click="btnCancel_Clicked" FontFamily="Tw Cen MT" FontSize="18" FontWeight="Bold" Width="144" Name="btnCancel"
HorizontalAlignment="Right" Grid.Row="1" Grid.Column="1" Margin="0,73.5,0,55.5">
<Button.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#9B000000" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Button.OpacityMask>
</Button>

In the style? If so use a setter:
<Style x:Key="ButtonCancel" TargetType="{x:Type Button}">
<Setter Property="Foreground">
<Setter.Value>
<!-- LinearGradientBrush here -->
</Setter.Value>
</Setter>
<!-- ........ -->
</Style>

Resources