We Keep Coding

editable Combobox text color not working corretly

I created a Combobox ControlTemplate for my application.
As a foundation I used the default template from the MS-Page.
I had only one problem with this template, it did not change the textcolor if the Combobox accepts inputs. To fix this, I added
<ColorAnimationUsingKeyFrames Storyboard.TargetName="PART_EditableTextBox"
Storyboard.TargetProperty="(TextElement.Foreground).
(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource Font_Color}" />
</ColorAnimationUsingKeyFrames>
where they set the style for the VisualState "Editable" of the Combobox it self. Now it works. But only as long as I don't disable the control and enable it again. If I do this, the color returns to its original default color, which is black and almost not visible on my inteface^^
So: What do I need to change so that the text returns to the color I gave it before the deactivation?
Here is my full xaml Code for the Combobox and sub-controls:
<ControlTemplate x:Key="DefaultComboboxTemplate" TargetType="{x:Type ComboBox}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="PART_EditableTextBox"
Storyboard.TargetProperty="(TextElement.Foreground).
(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource Font_Color}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="EditStates">
<VisualState x:Name="Editable">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="PART_EditableTextBox">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="ContentSite">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{x:Static Visibility.Hidden}" />
</ObjectAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="PART_EditableTextBox"
Storyboard.TargetProperty="(TextElement.Foreground).
(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource Font_Color}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Uneditable" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ToggleButton x:Name="ToggleButton"
Template="{DynamicResource ComboBoxToggleButtonTemplate}"
Grid.Column="2"
Focusable="false"
ClickMode="Press"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay,
RelativeSource={RelativeSource TemplatedParent}}"/>
<ContentPresenter x:Name="ContentSite"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="3,3,23,3"
VerticalAlignment="Stretch"
HorizontalAlignment="Right">
</ContentPresenter>
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{DynamicResource ComboBoxTextBoxTemplate}"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Margin="3,3,23,3"
Focusable="True"
Background="{StaticResource BG_Brush}"
Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}" />
<Popup x:Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide" >
<Grid x:Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder"
BorderThickness="1" Margin="0,0,0,20" OpacityMask="{DynamicResource PopUp_Opacity}" Background="{DynamicResource PopUp_BG}">
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
</Border.BorderBrush>
</Border>
<ScrollViewer Margin="4,6,4,20"
SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Contained" HorizontalAlignment="Right"/>
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems"
Value="false">
<Setter TargetName="DropDownBorder"
Property="MinHeight"
Value="95" />
</Trigger>
<Trigger Property="IsGrouping"
Value="true">
<Setter Property="ScrollViewer.CanContentScroll"
Value="false" />
</Trigger>
<Trigger SourceName="Popup"
Property="AllowsTransparency"
Value="true">
<Setter TargetName="DropDownBorder"
Property="CornerRadius"
Value="4" />
<Setter TargetName="DropDownBorder"
Property="Margin"
Value="0,2,0,0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
ToggleButton of Combobox
<ControlTemplate x:Key="ComboBoxToggleButtonTemplate"
TargetType="{x:Type ToggleButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource ControlMouseOverColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed" />
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource DisabledControlDarkColor}" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).
(SolidColorBrush.Color)"
Storyboard.TargetName="Arrow">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource DisabledForegroundColor}" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).
(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource DisabledBorderDarkColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource ControlPressedColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border"
Grid.ColumnSpan="2"
CornerRadius="2"
BorderThickness="1">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0,1"
StartPoint="0,0">
<GradientStop Color="{DynamicResource BG_Color}"
Offset="0" />
<GradientStop Color="{DynamicResource BG_Color_2}"
Offset="1" />
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="{DynamicResource BG_Color}" />
<GradientStop Color="{DynamicResource ControlMediumColor}"
Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
</Border>
<Border Grid.Column="0"
CornerRadius="2,0,0,2"
Margin="1" >
<Border.Background>
<SolidColorBrush Color="{DynamicResource ControlLightColor}"/>
</Border.Background>
</Border>
<Path x:Name="Arrow"
Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z" >
<Path.Fill>
<SolidColorBrush Color="{StaticResource Font_Color}"/>
</Path.Fill>
</Path>
</Grid>
</ControlTemplate>
Textbox of Combobox:
<ControlTemplate x:Key="ComboBoxTextBoxTemplate"
TargetType="{x:Type TextBox}" >
<Border x:Name="PART_ContentHost"
Focusable="False"
Background="{TemplateBinding Background}"
/>
</ControlTemplate>
Default version of ComboboxItem
<ControlTemplate x:Key="DefaultComboboxItemTemplate" TargetType="{x:Type ComboBoxItem}">
<Border x:Name="Border"
Padding="2"
SnapsToDevicePixels="true"
Background="{DynamicResource BG_Brush}" HorizontalAlignment="Right">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).
(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource SelectedBackgroundColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).
(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource SelectedUnfocusedColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter />
</Border>
</ControlTemplate>

Found it,
Adding
<Trigger Property="IsEnabled" Value="True">
<Setter Property="Foreground" Value="{StaticResource Font_Brush}"/>
</Trigger>
<Trigger Property="IsEditable"
Value="true">
<Setter Property="IsTabStop" Value="false"/>
<Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>
<Setter TargetName="PART_EditableTextBox" Property="Foreground" Value="{StaticResource Font_Brush}"/>
<Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
</Trigger>
To the ControlTemplate for the DefaultCombobox under the Triggers Element fixed the Issue for me

how to change the background of hub title with random colors and change image pixel of hubtile?

I have prepared a custom hubtile which has a image and textbloxk for displaying the image and text needed.I have hardcoded the background color of tiles as white,Now can anyone suggest how to change the background of tiles with multiple colors and also can any one suggest to change the color of image(i.e change pixel of image coming from server which is used as HubTile source). I have been using below code
xaml file code
<Style x:Key="HomePageTabStyle"
TargetType="toolkit:HubTile">
<Setter Property="Height"
Value="173" />
<Setter Property="Width"
Value="173" />
<Setter Property="Background"
Value="White" />
<!--<Setter Property="Background"
Value="{StaticResource PhoneAccentBrush}" />-->
<Setter Property="Foreground"
Value="#FFFFFFFF" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:HubTile">
<Border x:Name="Container">
<Border.Resources>
<CubicEase x:Key="HubTileEaseOut"
EasingMode="EaseOut" />
</Border.Resources>
<Border.Height>
<Binding Converter="{StaticResource HeightConverter}"
Path="Size"
RelativeSource="{RelativeSource TemplatedParent}" />
</Border.Height>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ImageStates">
<VisualStateGroup.Transitions>
<VisualTransition x:Name="ExpandedToSemiexpanded"
From="Expanded"
GeneratedDuration="0:0:0.85"
To="Semiexpanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="TitlePanel">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.0"
Value="{Binding Size, ConverterParameter=-1, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.85"
Value="{Binding Size, ConverterParameter=-0.4566, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX"
Storyboard.TargetName="ViewportProjection">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.0"
Value="0.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="SemiexpandedToExpanded"
From="Semiexpanded"
GeneratedDuration="0:0:0.85"
To="Expanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="TitlePanel">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.0"
Value="{Binding Size, ConverterParameter=-0.4566, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.85"
Value="{Binding Size, ConverterParameter=-1, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="SemiexpandedToCollapsed"
From="Semiexpanded"
GeneratedDuration="0:0:0.85"
To="Collapsed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="TitlePanel">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.0"
Value="{Binding Size, ConverterParameter=-0.4566, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.85"
Value="0.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="CollapsedToExpanded"
From="Collapsed"
GeneratedDuration="0:0:0.85"
To="Expanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="TitlePanel">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.0"
Value="0.0" />
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.85"
Value="{Binding Size, ConverterParameter=-1, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="ExpandedToFlipped"
From="Expanded"
GeneratedDuration="0:0:0.85"
To="Flipped">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="TitlePanel">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.0"
Value="{Binding Size, ConverterParameter=-1, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="Image">
<DiscreteObjectKeyFrame KeyTime="0:0:0.185"
Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="BackPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0.185"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX"
Storyboard.TargetName="ViewportProjection">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.0"
Value="0.0" />
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.85"
Value="180.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="FlippedToExpanded"
From="Flipped"
GeneratedDuration="0:0:0.85"
To="Expanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="TitlePanel">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.0"
Value="{Binding Size, ConverterParameter=-1, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="Image">
<DiscreteObjectKeyFrame KeyTime="0:0:0.185"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="BackPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0.185"
Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX"
Storyboard.TargetName="ViewportProjection">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.0"
Value="180.0" />
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.85"
Value="360.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimation Duration="0"
To="{Binding Size, ConverterParameter=-1, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="TitlePanel" />
<DoubleAnimation Duration="0"
To="0.0"
Storyboard.TargetProperty="RotationX"
Storyboard.TargetName="ViewportProjection" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="Image">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Semiexpanded">
<Storyboard>
<DoubleAnimation Duration="0"
To="{Binding Size, ConverterParameter=-0.4566, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="TitlePanel" />
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed" />
<VisualState x:Name="Flipped">
<Storyboard>
<DoubleAnimation Duration="0"
To="{Binding Size, ConverterParameter=-1, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="TitlePanel" />
<DoubleAnimation Duration="0"
To="180.0"
Storyboard.TargetProperty="RotationX"
Storyboard.TargetName="ViewportProjection" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="Image">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="BackPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border.Width>
<Binding Converter="{StaticResource WidthConverter}"
Path="Size"
RelativeSource="{RelativeSource TemplatedParent}" />
</Border.Width>
<StackPanel x:Name="Viewport"
Height="{Binding Size, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}"
Width="{Binding Size, Converter={StaticResource WidthConverter}, RelativeSource={RelativeSource TemplatedParent}}">
<StackPanel.Projection>
<PlaneProjection x:Name="ViewportProjection"
CenterOfRotationY="0.25" />
</StackPanel.Projection>
<Grid x:Name="TitlePanel"
Height="{Binding Size, ConverterParameter=2, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}"
RenderTransformOrigin="0.5,0.5"
Width="{Binding Size, Converter={StaticResource WidthConverter}, RelativeSource={RelativeSource TemplatedParent}}">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.RenderTransform>
<CompositeTransform />
</Grid.RenderTransform>
<Grid x:Name="BackPanel"
Background="{TemplateBinding Background}"
Height="{Binding Size, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}"
Grid.Row="1"
Visibility="Collapsed"
Width="{Binding Size, Converter={StaticResource WidthConverter}, RelativeSource={RelativeSource TemplatedParent}}">
<Grid.Projection>
<PlaneProjection CenterOfRotationY="0.5"
RotationX="180" />
</Grid.Projection>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!--Foreground="{TemplateBinding Foreground}"-->
<!--<TextBlock x:Name="NotificationBlock"
Foreground="Gray"
FontSize="{StaticResource PhoneFontSizeMediumLarge}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
LineStackingStrategy="BlockLineHeight"
LineHeight="32"
Margin="8,8,0,6"
Grid.Row="0"
TextWrapping="Wrap"
Text="{TemplateBinding Notification}" />-->
<!--Foreground="{TemplateBinding Foreground}"-->
<!--<TextBlock x:Name="MessageBlock"
Foreground="{StaticResource AppFontColor}"
FontSize="{StaticResource PhoneFontSizeMediumLarge}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
LineStackingStrategy="BlockLineHeight"
LineHeight="23.333"
Margin="10,10,10,6"
Grid.Row="0"
TextWrapping="Wrap"
Text="{TemplateBinding Message}" />-->
<!--Foreground="{TemplateBinding Foreground}"-->
<!--<TextBlock x:Name="BackTitleBlock"
Foreground="Gray"
FontSize="{StaticResource PhoneFontSizeMediumLarge}"
FontFamily="{StaticResource PhoneFontFamilySemiBold}"
Margin="10,0,0,6"
Grid.Row="1"
TextWrapping="Wrap"
VerticalAlignment="Bottom" />-->
</Grid>
<Border x:Name="Image"
Background="{TemplateBinding Background}"
Grid.Row="1">
<Image Height="80"
Width="90"
Margin="0,0,0,35"
Source="{TemplateBinding Source}"
Stretch="Uniform"/>
<!--<Image Height="{Binding Size, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}"
Source="{TemplateBinding Source}"
Stretch="Uniform"
Width="{Binding Size, Converter={StaticResource WidthConverter}, RelativeSource={RelativeSource TemplatedParent}}" />-->
</Border>
<!--Foreground="{TemplateBinding Foreground}"-->
<TextBlock Foreground="Black"
Grid.Row="2"
FontSize="{StaticResource PhoneFontSizeNormal}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
LineStackingStrategy="BlockLineHeight"
LineHeight="27"
MaxHeight="54"
TextTrimming="WordEllipsis"
Margin="10,0,0,6"
TextWrapping="Wrap"
Text="{TemplateBinding Title}"
VerticalAlignment="Bottom" />
</Grid>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And C# file for it is
tile = new HubTile()
{
Name = currentTab.TAB_ID,
Title = currentTab.TAB_NAME,
Message = currentTab.TAB_NAME,
Notification = currentTab.DESCRIPTION,
Source = new BitmapImage(new Uri(currentTab.ICON_URL, UriKind.RelativeOrAbsolute)),
IsFrozen = true,
//Foreground = tabForegroundBrush,
//Background = tabBackgroungBrush,
DataContext = currentTab,
Margin = new Thickness(4),
Style = App.Current.Resources["HomePageTabStyle"] as Style,
Size = TileSize.Medium
};
Here currentTab is object of class.
Please any one do suggest a working solution for it.
Thanks.

Using Array of Colors,I achieved point one.
Color[] colors=new Color{Colors.Red,Colors.Blue,Colors.White}
and in hubtile code added below line
Background=new SolidColorBrush(index % colors.Length),
Thanks.
Hope it helps someone.

Animated split-flap display

I'd like to create an animated split-flap display using c# / wpf. I want it to look similar to the one, that can be seen in this video, but without the 3D effect. As I don't have a lot experience with wpf, I'd like to know how I can implement a UserControl for a single animated letter.

Without 3d, you could do this with multiple images.
Idea #1 Think animated gif. Only, you would have a one set of images to flip from 1 to 2. Another set of images to flip from 2 to 3, etc...
See Option 2 at this site:
http://www.wpfsharp.com/2011/05/11/wpf-replacement-options-for-an-animated-gif
Then you would have the click start the storyboard, then end at a new image instead of the same image. The more images you have, the less choppy it will be.
Idea #2
My other idea would use a top and bottom image for each number. Bend the images with RenderTransform changes.
Give this a look. I got it halfway there for you:
<Window.Resources>
<Storyboard x:Key="FlipNumberStoryBoard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleX)" Storyboard.TargetName="Img1Top">
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="5"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="10"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="20"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="35"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="60"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="75"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="88"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="Img1Top">
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="-2.01"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="-3.45"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-5.55"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-7"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-8.75"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="-9.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="-8.25"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Img1Top">
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.90"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.80"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.60"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.40"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.20"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.10"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.01"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="Img1Top">
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="2.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="5"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="10.1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="15"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="20"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="22.6"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="24.9"/>
</DoubleAnimationUsingKeyFrames>
<Int32AnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.ZIndex)" Storyboard.TargetName="Img2Bottom">
<EasingInt32KeyFrame KeyTime="0:0:0.8" Value="1"/>
</Int32AnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Img1Top">
<DiscreteObjectKeyFrame KeyTime="0:0:0.8" Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleX)" Storyboard.TargetName="Img2Bottom">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="-88"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="-75"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-60"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="-35"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="-20"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="-10"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.4" Value="-5"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Img2Bottom">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.01"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="0.10"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.20"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="0.40"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="0.60"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="0.80"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.4" Value="0.90"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="Img2Bottom">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="-9.121"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="-8.87"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-8.564"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="-7"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="-5.438"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="-3.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.4" Value="-2.001"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="Img2Bottom">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="-24.75"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="-22.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-20.062"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="-15.062"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="-10"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="-5.062"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.4" Value="-2.562"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Img2Bottom">
<DiscreteObjectKeyFrame KeyTime="0:0:0.8" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image x:Name="Img2Top" Source="Images/02top.png" Grid.Row="1" Width="70" Height="50" RenderTransformOrigin="0.5,0.5" Margin="0,-1,0,0"/>
<Image x:Name="Img1Top" Source="Images/01top.png" Grid.Row="1" Width="70" Height="50" RenderTransformOrigin="0.5,0.5" Margin="0,-1,0,0">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<Image x:Name="Img2Bottom" Source="Images/02.png" Grid.Row="2" Width="70" Height="50" Visibility="Collapsed" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<Image x:Name="Img1Bottom" Source="Images/01.png" Grid.Row="2" Width="70" Height="50" RenderTransformOrigin="0.5,0.5"/>
<Button Content="Next" HorizontalAlignment="Left" Margin="223.5,5,0,0" Grid.Row="3" VerticalAlignment="Top" Width="70" Click="Button_Click" />
</Grid>
And then on click of the button, you can see the flip.
using System.Windows;
using System.Windows.Media.Animation;
namespace RenderTransformExample
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
{
var storyboard = (Storyboard)this.Resources["FlipNumberStoryBoard"];
storyboard.Begin();
}
}
}
Now hooking that up so it just loops through images is up to you.

You can use ScaleTransform to achieve the animation, and some dependency properties to make the UserControl easy to use.
First, you have to display your letter in two halves, which can be done using these styles :
<Style x:Key="UpperHalf" TargetType="ContentControl">
<Style.Setters>
<Setter Property="FontFamily" Value="Courier New" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="RenderTransformOrigin" Value="0.5,1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Border Height="{Binding ElementName=SizeRef,
Path=ActualHeight,
Converter={StaticResource HalfConverter}}"
VerticalAlignment="Top"
Background="{TemplateBinding Background}"
CornerRadius="10,10,0,0"
Padding="10,0">
<ContentPresenter Content="{TemplateBinding Content}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
<Style x:Key="LowerHalf" TargetType="ContentControl">
<Style.Setters>
<Setter Property="FontFamily" Value="Courier New" />
<Setter Property="VerticalAlignment" Value="Bottom" />
<Setter Property="RenderTransformOrigin" Value="0.5,0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Border Height="{Binding ElementName=SizeRef,
Path=ActualHeight,
Converter={StaticResource HalfConverter}}"
VerticalAlignment="Bottom"
Background="{TemplateBinding Background}"
CornerRadius="0,0,10,10"
Padding="10,0">
<ContentPresenter Content="{TemplateBinding Content}">
<ContentPresenter.ContentTemplate>
<DataTemplate>
<TextBlock VerticalAlignment="Bottom" Text="{Binding}" />
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
Then to display two overlapping letters (the old one and the new one) :
<Grid>
<!-- Hidden textblock, only used for measurement purpose -->
<!-- The border is here to set the total height of the display so that we can have a small space between the two halves -->
<Border Margin="0,1" Visibility="Hidden">
<TextBlock Name="SizeRef"
Margin="10,0"
FontFamily="Courier New"
Text="{Binding ElementName=Root,
Path=Letter}" />
</Border>
<ContentControl Name="Letter1Top"
Background="Gray"
Content="{Binding ElementName=Root,
Path=Letter1}"
Style="{StaticResource UpperHalf}">
<ContentControl.RenderTransform>
<ScaleTransform />
</ContentControl.RenderTransform>
</ContentControl>
<ContentControl Name="Letter2Top"
Background="Gray"
Content="{Binding ElementName=Root,
Path=Letter2}"
Style="{StaticResource UpperHalf}">
<ContentControl.RenderTransform>
<ScaleTransform />
</ContentControl.RenderTransform>
</ContentControl>
<ContentControl Name="Letter1Bottom"
Background="Gray"
Content="{Binding ElementName=Root,
Path=Letter1}"
Style="{StaticResource LowerHalf}">
<ContentControl.RenderTransform>
<ScaleTransform />
</ContentControl.RenderTransform>
</ContentControl>
<ContentControl Name="Letter2Bottom"
Background="Gray"
Content="{Binding ElementName=Root,
Path=Letter2}"
Style="{StaticResource LowerHalf}">
<ContentControl.RenderTransform>
<ScaleTransform />
</ContentControl.RenderTransform>
</ContentControl>
</Grid>
The properties used above are created in code behind :
public partial class SplitFlapLetter
{
public SplitFlapLetter()
{
InitializeComponent();
}
public char Letter
{
get { return (char)GetValue(LetterProperty); }
set { SetValue(LetterProperty, value); }
}
public static readonly DependencyProperty LetterProperty =
DependencyProperty.Register("Letter", typeof(char), typeof(SplitFlapLetter), new UIPropertyMetadata(OnLetterChanged));
private char Letter1
{
get { return (char)GetValue(Letter1Property); }
set { SetValue(Letter1Property, value); }
}
public static readonly DependencyProperty Letter1Property =
DependencyProperty.Register("Letter1", typeof(char), typeof(SplitFlapLetter), new UIPropertyMetadata(null));
private char Letter2
{
get { return (char)GetValue(Letter2Property); }
set { SetValue(Letter2Property, value); }
}
public static readonly DependencyProperty Letter2Property =
DependencyProperty.Register("Letter2", typeof(char), typeof(SplitFlapLetter), new UIPropertyMetadata(null));
private bool _isLetter1Active;
private static void OnLetterChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var uc = d as SplitFlapLetter;
if (uc == null) return;
if (uc._isLetter1Active)
uc.Letter2 = uc.Letter;
else
uc.Letter1 = uc.Letter;
var sb = uc.FindResource(uc._isLetter1Active ? "GotoLetter2Animation" : "GotoLetter1Animation") as Storyboard;
if (sb != null) sb.Begin();
uc._isLetter1Active = !uc._isLetter1Active;
}
private readonly List<char> _letters = new List<char> { 'A', 'B', 'C', 'D', 'E' };
private void OnClick(object sender, MouseButtonEventArgs e)
{
Letter = _letters[(_letters.IndexOf(Letter) + 1) % _letters.Count];
}
}
The Letter property is the only public one and there is a listener on its changes.
This listener sets Letter1 or Letter2 to the new value, changing at every run, so that the other property is still set to the old value.
It then starts one of the two storyboard defined in the UserControl resources :
<Storyboard x:Key="GotoLetter1Animation">
<DoubleAnimation Duration="0:0:0"
Storyboard.TargetName="Letter1Bottom"
Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleY)"
To="0" />
<Int32Animation Duration="0:0:0"
Storyboard.TargetName="Letter2Top"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="2" />
<Int32Animation Duration="0:0:0"
Storyboard.TargetName="Letter2Bottom"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="1" />
<Int32Animation Duration="0:0:0"
Storyboard.TargetName="Letter1Top"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="1" />
<Int32Animation Duration="0:0:0"
Storyboard.TargetName="Letter1Bottom"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="2" />
<DoubleAnimation Duration="0:0:0.2"
From="1"
Storyboard.TargetName="Letter2Top"
Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleY)"
To="0" />
<DoubleAnimation BeginTime="0:0:0.2"
Duration="0:0:0.2"
From="0"
Storyboard.TargetName="Letter1Bottom"
Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleY)"
To="1" />
<Int32Animation BeginTime="0:0:0.4"
Duration="0:0:0"
Storyboard.TargetName="Letter1Top"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="2" />
<Int32Animation BeginTime="0:0:0.4"
Duration="0:0:0"
Storyboard.TargetName="Letter2Top"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="1" />
<DoubleAnimation BeginTime="0:0:0.4"
Duration="0:0:0"
Storyboard.TargetName="Letter2Top"
Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleY)"
To="1" />
</Storyboard>
<Storyboard x:Key="GotoLetter2Animation">
<DoubleAnimation Duration="0:0:0"
Storyboard.TargetName="Letter2Bottom"
Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleY)"
To="0" />
<Int32Animation Duration="0:0:0"
Storyboard.TargetName="Letter1Top"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="2" />
<Int32Animation Duration="0:0:0"
Storyboard.TargetName="Letter1Bottom"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="1" />
<Int32Animation Duration="0:0:0"
Storyboard.TargetName="Letter2Top"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="1" />
<Int32Animation Duration="0:0:0"
Storyboard.TargetName="Letter2Bottom"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="2" />
<DoubleAnimation Duration="0:0:0.2"
From="1"
Storyboard.TargetName="Letter1Top"
Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleY)"
To="0" />
<DoubleAnimation BeginTime="0:0:0.2"
Duration="0:0:0.2"
From="0"
Storyboard.TargetName="Letter2Bottom"
Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleY)"
To="1" />
<Int32Animation BeginTime="0:0:0.4"
Duration="0:0:0"
Storyboard.TargetName="Letter2Top"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="2" />
<Int32Animation BeginTime="0:0:0.4"
Duration="0:0:0"
Storyboard.TargetName="Letter1Top"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="1" />
<DoubleAnimation BeginTime="0:0:0.4"
Duration="0:0:0"
Storyboard.TargetName="Letter1Top"
Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleY)"
To="1" />
</Storyboard>
There's probably some way to reduce this xaml and use only one storyboard that would uses the appropriate targets.

I think that this project could really give you a base for what you want to do.
Unfortunately, I don't see how this split-flap display could look well without 3D.
Good luck !

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

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

Toaster Popup only showing once

I have the following XAML for a "toaster" popup:
<Popup x:Name="popupMessage"
Width="500"
Height="100"
IsOpen="False"
Placement="Top"
PlacementTarget="{Binding ElementName=statusBarMain}"
StaysOpen="True">
<Popup.Style>
<Style>
<Style.Triggers>
<Trigger Property="Popup.IsOpen" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="0:0:0" Value="0" />
<SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0:0:0" Value="0" />
<SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="1" />
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="1" />
<SplineDoubleKeyFrame KeyTime="0:0:4" Value="0" />
</DoubleAnimationUsingKeyFrames>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen">
<DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="True" />
<DiscreteBooleanKeyFrame KeyTime="0:0:4" Value="False" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</Popup.Style>
<Popup.RenderTransform>
<ScaleTransform ScaleY="1" />
</Popup.RenderTransform>
<Border Width="504"
Height="104"
BorderBrush="#FF0F3D5C"
BorderThickness="2">
<Border Width="500"
Height="100"
BorderBrush="White"
BorderThickness="2">
<Border.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Offset="0" Color="#FFD3CCF5" />
<GradientStop Offset="1" Color="#FF0F3D5C" />
</LinearGradientBrush>
</Border.Background>
<TextBlock x:Name="textBlockMessage"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="18"
Foreground="White"
Text="{Binding NotificationMessage}" />
</Border>
</Border>
</Popup>
The problem with this Popup is that it only seems to work once. I set popupMessage.IsOpen = true and this shows the popup one time. All subsequent calls don't let the popup appear. I checked and the IsOpen property is indeed set to false at the end of the animation.
Clearly I'm missing something here, but what?

You need to stop your storyboard in the ExitActions of your Trigger.
Try this:
<Trigger Property="Popup.IsOpen" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Name="OpenStoryboard">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="0:0:0" Value="0" />
<SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0:0:0" Value="0" />
<SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="1" />
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="1" />
<SplineDoubleKeyFrame KeyTime="0:0:4" Value="0" />
</DoubleAnimationUsingKeyFrames>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen">
<DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="True" />
<DiscreteBooleanKeyFrame KeyTime="0:0:4" Value="False" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="OpenStoryboard"/>
</Trigger.ExitActions>
</Trigger>
I had a similar issue when changing the background colour of a control using an animation and it would also only work once.