We Keep Coding

Display Graph with Vertices and Edges in UWP

My goal is to display a simple Graph in a UWP application. The graph contains a list of vertices and edges. A Vertex has an absolute Position and should be displayed in the View correspondingly. An Edge contains two vertices and should be represented as a simple line between one vertex to the other. Additionally it would also be nice if those GraphItems (Vertex and Edge) were selectable in the view.
So far I've tried to use a ListBox with it's ItemsPanel set to a Canvas so that the items were selectable. I've created my own GraphDataTemplateSelector that is inherited from DataTemplateSelector for choosing whether a vertex or an edge should be drawn. My ViewModel returns the graph as an ObservableCollection of objects which is used as the ItemsSource of the ListBox. I've tried to position the elements with the ItemContainerStyle and binding the Canvas.Left and Canvas.Top properties. But according to this post the binding for Setter.Value isn't supported under UWP so I used the workaround with the RenderTransform described in the same post.
The problem with this approach is that the selection rectangle of the elements always stays at the top left corner of the canvas. As far as I understand if I'm selecting a Canvas as the ItemsPanel of the view it's children will be presented in a ContentPresenter. My guess is that this is caused due to the fact the RenderTransform is only applied to the DataTemplate and not to the ContentPresenter itself.
My question now is how can I solve this problem, so that the selection rectangle moves along with the elements? Maybe this isn't the best way for achieving this goal and there's a better solution for this? Thanks for your time and help!
My XAML-Code:
<Page.Resources>
<DataTemplate x:DataType="models:VertexModel" x:Key="VertexTemplate">
<StackPanel>
<StackPanel.RenderTransform>
<TranslateTransform X="{x:Bind Position.X}" Y="{x:Bind Position.Y}"/>
</StackPanel.RenderTransform>
<Ellipse Fill="Red" Height="40" Width="40" StrokeThickness="2" Stroke="Black"/>
<TextBlock Text="{x:Bind Name}" HorizontalAlignment="Center"/>
</StackPanel>
</DataTemplate>
<DataTemplate x:DataType="models:EdgeModel" x:Key="EdgeTemplate">
<Line X1="{x:Bind StartVertex.Position.X}"
Y1="{x:Bind StartVertex.Position.Y}"
X2="{x:Bind EndVertex.Position.X}"
Y2="{x:Bind EndVertex.Position.Y}"
Stroke="DarkGreen" StrokeThickness="2"/>
</DataTemplate>
<templateSelector:GraphDataTemplateSelector x:Key="GraphDataTemplateSelector"
VertexTemplate="{StaticResource VertexTemplate}"
EdgeTemplate="{StaticResource EdgeTemplate}"/>
</Page.Resources>
<ListBox ItemsSource="{Binding Graph}"
ItemTemplateSelector="{StaticResource GraphDataTemplateSelector}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
My GraphDataTemplateSelector:
public class GraphDataTemplateSelector : DataTemplateSelector
{
public DataTemplate VertexTemplate { get; set; }
public DataTemplate EdgeTemplate { get; set; }
protected override DataTemplate SelectTemplateCore(object item)
{
if (item is VertexModel)
return VertexTemplate;
if (item is EdgeModel)
return EdgeTemplate;
return base.SelectTemplateCore(item);
}
protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
{
return SelectTemplateCore(item);
}
}

My question now is how can I solve this problem, so that the selection rectangle moves along with the elements
The selection rectangle is actually the BorderBackground rectangle which is inside the ListViewItem control template at default.
The transform you defined inside the DateTemplate is only applied to the ContentPresenter of the control template, not also to the BorderBackground rectangle. So you may need to define a new ListViewItem style for the ListView and set the transform for the BorderBackground rectangle with the position data.
As you known you may not able to bind data to the setter.value, but you should be able to bind the data to the elements inside the control template with Binding. Code sample as follows, define a new style in the page resource:
<Page.Resources>
...
<Style x:Key="ListViewItemExpanded" TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Grid
x:Name="ContentBorder"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Rectangle
x:Name="BorderBackground"
Fill="{ThemeResource SystemControlHighlightListAccentLowBrush}"
Opacity="0"
Control.IsTemplateFocusTarget="True"
IsHitTestVisible="False">
<Rectangle.RenderTransform>
<TranslateTransform X="{Binding Position.X}" Y="{Binding Position.Y}" />
</Rectangle.RenderTransform>
</Rectangle>
<Grid
x:Name="ContentPresenterGrid"
Margin="0,0,0,0"
Background="Transparent">
<Grid.RenderTransform>
<TranslateTransform x:Name="ContentPresenterTranslateTransform" />
</Grid.RenderTransform>
<ContentPresenter
x:Name="ContentPresenter"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}" />
</Grid>
<TextBlock
x:Name="PlaceholderTextBlock"
Margin="{TemplateBinding Padding}"
Foreground="{x:Null}"
Opacity="0"
AutomationProperties.AccessibilityView="Raw"
IsHitTestVisible="False"
Text="Xg" />
<Rectangle
x:Name="PlaceholderRect"
Fill="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
Visibility="Collapsed" />
<Rectangle
x:Name="MultiArrangeOverlayBackground"
Grid.ColumnSpan="2"
Fill="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
Opacity="0"
IsHitTestVisible="False" />
<Border
x:Name="MultiSelectSquare"
Width="20"
Height="20"
Margin="12,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
BorderBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
BorderThickness="2"
Visibility="Collapsed">
<Border.Clip>
<RectangleGeometry Rect="0,0,20,20">
<RectangleGeometry.Transform>
<TranslateTransform x:Name="MultiSelectClipTransform" />
</RectangleGeometry.Transform>
</RectangleGeometry>
</Border.Clip>
<Border.RenderTransform>
<TranslateTransform x:Name="MultiSelectCheckBoxTransform" />
</Border.RenderTransform>
<FontIcon
x:Name="MultiSelectCheck"
Foreground="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
Opacity="0"
FontFamily="{ThemeResource SymbolThemeFontFamily}"
FontSize="16"
Glyph=""
Visibility="Collapsed" />
</Border>
<TextBlock
x:Name="MultiArrangeOverlayText"
Grid.ColumnSpan="2"
Margin="18,9,0,0"
Foreground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
Opacity="0"
FontFamily="{ThemeResource ContentControlThemeFontFamily}"
FontSize="26.667"
AutomationProperties.AccessibilityView="Raw"
IsHitTestVisible="False"
Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DragItemsCount}"
TextTrimming="WordEllipsis"
TextWrapping="Wrap" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<DoubleAnimation
Duration="0"
Storyboard.TargetName="BorderBackground"
Storyboard.TargetProperty="Opacity"
To="1" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation
Duration="0"
Storyboard.TargetName="BorderBackground"
Storyboard.TargetProperty="Opacity"
To="1" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation TargetName="ContentPresenter" />
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation
Duration="0:0:0"
Storyboard.TargetName="MultiSelectCheck"
Storyboard.TargetProperty="Opacity"
To="1" />
<DoubleAnimation
Duration="0"
Storyboard.TargetName="BorderBackground"
Storyboard.TargetProperty="Opacity"
To="1" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOverSelected">
<Storyboard>
<DoubleAnimation
Duration="0:0:0"
Storyboard.TargetName="MultiSelectCheck"
Storyboard.TargetProperty="Opacity"
To="1" />
<DoubleAnimation
Duration="0"
Storyboard.TargetName="BorderBackground"
Storyboard.TargetProperty="Opacity"
To="1" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentMediumBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
</Storyboard>
</VisualState>
<VisualState x:Name="PressedSelected">
<Storyboard>
<DoubleAnimation
Duration="0:0:0"
Storyboard.TargetName="MultiSelectCheck"
Storyboard.TargetProperty="Opacity"
To="1" />
<DoubleAnimation
Duration="0"
Storyboard.TargetName="BorderBackground"
Storyboard.TargetProperty="Opacity"
To="1" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation TargetName="ContentPresenter" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DisabledStates">
<VisualState x:Name="Enabled" />
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation
Duration="0"
Storyboard.TargetName="ContentBorder"
Storyboard.TargetProperty="Opacity"
To="{ThemeResource ListViewItemDisabledThemeOpacity}" />
</Storyboard>
</VisualState>
</VisualStateGroup>
...
<VisualStateGroup x:Name="DataVirtualizationStates">
<VisualState x:Name="DataAvailable" />
<VisualState x:Name="DataPlaceholder">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderRect" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ReorderHintStates">
<VisualState x:Name="NoReorderHint" />
<VisualState x:Name="BottomReorderHint">
<Storyboard>
<DragOverThemeAnimation
Direction="Bottom"
ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
TargetName="ContentBorder" />
</Storyboard>
</VisualState>
<VisualState x:Name="TopReorderHint">
<Storyboard>
<DragOverThemeAnimation
Direction="Top"
ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
TargetName="ContentBorder" />
</Storyboard>
</VisualState>
<VisualState x:Name="RightReorderHint">
<Storyboard>
<DragOverThemeAnimation
Direction="Right"
ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
TargetName="ContentBorder" />
</Storyboard>
</VisualState>
<VisualState x:Name="LeftReorderHint">
<Storyboard>
<DragOverThemeAnimation
Direction="Left"
ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
TargetName="ContentBorder" />
</Storyboard>
</VisualState>
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2" To="NoReorderHint" />
</VisualStateGroup.Transitions>
</VisualStateGroup>
<VisualStateGroup x:Name="DragStates">
<VisualState x:Name="NotDragging" />
<VisualState x:Name="Dragging">
<Storyboard>
<DoubleAnimation
Duration="0"
Storyboard.TargetName="ContentBorder"
Storyboard.TargetProperty="Opacity"
To="{ThemeResource ListViewItemDragThemeOpacity}" />
<DragItemThemeAnimation TargetName="ContentBorder" />
</Storyboard>
</VisualState>
<VisualState x:Name="DraggingTarget">
<Storyboard>
<DropTargetItemThemeAnimation TargetName="ContentBorder" />
</Storyboard>
</VisualState>
<VisualState x:Name="MultipleDraggingPrimary">
<Storyboard>
<DoubleAnimation
Duration="0"
Storyboard.TargetName="MultiArrangeOverlayBackground"
Storyboard.TargetProperty="Opacity"
To="1" />
<DoubleAnimation
Duration="0"
Storyboard.TargetName="MultiArrangeOverlayText"
Storyboard.TargetProperty="Opacity"
To="1" />
<DoubleAnimation
Duration="0"
Storyboard.TargetName="ContentBorder"
Storyboard.TargetProperty="Opacity"
To="{ThemeResource ListViewItemDragThemeOpacity}" />
<FadeInThemeAnimation TargetName="MultiArrangeOverlayBackground" />
<FadeInThemeAnimation TargetName="MultiArrangeOverlayText" />
<DragItemThemeAnimation TargetName="ContentBorder" />
</Storyboard>
</VisualState>
<VisualState x:Name="MultipleDraggingSecondary">
<Storyboard>
<FadeOutThemeAnimation TargetName="ContentBorder" />
</Storyboard>
</VisualState>
<VisualState x:Name="DraggedPlaceholder">
<Storyboard>
<FadeOutThemeAnimation TargetName="ContentBorder" />
</Storyboard>
</VisualState>
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2" To="NotDragging" />
</VisualStateGroup.Transitions>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
And set the style to the ListViewItem.
<ListView
ItemContainerStyle="{StaticResource ListViewItemExpanded}"
ItemTemplateSelector="{StaticResource GraphDataTemplateSelector}"
ItemsSource="{x:Bind Graph1}">
<ListView.ItemsPanel>
...
</ListView>
And the result:
You should be able just set transform to the ContentBorder element, in that case you will not set transform inside Datetemplate again.

WPF - Element's colour is bound to button, but doesn't update on button state change

I have the following button with the label inside whose foreground color I wish to bind to the button's:
<Button x:Name="login_button" Grid.Row="1" Grid.Column="1" Template="{DynamicResource TileTemplate}"
Margin="5,10,5,10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<Image Source="pack://application:,,,/textures/logos/lock.png"
VerticalAlignment="Stretch" HorizontalAlignment="Left" Grid.Row="0"
Margin="10,10,10,10">
</Image>
<Label Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Bottom"
HorizontalContentAlignment="Left" VerticalContentAlignment="Bottom"
Content="LOG IN" FontSize="40" FontFamily="CenturyGothicRegual"
Margin="10,10,10,10">
<Label.Foreground>
<SolidColorBrush Color="{Binding ElementName=login_button, Path=BorderBrush.Color,UpdateSourceTrigger=PropertyChanged}"
Opacity="{Binding ElementName=login_button, Path=BorderBrush.Opacity,UpdateSourceTrigger=PropertyChanged}"/>
</Label.Foreground>
</Label>
</Grid>
</Button>
The button gets coloured using a template:
<ControlTemplate x:Key="TileTemplate" TargetType="{x:Type Button}">
<Border x:Name="border" BorderBrush="#99C3C3C3" BorderThickness="2">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#28B6B6B6" Offset="0"/>
<GradientStop Color="#424D4D4D" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="#42B2B2B2"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="#28FFFFFF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="#7F5B5B5B"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="#42B2B2B2"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="#28FFFFFF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="#FFD1A139"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" Storyboard.TargetName="border">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="border">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border">
<EasingDoubleKeyFrame KeyTime="0" Value="0.8"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="#FFF0A300"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="#5991774A"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="#28FFFFFF"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" Storyboard.TargetName="border">
<EasingDoubleKeyFrame KeyTime="0" Value="0.004"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border">
<EasingDoubleKeyFrame KeyTime="0" Value="0.8"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<ContentPresenter/>
</Grid>
</Border>
</ControlTemplate>
I do not know if the template is important, I just enclosed it in case it is. The problem is that while the label does receive the button's colour at start, but when the button's state changes, like MouseOver or Clicked, the label's colour remains the same even if I added the UpdateSourceTrigger=PropertyChanged in the binding. Any ideas?

The VisualStates that you define in the ControlTemplate doesn't apply to the Button's Content.
You could define the brushes or colour as stand-alone resources and apply them both in your ControlTemplate and in a Style for the Label:
<Color x:Key="moColor">#FFD1A139</Color>
...
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource moColor}"/>
</ColorAnimationUsingKeyFrames>
<Button x:Name="login_button" Grid.Row="1" Grid.Column="1" Template="{DynamicResource TileTemplate}" Margin="5,10,5,10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<Image Source="pack://application:,,,/textures/logos/lock.png"
VerticalAlignment="Stretch" HorizontalAlignment="Left" Grid.Row="0"
Margin="10,10,10,10">
</Image>
<Label Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Bottom"
HorizontalContentAlignment="Left" VerticalContentAlignment="Bottom"
Content="LOG IN" FontSize="40" FontFamily="CenturyGothicRegual"
Margin="10,10,10,10">
<Label.Style>
<Style TargetType="Label">
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Button}}" Value="True">
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="{StaticResource moColor}" />
</Setter.Value>
</Setter>
<Setter Property="Opacity" Value="0.8" />
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
</Grid>
</Button>

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.

Add Hubtile control to xaml programatically with device screen width Windows Phone

I have started working With the Hubtile. I'm trying to add a hubtile to a list, with the Hubtile filling the device screen width. I am adding it to a ContentPanel, however i think this is wrong - i need to show the tiles as a list, inside the app with wide tile(max screen width) property, how can i achieve this? Have a look at my code so far:
//Project 1
HubTile project1 = new HubTile();
project1.GroupTag = "projects";
project1.Title = "RLE Kunnskap til andre prøve";
project1.Message = "Kunnskap til den andre prøven i RLE";
project1.Width = Convert.ToDouble(Application.Current.Host.Content.ActualWidth.ToString());
//Add to mainContentPanel for a sample view
mainContentPanel.Children.Add(project1);
I managed to create the size rectangular using the Tilesize property, I was trying all the time figuring out how, but this answer saved me.
//Tile 2
TileSize tilesize = new TileSize();
tilesize = TileSize.Large;
HubTile Tile2= new HubTile();
Tile2.Size = tilesize;

The issue is not that you are adding it to a content panel. If you want to use a list I think that a ListBox would be suited better. Also you can use a ListBox really easy for a MVVM design pattern. The main issue in your setting is, that the HubTile has four preset sizes. The sizes are compliant with the tiles on the start screen, ensuring a coherent experience throughout the system. If you still need a wider tile than Size="Large",you need a custom template.
To do this, right click a HubTile in the designer view and select Template->Edit Template->Edit copy. Create a new style either on the page where you want to use the tile. You can then edit the newly created style and reset all the "width" properties to "auto". This way, the tile width can be easily adjusted. The finished style will then look something like this:
<Style x:Key="HubTileFullWidthStyle" TargetType="toolkit:HubTile">
<Setter Property="Height" Value="173"/>
<Setter Property="Width" Value="Auto"/>
<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>
<StackPanel x:Name="Viewport" Height="{Binding Size, Converter={StaticResource HeightConverter}, 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">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
<Border Background="{TemplateBinding Background}" Grid.Row="0">
<TextBlock Foreground="{TemplateBinding Foreground}" FontSize="41" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineStackingStrategy="BlockLineHeight" LineHeight="39" Margin="10,0,0,6" TextWrapping="NoWrap" Text="{TemplateBinding Title}" VerticalAlignment="Bottom"/>
</Border>
<Grid x:Name="BackPanel" Background="{TemplateBinding Background}" Height="{Binding Size, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" Grid.Row="1" Visibility="Collapsed">
<Grid.Projection>
<PlaneProjection CenterOfRotationY="0.5" RotationX="180"/>
</Grid.Projection>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="NotificationBlock" Foreground="{TemplateBinding Foreground}" FontSize="{StaticResource PhoneFontSizeLarge}" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineStackingStrategy="BlockLineHeight" LineHeight="32" Margin="8,8,0,6" Grid.Row="0" TextWrapping="NoWrap" Text="{TemplateBinding Notification}"/>
<TextBlock x:Name="MessageBlock" Foreground="{TemplateBinding Foreground}" FontSize="{StaticResource PhoneFontSizeNormal}" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineStackingStrategy="BlockLineHeight" LineHeight="23.333" Margin="10,10,10,6" Grid.Row="0" TextWrapping="Wrap" Text="{TemplateBinding Message}"/>
<TextBlock x:Name="BackTitleBlock" Foreground="{TemplateBinding Foreground}" FontSize="{StaticResource PhoneFontSizeNormal}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Margin="10,0,0,6" Grid.Row="1" TextWrapping="NoWrap" VerticalAlignment="Bottom"/>
</Grid>
<Border x:Name="Image" Background="{TemplateBinding Background}" Grid.Row="1">
<Image Height="{Binding Size, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" Source="{TemplateBinding Source}" Stretch="UniformToFill" Width="{Binding Size, Converter={StaticResource WidthConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
</Border>
</Grid>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

'[Unknown]' property does not point to a DependencyObject in path '(0).(1)[3].(2)'

How can I fix this exception caused by the folling style?
<Style x:Key="OnOffSwitchToggleButton" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Grid Margin="0,0,0,-0.033">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.456*"/>
<ColumnDefinition Width="0.544*"/>
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="Switch">
<EasingDoubleKeyFrame KeyTime="0" Value="0.083"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="path1">
<EasingColorKeyFrame KeyTime="0" Value="White"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.Opacity)" Storyboard.TargetName="path">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="path">
<EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF39B54A"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="path">
<EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF319D40"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="label">
<EasingColorKeyFrame KeyTime="0" Value="#00999999"/>
<DiscreteColorKeyFrame KeyTime="0:0:0.2" Value="#0039B54A"/>
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(ContentControl.Content)" Storyboard.TargetName="label">
<DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="ON"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)" Storyboard.TargetName="Switch">
<DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{x:Static HorizontalAlignment.Left}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="Switch">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="39.965"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="label">
<DiscreteDoubleKeyFrame KeyTime="0:0:0.2" Value="-19.224"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="Switch">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="label">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="label">
<EasingColorKeyFrame KeyTime="0" Value="#00999999"/>
<EasingColorKeyFrame KeyTime="0:0:0.2" Value="#00999999"/>
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="#FF999999"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Indeterminate"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Canvas x:Name="_switch" UseLayoutRounding="False" Height="30" Width="70" d:LayoutOverrides="VerticalMargin" Grid.ColumnSpan="2">
<Canvas x:Name="Background" Height="30" Canvas.Left="0" Canvas.Top="0" Width="70" RenderTransformOrigin="0.5,0.5">
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Canvas.RenderTransform>
<Path x:Name="path" Height="30" Canvas.Left="0" Canvas.Top="0" Width="70" Data="F1M55.0161,-0.966799999999999L14.9831,-0.966799999999999C6.7081,-0.966799999999999,0.00010000000000332,5.7412,0.00010000000000332,14.0162C0.00010000000000332,22.2922,6.7081,29.0002,14.9831,29.0002L55.0161,29.0002C63.2911,29.0002,70.0001,22.2922,70.0001,14.0162C70.0001,5.7412,63.2911,-0.966799999999999,55.0161,-0.966799999999999" Fill="#FFEDEDED" Stretch="Fill" Stroke="#FFCCCCCC">
<Path.Effect>
<DropShadowEffect ShadowDepth="0" Color="#FF00ADEF" Opacity="0"/>
</Path.Effect>
</Path>
</Canvas>
<Grid x:Name="Switch" Height="22" Canvas.Left="4.815" Canvas.Top="3.568" Width="22" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<Grid.Effect>
<DropShadowEffect BlurRadius="3" ShadowDepth="0" Opacity="0.5"/>
</Grid.Effect>
<Path x:Name="path1" Data="F1M14.9614,27.0166C7.7934,27.0166,1.9614,21.1846,1.9614,14.0166C1.9614,6.8486,7.7934,1.0166,14.9614,1.0166C22.1294,1.0166,27.9614,6.8486,27.9614,14.0166C27.9614,21.1846,22.1294,27.0166,14.9614,27.0166" Height="22" Stretch="Fill" Width="22" Margin="0" Fill="White"/>
</Grid>
</Canvas>
<Label x:Name="label" Content="OFF" Grid.Column="1" Margin="-2.506,2,0,0" HorizontalAlignment="Left" Padding="0" VerticalAlignment="Center" FontFamily="Avenir 45" FontSize="14.667" Foreground="#FF999999" RenderTransformOrigin="0.5,0.5">
<Label.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Label.RenderTransform>
</Label>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="HorizontalAlignment" Value="Left"/>
</Style>
I'm applying this style to a toggle button which is inside a Grid cell:
<ToggleButton Grid.Column="1" IsChecked="{Binding Path=ObjectStatus}" Style="{StaticResource ResourceKey=OnOffSwitchToggleButton}" Margin="5,0,0,0"/>
I have another toggle button inside a devexpress GridControl and this exception does not appear.

As John said the error is in this line
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="Switch">
it is unable to iterate and lookup the property in switch so the solution is to give the transform a name and then reference the transform directly
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(TranslateTransform.Y)" Storyboard.TargetName="SwitchTranslate">
and
<Grid x:Name="Switch" Height="22" Canvas.Left="4.815" Canvas.Top="3.568" Width="22" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform x:Name="SwitchTranslate"/>
</TransformGroup>

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="Switch">
This is the offending line where '(0).(1)3' where:
(0) is (UIElement.RenderTransform),
(1) is (TransforGroup.Children),
[3] is [3], and
(2) is (TranslateTransform.Y)
Doesn't help much, but I was running into similar problems. I think if you comment out
that line, the problem will go away, but might not work. Perhaps someone with more
experience with this kind of issue can chime in here.

Below is your fixed style:
<Style x:Key="OnOffSwitchToggleButton" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Grid Margin="0,0,0,-0.033">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.456*"/>
<ColumnDefinition Width="0.544*"/>
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="Switch">
<EasingDoubleKeyFrame KeyTime="0" Value="0.083"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="path1">
<EasingColorKeyFrame KeyTime="0" Value="White"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.Opacity)" Storyboard.TargetName="path">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="path">
<EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF39B54A"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="path">
<EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF319D40"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="label">
<EasingColorKeyFrame KeyTime="0" Value="#00999999"/>
<DiscreteColorKeyFrame KeyTime="0:0:0.2" Value="#0039B54A"/>
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(ContentControl.Content)" Storyboard.TargetName="label">
<DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="ON"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)" Storyboard.TargetName="Switch">
<DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{x:Static HorizontalAlignment.Left}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="Switch">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="39.965"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="label">
<DiscreteDoubleKeyFrame KeyTime="0:0:0.2" Value="-19.224"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="Switch">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="label">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="label">
<EasingColorKeyFrame KeyTime="0" Value="#00999999"/>
<EasingColorKeyFrame KeyTime="0:0:0.2" Value="#00999999"/>
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="#FF999999"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Indeterminate"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Canvas RenderTransformOrigin="0.5,0.5" x:Name="_switch" UseLayoutRounding="False" Height="30" Width="70" Grid.ColumnSpan="2">
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Canvas.RenderTransform>
<Canvas x:Name="Background" Height="30" Canvas.Left="0" Canvas.Top="0" Width="70" RenderTransformOrigin="0.5,0.5">
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Canvas.RenderTransform>
<Path x:Name="path" Height="30" Canvas.Left="0" Canvas.Top="0" Width="70" Data="F1M55.0161,-0.966799999999999L14.9831,-0.966799999999999C6.7081,-0.966799999999999,0.00010000000000332,5.7412,0.00010000000000332,14.0162C0.00010000000000332,22.2922,6.7081,29.0002,14.9831,29.0002L55.0161,29.0002C63.2911,29.0002,70.0001,22.2922,70.0001,14.0162C70.0001,5.7412,63.2911,-0.966799999999999,55.0161,-0.966799999999999" Fill="#FFEDEDED" Stretch="Fill" Stroke="#FFCCCCCC">
<Path.Effect>
<DropShadowEffect ShadowDepth="0" Color="#FF00ADEF" Opacity="0"/>
</Path.Effect>
</Path>
</Canvas>
<Grid x:Name="Switch" Height="22" Canvas.Left="4.815" Canvas.Top="3.568" Width="22" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<Grid.Effect>
<DropShadowEffect BlurRadius="3" ShadowDepth="0" Opacity="0.5"/>
</Grid.Effect>
<Path x:Name="path1" Data="F1M14.9614,27.0166C7.7934,27.0166,1.9614,21.1846,1.9614,14.0166C1.9614,6.8486,7.7934,1.0166,14.9614,1.0166C22.1294,1.0166,27.9614,6.8486,27.9614,14.0166C27.9614,21.1846,22.1294,27.0166,14.9614,27.0166" Height="22" Stretch="Fill" Width="22" Margin="0" Fill="White"/>
</Grid>
</Canvas>
<Label x:Name="label" Content="OFF" Grid.Column="1" Margin="-2.506,2,0,0" HorizontalAlignment="Left" Padding="0" VerticalAlignment="Center" FontFamily="Avenir 45" FontSize="14.667" Foreground="#FF999999" RenderTransformOrigin="0.5,0.5">
<Label.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Label.RenderTransform>
</Label>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="HorizontalAlignment" Value="Left"/>
</Style>

I think it's more likely that the Children collection of the TransformGroup doesn't have 4 elements (yet), so (TransforGroup.Children)[3] gives an exception. Make sure that the transform doesn't run before the Children collection is set.