Windows Phone 8.1 中每个单独的 ToggleButton 的控件样式

Question

我正在构建一个 Windows Phone 8.1（非 SilverLight）应用程序。我希望我的 ToggleButtons 在切换时看起来不同，所以我有以下代码：

<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>

这有效，但它适用于我在页面上的所有 ToggleButton！如此处所示：

我如何进行选择性设置，使其仅适用于左侧的 ToggleButton（作为示例）。

Answer 1

非常简单，只需将键名添加到您的样式中即可，例如

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

现在对于要实现此样式的切换按钮，只需引用键即可。

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

Windows Phone 8.1 中每个单独的 ToggleButton 的控件样式

Control style of each individual ToggleButton in Windows Phone 8.1

controltemplate

togglebutton

windows-phone-8.1