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

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>

Related

Progressbar dots spacing issue in Windows Phone

When I use progress bar(IsIndertiminate=true) inside a Grid of width say 120, then the progress bar animation seems quite weird. The progress dot seems to be moving sidebyside without any proper spacing in between them. Also, due to this(less width), the effect of dots getting moving away/getting closer at start and end respectively is not quite visible.
So, how can I make the progressBar look better when I am displaying it in limited width.
I tried to search and make some changes in progressBar's property myself but couldn't reach a satisfactory state.
EDIT: Inside my grid.row, by setting the width of my progressBar to "auto" I was able to achieve desirable spacing/look (it's still not perfect but will work for me).
It just requires some customizing of that controls Style Template to make some adjustments to the shapes that act as the ProgressBar itself.
I don't have a default Style template for the WP7 ProgressBar in front of me at the moment, but if you open your proj in Expression Blend, right-click it and choose "Edit Template -> Edit A Copy (OR Edit Original) to expose the Style Template, you'll see the shapes and I think even the Storyboard animation(s) driving it ready to be edited to your hearts desire.
If you provide a copy of the default template I'm sure we could whip out a solution for you pretty quick if you don't get it yourself. Hope this helps :)
It's default style of progress bar, and you can modify each Rectangle!
<Style x:Key="PerformanceProgressBarStyle1" TargetType="toolkit:PerformanceProgressBar">
<Setter Property="IsIndeterminate" Value="False"/>
<Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="IsHitTestVisible" Value="False"/>
<Setter Property="Padding" Value="{StaticResource PhoneHorizontalMargin}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:PerformanceProgressBar">
<ProgressBar x:Name="EmbeddedProgressBar" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" IsIndeterminate="{TemplateBinding ActualIsIndeterminate}" Padding="{TemplateBinding Padding}">
<ProgressBar.Template>
<ControlTemplate TargetType="ProgressBar">
<toolkitPrimitives:RelativeAnimatingContentControl HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<toolkitPrimitives:RelativeAnimatingContentControl.Resources>
<ExponentialEase x:Key="ProgressBarEaseOut" EasingMode="EaseOut" Exponent="1"/>
<ExponentialEase x:Key="ProgressBarEaseIn" EasingMode="EaseIn" Exponent="1"/>
</toolkitPrimitives:RelativeAnimatingContentControl.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Determinate"/>
<VisualState x:Name="Indeterminate">
<Storyboard Duration="00:00:04.4" RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="IndeterminateRoot">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.0" Storyboard.TargetProperty="X" Storyboard.TargetName="R1TT">
<LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
<LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2" Storyboard.TargetProperty="X" Storyboard.TargetName="R2TT">
<LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
<LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.4" Storyboard.TargetProperty="X" Storyboard.TargetName="R3TT">
<LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
<LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.6" Storyboard.TargetProperty="X" Storyboard.TargetName="R4TT">
<LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
<LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.8" Storyboard.TargetProperty="X" Storyboard.TargetName="R5TT">
<LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
<LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R1">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
<DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R2">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
<DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.4" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R3">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
<DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R4">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
<DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.8" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R5">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
<DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="IndeterminateRoot" Margin="{TemplateBinding Padding}">
<Grid HorizontalAlignment="Left">
<Rectangle x:Name="R1" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="R1TT"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="R2" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="R2TT"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="R3" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="R3TT"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="R4" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="R4TT"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="R5" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="R5TT"/>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
</Border>
</toolkitPrimitives:RelativeAnimatingContentControl>
</ControlTemplate>
</ProgressBar.Template>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisibilityStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.25" To="Normal"/>
<VisualTransition GeneratedDuration="0:0:0.75" To="Hidden"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="Hidden">
<Storyboard>
<DoubleAnimation To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="EmbeddedProgressBar"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</ProgressBar>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
For example just set Widht = "2" Height = "2" May be it's what you need!
<Rectangle x:Name="R1" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="2" IsHitTestVisible="False" Opacity="0" Width="2">
You also can use any shape, not only rectangles.
Do not forget assign this style for your ProgresBar.
Hope its help.

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

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>

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>

Why does the animation I copied in from Expression Blend to Silverlight VS project only run once?

In my Silverlight application, I want different texts to repeatedly fly in from the right changing colors and getting smaller. The animation works the first time through the loop but not subsequent times.
Here's what I did:
(1) I went into Expression blend, used the "Create Storyboard" tool to create the animation.
then (2) copied the StoryBoard block to my XAML:
<UserControl x:Class="TestWeb124.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800" Height="600">
<UserControl.Resources>
<Storyboard x:Key="FadeTextIn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="-111" KeySpline="0,0,0,1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="-88" KeySpline="0,0,0,1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(TextBlock.FontSize)">
<SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="14" KeySpline="0,0,0,1"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FFC24343"/>
<SplineColorKeyFrame KeyTime="00:00:01.5000000" Value="#FF000000" KeySpline="0,0,0,1"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel Margin="20">
<TextBlock Height="57" Margin="190,90,133,0" VerticalAlignment="Top" Text="This is a test." TextWrapping="Wrap" FontSize="36" RenderTransformOrigin="0.5,0.5" x:Name="OutputText" Foreground="#FF000000">
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</TextBlock.RenderTransform>
</TextBlock>
</StackPanel>
</Grid>
</UserControl>
Then (3) in my code behind I run through a timer loop. The animation works great the first time, but subsequent times there is no animation:
public void Each_Tick(object o, EventArgs sender)
{
if (_secondsElapsed % 5 == 0 || _secondsElapsed == 0)
{
OutputText.Text = String.Format("{0}", _customerFirstNames.ElementAt(_customerNodeIndex));
Storyboard fadeTextIn = (Storyboard)Resources["FadeTextIn"];
fadeTextIn.Begin();
_customerNodeIndex++;
if (_customerNodeIndex > _customerFirstNames.Count() - 1) _customerNodeIndex = 0;
}
_secondsElapsed++;
}
It seems that I need to reset the position of the new piece next piece of text that is supposed to fly it. How do I do that?
<Storyboard x:Name="FadeTextIn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" KeySpline="0,0,0,1"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="-111" KeySpline="0,0,0,1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" KeySpline="0,0,0,0"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="-88" KeySpline="0,0,0,1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(TextBlock.FontSize)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="36" KeySpline="0,0,0,0"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="14" KeySpline="0,0,0,1"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FFC24343"/>
<SplineColorKeyFrame KeyTime="00:00:01.5000000" Value="#FF000000" KeySpline="0,0,0,1"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
What the Storyboard is doing is to take an Element and then animate the manipulation of it's properties. That's why the second time it runs the Element already has the target properties, so by adding a keyframe for the start of the animation that sets the values to the initial values your animation will repeat nicely.

Silverlight button style how to prevent the focused state when the button is pressed?

In my custom button I need to show that it had focus(provides some tactile feel to tabbing to the button) and show that its pressed but what I have found is my focused state is displaying rather then my pressed state. How can I correct this. I would like to have mouse over to pressed not mouse over then focused(when the button is clicked )
Here is a sample of my control template.
<UserControl.Resources>
<Style x:Key="GavelButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="#FF000000" x:Name="grid">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Unfocused"/>
<vsm:VisualState x:Name="Focused">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.OpacityMask).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FFFFFFFF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FF2844B9"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="00:00:00.2000000"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.5"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.5"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.5"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.5"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Image Cursor="Hand" x:Name="image" RenderTransformOrigin="0.5,0.5" Source="11_64x64.png" Stretch="Fill" OpacityMask="#FF000000">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>;
When you press it is becomes focused, can't do anything about that...you can clear the Visual State Manager's Focus content and then it won't look focused, but it get focus from the mouse interaction no matter what you do.
I've had success setting IsTabStop to False. I wouldn't expect it to prevent focus after clicking but that appears to be what it does. After clicking the button, the space bar is not captured.

Resources