Control style of each individual ToggleButton in Windows Phone 8.1

Question

I am building a Windows Phone 8.1 (non SilverLight) application. I want my ToggleButtons to look different when toggled, so I have the following code:

<Page.Resources>
  <!-- Custom style for Windows.UI.Xaml.Controls.Primitives.ToggleButton -->
  <Style TargetType="ToggleButton">
      <Setter Property="Background" Value="{ThemeResource ToggleButtonBackgroundThemeBrush}" />
      <Setter Property="Foreground" Value="{ThemeResource ToggleButtonForegroundThemeBrush}"/>
      <Setter Property="BorderBrush" Value="{ThemeResource ToggleButtonBorderThemeBrush}" />
      <Setter Property="BorderThickness" Value="{ThemeResource ToggleButtonBorderThemeThickness}" />
      <Setter Property="Padding" Value="12,4,12,5" />
      <Setter Property="HorizontalAlignment" Value="Left" />
      <Setter Property="VerticalAlignment" Value="Center" />
      <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
      <Setter Property="FontWeight" Value="SemiBold" />
      <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="ToggleButton">
            <Grid>
              <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                  <VisualState x:Name="Normal" />
                  <VisualState x:Name="Checked">
                      <Storyboard>
                          <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
                              <DiscreteObjectKeyFrame KeyTime="0" Value="Yellow" />
                          </ObjectAnimationUsingKeyFrames>
                          <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="BorderThickness">
                              <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                          </ObjectAnimationUsingKeyFrames>
                          <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="BorderBrush">
                              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonCheckedBorderThemeBrush}" />
                          </ObjectAnimationUsingKeyFrames>
                          <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonCheckedForegroundThemeBrush}" />
                          </ObjectAnimationUsingKeyFrames>
                      </Storyboard>
                  </VisualState>
                </VisualStateGroup>
              </VisualStateManager.VisualStateGroups>
              <Border x:Name="Border"
                Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                Margin="3">
                  <ContentPresenter x:Name="ContentPresenter"
                    Content="{TemplateBinding Content}"
                    ContentTransitions="{TemplateBinding ContentTransitions}"
                    ContentTemplate="{TemplateBinding ContentTemplate}"
                    Margin="{TemplateBinding Padding}"
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                    AutomationProperties.AccessibilityView="Raw"/>
              </Border>
              <Rectangle x:Name="FocusVisualWhite"
                 IsHitTestVisible="False"
                 Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}"
                 StrokeEndLineCap="Square"
                 StrokeDashArray="1,1"
                 Opacity="0"
                 StrokeDashOffset="1.5" />
              <Rectangle x:Name="FocusVisualBlack"
                 IsHitTestVisible="False"
                 Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}"
                 StrokeEndLineCap="Square"
                 StrokeDashArray="1,1"
                 Opacity="0"
                 StrokeDashOffset="0.5" />
            </Grid>
          </ControlTemplate>
        </Setter.Value>
    </Setter>
  </Style>
</Page.Resources>

This works, but it works on all ToggleButtons that I have on the page! As seen here:

How do I make this selective so that it only applies to the ToggleButton on the left (as an example).

Answer 1

It is very simple just add key name to your style e.g

 <Style TargetType="ToggleButton" x:Key="MytoggleButton">

Now for the toggle button you want to implement this style just reference the key.

<ToggleButton Style="{StaticResource MytoggleButton}" ...>