We Keep Coding

How can we change the foreground color on point hover in a listview binded with two textblock of the different foreground colors?

I am using this style
<Style x:Key="ListViewItemContainerStyle"
TargetType="ListViewItem">
<Setter Property="FontFamily"
Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize"
Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background"
Value="{ThemeResource ListViewItemBackground}" />
<Setter Property="Foreground"
Value="{ThemeResource ListViewItemForeground}" />
<Setter Property="TabNavigation"
Value="Local" />
<Setter Property="IsHoldingEnabled"
Value="True" />
<Setter Property="Padding"
Value="0,0,12,0" />
<Setter Property="HorizontalContentAlignment"
Value="Left" />
<Setter Property="VerticalContentAlignment"
Value="Center" />
<Setter Property="MinWidth"
Value="{ThemeResource ListViewItemMinWidth}" />
<Setter Property="MinHeight"
Value="{ThemeResource ListViewItemMinHeight}" />
<Setter Property="AllowDrop"
Value="False" />
<Setter Property="UseSystemFocusVisuals"
Value="{StaticResource UseSystemFocusVisuals}" />
<Setter Property="FocusVisualMargin"
Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter x:Name="Root"
CheckBrush="{ThemeResource ListViewItemCheckBrush}"
ContentMargin="{TemplateBinding Padding}"
CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}"
ContentTransitions="{TemplateBinding ContentTransitions}"
CheckMode="{ThemeResource ListViewItemCheckMode}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
DragBackground="{ThemeResource ListViewItemDragBackground}"
DragForeground="{ThemeResource ListViewItemDragForeground}"
FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}"
FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Control.IsTemplateFocusTarget="True"
PressedBackground="{ThemeResource ListViewItemBackgroundPressed}"
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}"
PointerOverForeground="{StaticResource ListViewSelectedFGColor}"
PointerOverBackground="{ThemeResource ListViewItemBackgroundPointerOver}"
RevealBorderThickness="{ThemeResource ListViewItemRevealBorderThemeThickness}"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
RevealBorderBrush="{ThemeResource ListViewItemRevealBorderBrush}"
RevealBackground="{ThemeResource ListViewItemRevealBackground}"
SelectedForeground="{StaticResource ListViewSelectedFGColor}"
SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}"
SelectedPointerOverBackground="{StaticResource ListViewSelectedBGColor }"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Target="Root.Foreground"
Value="{Binding PrimaryTextColor}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Target="Root.RevealBackground"
Value="{StaticResource ListViewSelectedBGColor}" />
<Setter Target="Root.RevealBorderBrush"
Value="{StaticResource ListViewSelectedBGColor}" />
<Setter Target="Root.Foreground"
Value="{StaticResource ListViewSelectedFGColor}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="Root.(RevealBrush.State)"
Value="PointerOver" />
<Setter Target="Root.RevealBackground"
Value="{StaticResource ListViewSelectedBGColor}" />
<Setter Target="Root.Foreground"
Value="{StaticResource ListViewSelectedFGColor}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOverSelected">
<VisualState.Setters>
<Setter Target="Root.(RevealBrush.State)"
Value="PointerOver" />
<Setter Target="Root.RevealBackground"
Value="{StaticResource ListViewSelectedBGColor}" />
<Setter Target="Root.RevealBorderBrush"
Value="{StaticResource ListViewSelectedBGColor}" />
<Setter Target="Root.Foreground"
Value="{StaticResource ListViewSelectedFGColor}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOverPressed">
<VisualState.Setters>
<Setter Target="Root.(RevealBrush.State)"
Value="Pressed" />
<Setter Target="Root.RevealBorderBrush"
Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="Root.(RevealBrush.State)"
Value="Pressed" />
<Setter Target="Root.RevealBackground"
Value="{StaticResource ListViewSelectedBGColor}" />
<Setter Target="Root.Foreground"
Value="{StaticResource ListViewSelectedFGColor}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PressedSelected">
<VisualState.Setters>
<Setter Target="Root.(RevealBrush.State)"
Value="Pressed" />
<Setter Target="Root.RevealBackground"
Value="{StaticResource ListViewSelectedBGColor}" />
<Setter Target="Root.Foreground"
Value="{StaticResource ListViewSelectedFGColor}"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DisabledStates">
<VisualState x:Name="Enabled" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="Root.RevealBorderThickness"
Value="0" />
<Setter Target="Root.Foreground"
Value="{Binding PrimaryTextColor}"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</ListViewItemPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
ItemSource of this listview is binded to a usercontrol which has two textblocks. Now I need to set two different foreground color for these textblocks but i can't do this using this style. Only one foreground can be applied by setting foreground color in Normal VisualState
and changing it in PointerOver VisualState.
UserControl code is below :
<TextBlock Text="{x:Bind ViewModel.Name,Mode=TwoWay}"
FontSize="12"
x:Uid="UserNameFGColor"
Grid.Row="0"
TextTrimming="CharacterEllipsis"
TextAlignment="Left"
VerticalAlignment="Center"
HorizontalAlignment="Left">
</TextBlock>
<TextBlock Grid.Row="1"
HorizontalAlignment="Left"
TextAlignment="Left"
x:Name="CustomStatusFGColor"
Text="{x:Bind ViewModel.CustomStatus,Mode=TwoWay}"
FontSize="11" Width="180">
</TextBlock>
and ListView code is this
<ListView ItemContainerStyle="{StaticResource ListViewItemContainerStyle}"
Grid.Row="1"
Margin="0,5,0,20"
CanDragItems="True"
AllowDrop="True"
CanReorderItems="True"
ItemClick="{x:Bind ViewModel.OpenPinnedChatListItemClick}">
</ListView>

You could create two VisualState in the usercontrol where you placed the two TextBlock. And go to these states when pointer enters or exits the TextBlock.
Xaml:
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ValueStates">
<VisualState x:Name="NoChange">
<Storyboard>
<ColorAnimation To="Black"
Storyboard.TargetName="MyTextBlock"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Change">
<Storyboard>
<ColorAnimation To="Red"
Storyboard.TargetName="MyTextBlock"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBlock Text="Yes" x:Name="MyTextBlock" Foreground="Black" PointerEntered="MyTextBlock_PointerEntered" PointerExited="MyTextBlock_PointerExited"/>
</Grid>
Code-behind:
private void MyTextBlock_PointerEntered(object sender, PointerRoutedEventArgs e)
{
bool result = VisualStateManager.GoToState(this, "Change", false);
}
private void MyTextBlock_PointerExited(object sender, PointerRoutedEventArgs e)
{
bool result = VisualStateManager.GoToState(this, "NoChange", false);
}

UWP Gridviewitem hover border is not shaped

I'm having a simple GridView which its items have corner radius.
The presentation of the items is fine, but when hovering with the mouse the corner radius is not applied and it doesn't look good.
in the example above, item B2.
I'd like to keep the reveal effect when hovering.
this is my code:
<Page.Resources>
<DataTemplate x:Key="PersonDataTemplate" x:DataType="local:Person">
<Border
Width="200"
Height="50"
Background="AliceBlue"
BorderBrush="#D0D0D0"
BorderThickness="1"
CornerRadius="90">
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="{x:Bind FullName}" />
</Border>
</DataTemplate>
</Page.Resources>
<Grid Padding="64">
<GridView ItemTemplate="{StaticResource PersonDataTemplate}" ItemsSource="{x:Bind Persons, Mode=OneWay}" />
</Grid>
how can I implement that?

UWP Gridviewitem hover border is not shaped
The pointer hove rectangle like the above screenshot is GridViewItem's ListViewItemPresenter style. if you want to remove them, you could custom GridViewItem style and set the related part as Transparent. And you could use the following style directly.
<Style x:Key="GridViewItemRevealStyle" TargetType="GridViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background" Value="{ThemeResource GridViewItemBackground}" />
<Setter Property="Foreground" Value="{ThemeResource GridViewItemForeground}" />
<Setter Property="TabNavigation" Value="Local" />
<Setter Property="IsHoldingEnabled" Value="True" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Margin" Value="0,0,4,4" />
<Setter Property="MinWidth" Value="{ThemeResource GridViewItemMinWidth}" />
<Setter Property="MinHeight" Value="{ThemeResource GridViewItemMinHeight}" />
<Setter Property="AllowDrop" Value="False" />
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
<Setter Property="FocusVisualMargin" Value="-2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
<ListViewItemPresenter
x:Name="Root"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
CheckBoxBrush="{ThemeResource GridViewItemCheckBoxBrush}"
CheckBrush="{ThemeResource GridViewItemCheckBrush}"
CheckMode="{ThemeResource GridViewItemCheckMode}"
ContentMargin="{TemplateBinding Padding}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Control.IsTemplateFocusTarget="True"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
DragBackground="{ThemeResource GridViewItemDragBackground}"
DragForeground="{ThemeResource GridViewItemDragForeground}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
FocusBorderBrush="{ThemeResource GridViewItemFocusBorderBrush}"
FocusSecondaryBorderBrush="{ThemeResource GridViewItemFocusSecondaryBorderBrush}"
FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
PlaceholderBackground="{ThemeResource GridViewItemPlaceholderBackground}"
PointerOverBackground="Transparent"
PointerOverForeground="{ThemeResource GridViewItemForegroundPointerOver}"
PressedBackground="{ThemeResource GridViewItemBackgroundPressed}"
ReorderHintOffset="{ThemeResource GridViewItemReorderHintThemeOffset}"
RevealBackground="{ThemeResource GridViewItemRevealBackground}"
RevealBorderBrush="{ThemeResource GridViewItemRevealBorderBrush}"
RevealBorderThickness="{ThemeResource GridViewItemRevealBorderThemeThickness}"
SelectedBackground="Transparent"
SelectedForeground="{ThemeResource GridViewItemForegroundSelected}"
SelectedPointerOverBackground="Transparent"
SelectedPressedBackground="{ThemeResource GridViewItemBackgroundSelectedPressed}"
SelectionCheckMarkVisualEnabled="{ThemeResource GridViewItemSelectionCheckMarkVisualEnabled}"
>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOverSelected">
<VisualState.Setters>
<Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOverPressed">
<VisualState.Setters>
<Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PressedSelected">
<VisualState.Setters>
<Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DisabledStates">
<VisualState x:Name="Enabled" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="Root.RevealBorderThickness" Value="0" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</ListViewItemPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style
x:Key="GridViewItemContainerStyle1"
BasedOn="{StaticResource GridViewItemRevealStyle}"
TargetType="GridViewItem"
/>
Usage
<Grid Padding="64">
<GridView
IsTabStop="False"
ItemContainerStyle="{StaticResource GridViewItemContainerStyle1}"
ItemTemplate="{StaticResource PersonDataTemplate}"
/>
</Grid>

That’s because the hover border of the GridViewItem is defined in its Style!
By setting the DataTemplate, you are only setting the content of the GridViewItem, without modifying the presenting Style of the control itself!
You need to create a new Style, inherited from the default one from the GridViewItem and, from there, customizing the hover border and all the properties of the “box” that presents the “content”.
Regards

XAML UWP Radio button icon aligned to center

Here's my code:
<StackPanel Name="stackPanelMain" Orientation="Vertical">
<RadioButton Content="Work" Style="{StaticResource Rick_RadioButtonOption}"/>
<RadioButton Content="Non-Work" Style="{StaticResource Rick_RadioButtonOption}"/>
</StackPanel>
Here's the style:
<Style TargetType="RadioButton" x:Key="Rick_RadioButtonOption">
<Setter Property="Background" Value="White" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Margin" Value="5" />
<Setter Property="FontSize" Value="18" />
<Setter Property="Padding" Value="27" />
</Style>
I've increased the padding so it is more obvious what is happeing. The text is centred as expected/required but the actual radio button remains top-left:
How do I get the radio button centred vertically and to the right slightly? I have tried the solution here but it doesn't work for my situation.
EDIT
As per #asitis request - this is what I get if I set these 2 properties in the style:
<Setter Property="Background" Value="Red" />
<Setter Property="Foreground" Value="Red" />

This can be done just with modifying of the default style of a RadioButton. You can use the LiveVisualTree to see the default style of RadioButton, a RadioButton is actually a Grid, which contains another Grid with 3 Ellipses and a ContentPresenter like this:
Using the Live Visual Tree can get a real-time view of your running XAML code, you can use this tool in VS2015 when you debug the app, open it at the left side of vs2015:
If you edit a copy of the RadioButton's default style, you can see the Grid with 3 Ellipses is like this <Grid Height="32" VerticalAlignment="Top">. This is the reason why your Ellipses is on the top. So you can customize the style like this:
<Style x:Key="RadioButtonStyle" TargetType="RadioButton">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
<!--<Setter Property="Padding" Value="8,6,0,0" />-->
<Setter Property="Padding" Value="27" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="18" />
<Setter Property="Margin" Value="5" />
<Setter Property="MinWidth" Value="120" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Template">
......
<Grid Height="32" VerticalAlignment="Center">
<Ellipse x:Name="OuterEllipse" Height="20" Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" StrokeThickness="{ThemeResource RadioButtonBorderThemeThickness}" UseLayoutRounding="False" Width="20" />
<Ellipse x:Name="CheckOuterEllipse" Fill="{ThemeResource SystemControlHighlightTransparentBrush}" Height="20" Opacity="0" Stroke="{ThemeResource SystemControlHighlightAltAccentBrush}" StrokeThickness="{ThemeResource RadioButtonBorderThemeThickness}" UseLayoutRounding="False" Width="20" />
<Ellipse x:Name="CheckGlyph" Fill="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" Height="10" Opacity="0" UseLayoutRounding="False" Width="10" />
</Grid>
......
</Style>
By the way, to modify the template of RadioButton, we can select the "[RadioButton]" in "Document Outline" and right click, then select "Edit Template" → "Edit a Copy...".

set verticalAligment property as a center for RadioButton ,
Ellipse in the Radiobutton is always on top, To solve this problem, you must change the template
<Style x:Key="RadioButtonStyle1" TargetType="{x:Type RadioButton}">
<Setter Property="Background" Value="White" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Margin" Value="5" />
<Setter Property="FontSize" Value="18" />
<Setter Property="Padding" Value="27" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border x:Name="radioButtonBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="100" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1,1,2,1" VerticalAlignment="Center">
<Grid x:Name="markGrid" Margin="2">
<Ellipse x:Name="optionMark" Fill="#FF212121" MinWidth="6" MinHeight="6" Opacity="0"/>
</Grid>
</Border>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasContent" Value="True">
<Setter Property="FocusVisualStyle">
<Setter.Value>
<Style>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="14,0,0,0" SnapsToDevicePixels="True" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Padding" Value="4,-1,0,0"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFF3F9FF"/>
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FF5593FF"/>
<Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFE6E6E6"/>
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FFBCBCBC"/>
<Setter Property="Fill" TargetName="optionMark" Value="#FF707070"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFD9ECFF"/>
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FF3C77DD"/>
<Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Opacity" TargetName="optionMark" Value="1"/>
</Trigger>
<Trigger Property="IsChecked" Value="{x:Null}">
<Setter Property="Opacity" TargetName="optionMark" Value="0.56"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

add in page or application resources this control template:
<ControlTemplate x:Key="RadioButtonControlTemplate1" TargetType="RadioButton">
<Grid Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterEllipse"
Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse"
Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterEllipse"
Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse"
Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterEllipse"
Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse"
Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="CheckGlyph"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
<DoubleAnimation Storyboard.TargetName="OuterEllipse"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0" />
<DoubleAnimation Storyboard.TargetName="CheckOuterEllipse"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid VerticalAlignment="Center" Height="32" >
<Ellipse x:Name="OuterEllipse"
Width="20"
Height="20"
UseLayoutRounding="False"
Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
StrokeThickness="{ThemeResource RadioButtonBorderThemeThickness}" />
<Ellipse x:Name="CheckOuterEllipse"
Width="20"
Height="20"
UseLayoutRounding="False"
Stroke="{ThemeResource SystemControlHighlightAltAccentBrush}"
Fill="{ThemeResource SystemControlHighlightTransparentBrush}"
Opacity="0"
StrokeThickness="{ThemeResource RadioButtonBorderThemeThickness}"
/>
<Ellipse x:Name="CheckGlyph"
Width="10"
Height="10"
UseLayoutRounding="False"
Opacity="0"
Fill="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
</Grid>
<ContentPresenter x:Name="ContentPresenter"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Grid.Column="1"
AutomationProperties.AccessibilityView="Raw"
TextWrapping="Wrap" />
</Grid>
</ControlTemplate>
and apply it to your radio button in this manner:
<RadioButton Content="Non-Work" Style="{StaticResource Rick_RadioButtonOption}" Template="{StaticResource RadioButtonControlTemplate1}"/>

Margin and Padding have 4 values: Left, Top, Right, Bottom. If you use one value only, all four values will be set identical. To move a RadioButton to the right you must increase the Left Margin value. You should also use TargetType="{x:Type RadioButton}":
<Style TargetType="{x:Type RadioButton}" x:Key="Rick_RadioButtonOption">
<Setter Property="Background" Value="White" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Margin" Value="10,5,5,5" />
<Setter Property="FontSize" Value="18" />
<Setter Property="Padding" Value="27" />
</Style>

How can I detect if textbox has text?

I have a textbox which has an animation but i want it to stop that animation if the textbox has text and start again if the textbox doesn't have text? But i'm not sure if this is possible as the animation is linked to another textbox?
TextBoxStyle1 is the animation.
TextBoxStyle2 is where the text input will be.
Here is my code;
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
<local:TextInputToVisibilityConverter x:Key="TextInputToVisibilityConverter" />
<Storyboard x:Key="StoryboardBorder">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="#FFABADB3"/>
<EasingColorKeyFrame KeyTime="0:0:0.6" Value="#FF00BCD4"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<FontFamily x:Key="MainFont">Arial</FontFamily>
<SolidColorBrush x:Key="TextBox.Static.Border" Color="#FFABAdB3"/>
<SolidColorBrush x:Key="TextBox.MouseOver.Border" Color="#FFC1C1C1"/>
<SolidColorBrush x:Key="TextBox.Focus.Border" Color="#FF00BCD4"/>
<Style x:Key="TextBoxStyle1" TargetType="{x:Type TextBox}">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="BorderBrush" Value="{StaticResource TextBox.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="FontFamily" Value="{StaticResource MainFont}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<ControlTemplate.Resources>
<Storyboard x:Key="StoryboardTextAnimation">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="TextBox">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="-23.333"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="TextBox">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.76"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="TextBox">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.76"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="TextBox">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="-25.597"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="TextBox">
<EasingColorKeyFrame KeyTime="0" Value="#FF8B8B8B"/>
<EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF00BCD4"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="StoryboardTextAnimation_Copy1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="TextBox">
<SplineDoubleKeyFrame KeyTime="0" Value="-23.333"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="TextBox">
<SplineDoubleKeyFrame KeyTime="0" Value="0.76"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="TextBox">
<SplineDoubleKeyFrame KeyTime="0" Value="0.76"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="TextBox">
<SplineDoubleKeyFrame KeyTime="0" Value="-25.597"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="TextBox">
<SplineColorKeyFrame KeyTime="0" Value="#FF00BCD4"/>
<SplineColorKeyFrame KeyTime="0:0:0.2" Value="#FFC1C1C1"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Border x:Name="border" SnapsToDevicePixels="True" BorderThickness="0,0,0,2" BorderBrush="Transparent">
<ScrollViewer x:Name="TextBox" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" RenderTransformOrigin="0.5,0.5" Content="Floating Label Text" Background="White" Margin="0,3.75,0,3.25">
<ScrollViewer.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ScrollViewer.RenderTransform>
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
<Setter Property="Text" Value="{x:Null}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="False">
<Setter Property="Text" Value="{x:Null}" />
</Trigger>
<DataTrigger Binding="{Binding IsKeyboardFocusWithin, RelativeSource={RelativeSource AncestorType={x:Type Grid}}}"
Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource StoryboardBorder}" />
<BeginStoryboard Storyboard="{StaticResource StoryboardTextAnimation}" />
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource StoryboardTextAnimation_Copy1}" />
</DataTrigger.ExitActions>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/>
<Condition Property="IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
</MultiTrigger>
</Style.Triggers>
</Style>
<SolidColorBrush x:Key="brushWatermarkForeground" Color="LightGray" />
<SolidColorBrush x:Key="TextBox.MouseOver.Border2" Color="#FF7EB4EA"/>
<Style x:Key="TextBoxStyleNew" TargetType="{x:Type TextBox}">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="BorderBrush" Value="{StaticResource TextBox.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<ControlTemplate.Resources>
<Storyboard x:Key="StoryboardAnimateText"/>
</ControlTemplate.Resources>
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" BorderThickness="0,0,0,2" Margin="0,-5,0,0">
<ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border2}"/>
<Setter Property="BorderThickness" TargetName="border" Value="0"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
<Setter Property="BorderThickness" TargetName="border" Value="0"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/>
<Condition Property="IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
</MultiTrigger>
</Style.Triggers>
</Style>
<Style x:Key="TextBlockStyle1" TargetType="{x:Type TextBlock}">
<Setter Property="TextWrapping" Value="NoWrap"/>
<Setter Property="TextTrimming" Value="None"/>
</Style>
<SolidColorBrush x:Key="TextBox.MouseOver.Border3" Color="#FF00BCD4"/>
<SolidColorBrush x:Key="TextBox.Focus.Border2" Color="#FF00BCD4"/>
<Style x:Key="TextBoxStyle2" TargetType="{x:Type TextBox}">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="BorderBrush" Value="{StaticResource TextBox.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/>
<Condition Property="IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
</MultiTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid Name="grid1" Focusable="True">
<Grid x:Name="TextBoxes" Margin="23.75,0,-23.75,0">
<TextBlock Margin="250.449,182.112,374.044,0" Text="Hint Text" Foreground="{StaticResource brushWatermarkForeground}"
Visibility="{Binding ElementName=txtUserEntry, Path=Text.IsEmpty, Converter={StaticResource BooleanToVisibilityConverter}}" Height="19.725" VerticalAlignment="Top" Style="{DynamicResource TextBlockStyle1}" />
<TextBox Name="txtUserEntry" Background="Transparent" BorderBrush="#FFC1C1C1" Margin="250.449,182.112,352.952,0" Height="25.689" VerticalAlignment="Top" BorderThickness="0,0,0,2" Style="{DynamicResource TextBoxStyle2}" />
<TextBox x:Name="textBox1" Text="Floating Label Text" Height="25.689" VerticalAlignment="Top" Margin="250.449,182.112,352.952,0" Style="{DynamicResource TextBoxStyle1}" BorderThickness="1" Foreground="#FFC1C1C1" Background="White" BorderBrush="#FFC1C1C1"/>
</Grid>
</Grid>

Not sure why the down votes, as solving this would have been a good exercise for anyone looking to hone their WPF style/template skills.
There are two important things to remember when creating styles/templates, especially when triggers get involved.
The order of the triggers matters.
If you find yourself scratching your head, you need to look at it from another angle and simplify.
At the point where you got, it would have been a good time to go ahead and make a custom control, in fact the example I provide below is going to be just that.
For what you are attempting to do, you have 3 possible outcomes to test for. If we take a few steps back and look, we can see exactly what we need to do, I'll break it down.
IsFocused
Color the border and label (This happens no matter what)
!IsFocused & Text.Length = 0
ENTER: Lower and resize the label.
EXIT: Raise and resize the label.
IsFocused & Text.Length = 0
ENTER: Display the hint.
EXIT: Hide the hint.
That's it, those are the only three triggers that we need, one Trigger and two MultiTriggers. You could get creative and make it only one trigger really, but maintainability and readability would be horrendous.
Let's start with the code for the custom control:
public class AnimatedTextBox : TextBox
{
public static readonly DependencyProperty LabelProperty =
DependencyProperty.Register("Label", typeof (string), typeof (AnimatedTextBox),
new FrameworkPropertyMetadata(null));
public static readonly DependencyProperty HintProperty =
DependencyProperty.Register("Hint", typeof (string), typeof (AnimatedTextBox),
new FrameworkPropertyMetadata(null));
static AnimatedTextBox()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof (AnimatedTextBox),
new FrameworkPropertyMetadata(typeof (AnimatedTextBox)));
}
public string Label
{
get { return (string) GetValue(LabelProperty); }
set { SetValue(LabelProperty, value); }
}
public string Hint
{
get { return (string) GetValue(HintProperty); }
set { SetValue(HintProperty, value); }
}
}
I've just made Label and Hint strings to keep things simple, you could make them objects and expand the possibilities some.
And now the style:
<Color x:Key="Color.Control.Border.Focus">#FF00BCD4</Color>
<SolidColorBrush x:Key="SolidColorBrush.Control.Border" Color="#FFABADB3" />
<SolidColorBrush x:Key="SolidColorBrush.Hint" Color="LightGray" />
<Style TargetType="{x:Type local:AnimatedTextBox}">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" />
<Setter Property="BorderBrush" Value="{StaticResource SolidColorBrush.Control.Border}" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="KeyboardNavigation.TabNavigation" Value="None" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="AllowDrop" Value="true" />
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst" />
<Setter Property="Stylus.IsFlicksEnabled" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:AnimatedTextBox}">
<ControlTemplate.Resources />
<Border x:Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="0,0,0,2"
SnapsToDevicePixels="True">
<StackPanel>
<TextBlock x:Name="LabelTextBlock"
Focusable="False"
Foreground="{TemplateBinding BorderBrush}"
RenderTransformOrigin="0.5,0.5"
Text="{TemplateBinding Label}">
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX=".75" ScaleY=".75" />
<TranslateTransform X="0" Y="0" />
</TransformGroup>
</TextBlock.RenderTransform>
</TextBlock>
<Grid>
<ScrollViewer x:Name="PART_ContentHost"
Focusable="false"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden" />
<TextBlock x:Name="HintTextBlock"
Margin="5 0 0 0"
Focusable="False"
Foreground="{StaticResource SolidColorBrush.Hint}"
IsHitTestVisible="False"
Opacity="0"
Text="{TemplateBinding Hint}" />
</Grid>
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.6"
Storyboard.TargetProperty="BorderBrush.Color"
To="{StaticResource Color.Control.Border.Focus}" />
<ColorAnimation Duration="0:0:0.6"
Storyboard.TargetName="LabelTextBlock"
Storyboard.TargetProperty="Foreground.Color"
To="{StaticResource Color.Control.Border.Focus}" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.6" Storyboard.TargetProperty="BorderBrush.Color" />
<ColorAnimation Duration="0:0:0.6"
Storyboard.TargetName="LabelTextBlock"
Storyboard.TargetProperty="Foreground.Color" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=Text.Length, RelativeSource={RelativeSource Self}}" Value="0" />
<Condition Binding="{Binding Path=IsFocused, RelativeSource={RelativeSource Self}}" Value="false" />
</MultiDataTrigger.Conditions>
<MultiDataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetName="LabelTextBlock"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
To="1" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetName="LabelTextBlock"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
To="1" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetName="LabelTextBlock"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(TranslateTransform.Y)"
To="15" />
</Storyboard>
</BeginStoryboard>
</MultiDataTrigger.EnterActions>
<MultiDataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetName="LabelTextBlock"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetName="LabelTextBlock"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetName="LabelTextBlock"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(TranslateTransform.Y)" />
</Storyboard>
</BeginStoryboard>
</MultiDataTrigger.ExitActions>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=Text.Length, RelativeSource={RelativeSource Self}}" Value="0" />
<Condition Binding="{Binding Path=IsFocused, RelativeSource={RelativeSource Self}}" Value="true" />
</MultiDataTrigger.Conditions>
<MultiDataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetName="HintTextBlock"
Storyboard.TargetProperty="Opacity"
To="1" />
</Storyboard>
</BeginStoryboard>
</MultiDataTrigger.EnterActions>
<MultiDataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetName="HintTextBlock"
Storyboard.TargetProperty="Opacity" />
</Storyboard>
</BeginStoryboard>
</MultiDataTrigger.ExitActions>
</MultiDataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The style is 95% what you had, I just combined it into one control. The only thing I really changed, was I set up the template to be defaulted in the 'IsFocused' and 'HasText' state. The idea is that our control always strives to be in that state, so it's easier to trip it up and set it to the other state. There are a few more ifs and buts the other way around, so coding for the least-common denominator plays to our benefit.
The usage would be as follows:
<Grid>
<StackPanel VerticalAlignment="Center">
<local:AnimatedTextBox Width="300"
Margin=" 0 0 0 15"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Hint="Hint 1"
Label="Label 1" />
<local:AnimatedTextBox Width="300"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Hint="Hint 2"
Label="Label 2" />
</StackPanel>
</Grid>
It may not be perfect, but hopefully that gets you on the right track.

Android Lock Screen C# .NET Replica

I am looking to create an application in Visual Studio C# that mimics the Android pattern lock screen, and was wondering if anyone had any tips for doing so.
This is not a commercial project and no money will be made, just a bit of fun.
I have been playing around in WPF Projects, and am at a loss for ideas right now. The only way I have thought of would be to track the mouse on a MouseDown event, and use the paint features in C# to "paint" where the mouse has been, but I don't feel that this is the best solution.
Any ideas for doing this?

See if this chould help you is rough code.
public partial class PatternLock : UserControl
{
bool isMouseDown = false;
private ObservableCollection<ToggleButton> selectedobject = new ObservableCollection<ToggleButton>();
public PatternLock()
{
InitializeComponent();
}
internal ObservableCollection<int> buttons = new ObservableCollection<int>();
private void layoutroot_Checked(object sender, RoutedEventArgs e)
{
if (e.OriginalSource is ToggleButton)
buttons.Add(Convert.ToInt32(((ToggleButton)e.OriginalSource).Content));
}
private void layoutroot_Unchecked(object sender, RoutedEventArgs e)
{
if (e.OriginalSource is ToggleButton)
{
int i = Convert.ToInt32(((ToggleButton)e.OriginalSource).Content);
buttons.Remove(i);
}
}
internal void ResetPattern()
{
if (buttons != null)
{
buttons.Clear();
foreach (ToggleButton item in layoutroot.Children)
{
item.IsChecked = false;
}
}
}
}
XAML
<UserControl x:Class="WPFTestings.LockPattern.PatternLock"
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"
d:DesignHeight="300"
d:DesignWidth="300"
mc:Ignorable="d">
<UserControl.Resources>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}" />
<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Foreground" Value="{DynamicResource TextBrush}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="1" />
<Setter Property="FontSize" Value="50" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<ControlTemplate.Resources>
<Storyboard x:Key="HoverOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="HoverBorder"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.5" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="HoverShineBorder"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="HoverOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="HoverBorder"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="HoverShineBorder"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="CheckedOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="CheckedBorder"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.5" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="CheckedOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="CheckedBorder"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="PressedOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="Pressed"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="PressedOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="Pressed"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid x:Name="grid">
<Border x:Name="Border"
Background="{DynamicResource NormalBrush}"
BorderBrush="{DynamicResource NormalBorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="50"
Padding="{TemplateBinding Padding}">
<Border.BitmapEffect>
<OuterGlowBitmapEffect GlowColor="Red" GlowSize="10" />
</Border.BitmapEffect>
</Border>
<Border x:Name="CheckedBorder"
Background="YellowGreen"
BorderBrush="Green"
BorderThickness="2"
CornerRadius="50"
Opacity="0"
Padding="{TemplateBinding Padding}">
<Border.BitmapEffect>
<OuterGlowBitmapEffect GlowColor="YellowGreen" GlowSize="10" />
</Border.BitmapEffect>
</Border>
<Border x:Name="HoverBorder"
Background="YellowGreen"
BorderBrush="{DynamicResource NormalBorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="50"
Opacity="0"
Padding="{TemplateBinding Padding}" />
<Border x:Name="HoverShineBorder"
Background="{DynamicResource HoverShineBrush}"
BorderBrush="{DynamicResource NormalBorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="50"
Opacity="0"
Padding="{TemplateBinding Padding}" />
<Border x:Name="Pressed"
Background="YellowGreen"
BorderBrush="Green"
BorderThickness="2"
CornerRadius="50"
Opacity="0"
Padding="{TemplateBinding Padding}" />
<Rectangle x:Name="Shine"
Height="Auto"
Margin="2,2,2,2"
VerticalAlignment="Stretch"
Opacity="1"
RadiusX="3"
RadiusY="3"
Stroke="{x:Null}">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.5,0.042" EndPoint="0.5,0.971">
<GradientStop Offset="0" Color="#26FFFFFF" />
<GradientStop Offset="1" Color="#00FFFFFF" />
<GradientStop Offset="0.467" Color="#26FFFFFF" />
<GradientStop Offset="0.475" Color="#00FFFFFF" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter Margin="4,4,4,4"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.ExitActions>
<BeginStoryboard x:Name="HoverOff_BeginStoryboard" Storyboard="{StaticResource HoverOff}" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource HoverOn}" />
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Trigger.ExitActions>
<BeginStoryboard x:Name="PressedOff_BeginStoryboard" Storyboard="{StaticResource PressedOff}" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard x:Name="PressedOn_BeginStoryboard" Storyboard="{StaticResource PressedOn}" />
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true" />
<Trigger Property="IsChecked" Value="true">
<Trigger.ExitActions>
<BeginStoryboard x:Name="CheckedOff_BeginStoryboard" Storyboard="{StaticResource CheckedOff}" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard x:Name="CheckedOn_BeginStoryboard" Storyboard="{StaticResource CheckedOn}" />
</Trigger.EnterActions>
<Setter TargetName="Pressed" Property="BitmapEffect">
<Setter.Value>
<OuterGlowBitmapEffect GlowColor="YellowGreen" GlowSize="10" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD" />
<Setter TargetName="Border" Property="Background" Value="{DynamicResource DisabledBackgroundBrush}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{DynamicResource DisabledBorderBrush}" />
<Setter TargetName="grid" Property="Opacity" Value="0.5" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="{DynamicResource BlackColor}" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<UniformGrid x:Name="layoutroot"
Columns="3"
Rows="3"
ToggleButton.Checked="layoutroot_Checked"
ToggleButton.Unchecked="layoutroot_Unchecked">
<ToggleButton x:Name="btn1"
Margin="5"
Content="1" />
<ToggleButton x:Name="btn2"
Margin="5"
Content="2" />
<ToggleButton x:Name="btn3"
Margin="5"
Content="3" />
<ToggleButton x:Name="btn4"
Margin="5"
Content="4" />
<ToggleButton x:Name="btn5"
Margin="5"
Content="5" />
<ToggleButton x:Name="btn6"
Margin="5"
Content="6" />
<ToggleButton x:Name="btn7"
Margin="5"
Content="7" />
<ToggleButton x:Name="btn8"
Margin="5"
Content="8" />
<ToggleButton x:Name="btn9"
Margin="5"
Content="9" />
</UniformGrid>
</UserControl>
useing this is add dialog and button to match this as
if (string.Concat(patternLock1.buttons).ToString() == "1359")
{
this.Close();
}
else
{
patternLock1.ResetPattern();
}