ToggleButtonチェック状態の背景色を変更しましたUWP

IsCheckedがtrueの場合、ToggleButtonBackgroundの色を変更したいと思います。私はToggleButtonチェック状態の背景色を変更しましたUWP

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" 
     Storyboard.TargetProperty="Background"> 
       <DiscreteObjectKeyFrame KeyTime="0" Value="Green" />

からVisualStateCheckedを変更しようとした。しかし、これはNormal状態の背景が完全に透明に。 CheckedBackgroundの色をXAMLにバインドしたいと思います。これはどうすればいいですか？

<!-- Default style for Windows.UI.Xaml.Controls.Primitives.ToggleButton --> 
<Style TargetType="ToggleButton"> 
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" /> 
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/> 
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}" /> 
<Setter Property="BorderThickness" Value="{ThemeResource ToggleButtonBorderThemeThickness}" /> 
<Setter Property="Padding" Value="8,4,8,4" /> 
<Setter Property="HorizontalAlignment" Value="Left" /> 
<Setter Property="VerticalAlignment" Value="Center" /> 
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" /> 
<Setter Property="FontWeight" Value="Normal" /> 
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" /> 
<Setter Property="UseSystemFocusVisuals" Value="True" /> 
<Setter Property="Template"> 
    <Setter.Value> 
    <ControlTemplate TargetType="ToggleButton"> 
     <Grid x:Name="RootGrid" Background="{TemplateBinding Background}"> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="CommonStates"> 
      <VisualState x:Name="Normal"> 
       <Storyboard> 
       <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="PointerOver"> 
       <Storyboard> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" 
               Storyboard.TargetProperty="Background"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="BorderBrush"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                Storyboard.TargetProperty="Foreground"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="Pressed"> 
       <Storyboard> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" 
               Storyboard.TargetProperty="Background"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                Storyboard.TargetProperty="BorderBrush"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                Storyboard.TargetProperty="Foreground"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" /> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="Disabled"> 
       <Storyboard> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" 
               Storyboard.TargetProperty="Background"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="Foreground"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                Storyboard.TargetProperty="BorderBrush"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="Checked"> 
       <Storyboard> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" 
               Storyboard.TargetProperty="Background"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="Foreground"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltChromeWhiteBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="BorderBrush"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltTransparentBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="CheckedPointerOver"> 
       <Storyboard> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" 
               Storyboard.TargetProperty="Background"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="BorderBrush"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="Foreground"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltChromeWhiteBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="CheckedPressed"> 
       <Storyboard> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" 
               Storyboard.TargetProperty="Background"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 

       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="BorderBrush"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" /> 
       </ObjectAnimationUsingKeyFrames> 
       <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" /> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="CheckedDisabled"> 
       <Storyboard> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" 
               Storyboard.TargetProperty="Background"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="Foreground"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                Storyboard.TargetProperty="BorderBrush"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="Indeterminate"> 
       <Storyboard> 
       <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="IndeterminatePointerOver"> 
       <Storyboard> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" 
               Storyboard.TargetProperty="Background"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="BorderBrush"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                Storyboard.TargetProperty="Foreground"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="IndeterminatePressed"> 
       <Storyboard> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" 
               Storyboard.TargetProperty="Background"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                Storyboard.TargetProperty="BorderBrush"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                Storyboard.TargetProperty="Foreground"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" /> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="IndeterminateDisabled"> 
       <Storyboard> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" 
               Storyboard.TargetProperty="Background"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="Foreground"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                Storyboard.TargetProperty="BorderBrush"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 
     <ContentPresenter x:Name="ContentPresenter" 
          BorderBrush="{TemplateBinding BorderBrush}" 
          BorderThickness="{TemplateBinding BorderThickness}" 
          Content="{TemplateBinding Content}" 
          ContentTransitions="{TemplateBinding ContentTransitions}" 
          ContentTemplate="{TemplateBinding ContentTemplate}" 
          Padding="{TemplateBinding Padding}" 
          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" 
          AutomationProperties.AccessibilityView="Raw"/> 
     </Grid> 
    </ControlTemplate> 
    </Setter.Value> 
</Setter> 
</Style>

更新

私は@DarkTemplarの提案に基づいてチェック背景色を変更するために管理します。バインディング部分については、Custom Controlを作成していますが、Dependency Propertyは適用されません。私のXAMLで

public sealed class MyToggleButton : ToggleButton 
{ 
    public MyToggleButton() 
    { 
     this.DefaultStyleKey = typeof(MyToggleButton); 
    } 

    public Brush CheckedBackground 
    { 
     get { return (Brush)GetValue(CheckedBackgroundProperty); } 
     set { SetValue(CheckedBackgroundProperty, value); } 
    } 

    public static readonly DependencyProperty CheckedBackgroundProperty = 
     DependencyProperty.Register("CheckedBackground", typeof(Brush), typeof(MyToggleButton), new PropertyMetadata(Application.Current.Resources["ToggleButtonBackgroundChecked"]));

あなたはそれがチェックされている場合にのみ、背景を変更したいが、とき、それをデフォルトの色を維持したい場合は、私は私のStyle

<VisualState x:Name="Checked"> 
     <Storyboard> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
       <DiscreteObjectKeyFrame KeyTime="0"> 
        <DiscreteObjectKeyFrame.Value> 
         <SolidColorBrush Color="{Binding Path=CheckedBackground, RelativeSource={RelativeSource Mode=TemplatedParent}}"/> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
      </ObjectAnimationUsingKeyFrames> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
       <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundChecked}"/> 
      </ObjectAnimationUsingKeyFrames> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
       <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushChecked}"/> 
      </ObjectAnimationUsingKeyFrames> 
      <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
     </Storyboard> 
    </VisualState> 
    <VisualState x:Name="CheckedPointerOver"> 
     <Storyboard> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
       <DiscreteObjectKeyFrame KeyTime="0"> 
        <DiscreteObjectKeyFrame.Value> 
         <SolidColorBrush Color="{Binding Path=CheckedBackground, RelativeSource={RelativeSource Mode=TemplatedParent}}"/> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
      </ObjectAnimationUsingKeyFrames> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
       <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushCheckedPointerOver}"/> 
      </ObjectAnimationUsingKeyFrames> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
       <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundCheckedPointerOver}"/> 
      </ObjectAnimationUsingKeyFrames> 
      <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
     </Storyboard>

出典

2016-10-17 PutraKg

フィードバックに基づいて私はChecked状態Backgroundの色をバインドすることができました。

バインディングを設定するには、SolidColorBrushColorプロパティを使用しません。 DiscreteObjectKeyFrameプロパティを使用してください。だから私のStoryboardは

<VisualState x:Name="Checked"> 
     <Storyboard> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
       <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding Path=CheckedBackground, RelativeSource={RelativeSource Mode=TemplatedParent}, Mode=TwoWay}"/> 
      </ObjectAnimationUsingKeyFrames> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
       <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundChecked}"/> 
      </ObjectAnimationUsingKeyFrames> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
       <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushChecked}"/> 
      </ObjectAnimationUsingKeyFrames> 
      <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
     </Storyboard> 
    </VisualState> 
    <VisualState x:Name="CheckedPointerOver"> 
     <Storyboard> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
       <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding Path=CheckedBackground, RelativeSource={RelativeSource Mode=TemplatedParent}, Mode=TwoWay}"/> 
      </ObjectAnimationUsingKeyFrames> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
       <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushCheckedPointerOver}"/> 
      </ObjectAnimationUsingKeyFrames> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
       <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundCheckedPointerOver}"/> 
      </ObjectAnimationUsingKeyFrames> 
      <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
     </Storyboard> 
    </VisualState>

CheckedBackgroundになり、私の質問に示すように、以前の私のTemplated Controlで作成DependencyPropertyです。

出典

2016-10-19 08:31:27 PutraKg

に続いて

<cc:MyToggleButton x:Name="Adjustments" Content="Adjustments" CheckedBackground="Red" />

を持っていますチェックされていません。デフォルトテンプレートの下に変更してください

<VisualState x:Name="Checked"> 
    <Storyboard> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
      <DiscreteObjectKeyFrame KeyTime="0" Value="Green"/> 
     </ObjectAnimationUsingKeyFrames> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltChromeWhiteBrush}"/> 
     </ObjectAnimationUsingKeyFrames> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltTransparentBrush}"/> 
     </ObjectAnimationUsingKeyFrames> 
     <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
    </Storyboard> 
</VisualState>

出典

2016-10-17 14:24:46 AVK

私は実際に何をしたのですか？デフォルトカラーは透明になりました。 – PutraKg

'VisualState'と表示されているのは' Checked'だけですので、デフォルト状態はここにはありません。デフォルト状態が変更されているかどうかを確認しますか？または**あなたは**コピーを編集することができます**もう一度これを変更し、それが動作するかどうかを確認しますか？ – AVK

これは変更されていません。ここからデフォルトをコピーして貼り付けました。https://msdn.microsoft.com/en-us/library/windows/apps/mt299157.aspx – PutraKg

実際にトグルボタンの色を変更するには、XAMLの2つのビジュアルステートトリガー「Checked」と「CheckedPointerOver」を変更することを検討したい場合は、2つのトリガーが異なるオブジェクトやプロパティ"Checked"ビジュアルステートトリガーは "ContentPresenter"コントロールの "BorderBrush"プロパティを透明に設定し、 "Normal"ビジュアルステートは "ContentPresenter"コントロールには決して触れません。

<Style x:Key="ToggleButtonStyle1" TargetType="ToggleButton"> 
     <Setter Property="Background" Value="{ThemeResource ToggleButtonBackground}"/> 
     <Setter Property="Foreground" Value="{ThemeResource ToggleButtonForeground}"/> 
     <Setter Property="BorderBrush" Value="{ThemeResource ToggleButtonBorderBrush}"/> 
     <Setter Property="BorderThickness" Value="{ThemeResource ToggleButtonBorderThemeThickness}"/> 
     <Setter Property="Padding" Value="8,4,8,4"/> 
     <Setter Property="HorizontalAlignment" Value="Left"/> 
     <Setter Property="VerticalAlignment" Value="Center"/> 
     <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/> 
     <Setter Property="FontWeight" Value="Normal"/> 
     <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/> 
     <Setter Property="UseSystemFocusVisuals" Value="True"/> 
     <Setter Property="FocusVisualMargin" Value="-3"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="ToggleButton"> 
        <Grid x:Name="RootGrid" Background="{TemplateBinding Background}"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal"> 
            <Storyboard> 
             <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="PointerOver"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundPointerOver}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushPointerOver}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundPointerOver}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Pressed"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundPressed}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushPressed}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundPressed}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundDisabled}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundDisabled}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushDisabled}"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Checked"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
              <DiscreteObjectKeyFrame KeyTime="0"> 
               <DiscreteObjectKeyFrame.Value> 
                <SolidColorBrush Color="Green"/> 
               </DiscreteObjectKeyFrame.Value> 
              </DiscreteObjectKeyFrame> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundChecked}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushChecked}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="CheckedPointerOver"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
              <DiscreteObjectKeyFrame KeyTime="0"> 
               <DiscreteObjectKeyFrame.Value> 
                <SolidColorBrush Color="Green"/> 
               </DiscreteObjectKeyFrame.Value> 
              </DiscreteObjectKeyFrame> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushCheckedPointerOver}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundCheckedPointerOver}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="CheckedPressed"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundCheckedPressed}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundCheckedPressed}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushCheckedPressed}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="CheckedDisabled"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundCheckedDisabled}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundCheckedDisabled}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushCheckedDisabled}"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Indeterminate"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundIndeterminate}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundIndeterminate}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushIndeterminate}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="IndeterminatePointerOver"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundIndeterminatePointerOver}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushIndeterminatePointerOver}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundIndeterminatePointerOver}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="IndeterminatePressed"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundIndeterminatePressed}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushIndeterminatePressed}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundIndeterminatePressed}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="IndeterminateDisabled"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundIndeterminateDisabled}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundIndeterminateDisabled}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushIndeterminateDisabled}"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>

ちょうどあなたがバインドしたいリソースとの言葉「グリーン」を置き換えるバインドするには：

は「チェック」と「CheckedPointerOver」視覚的な状態は、このXAMLでトリガーを確認してください。

例：これで

<DiscreteObjectKeyFrame.Value> 
     <SolidColorBrush Color="Green"/> 
    </DiscreteObjectKeyFrame.Value>

：

は、この行を置き換える

<DiscreteObjectKeyFrame.Value> 
    <SolidColorBrush Color="{ThemeResource SystemChromeWhiteColor}"/> 
</DiscreteObjectKeyFrame.Value>

あなたが試すことができます別のオプションは、下のContentPresenterコントロールのBorderBrushプロパティを設定しようとすることです

「通常の」視覚状態トリガー：

<VisualState x:Name="Normal"> 
    <VisualState.Setters> 
     <Setter Target="ContentPresenter.(ContentPresenter.BorderBrush)" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/> 
    </VisualState.Setters>

出典

2016-10-17 16:15:11

ありがとう@Dark Templar。それはちょうどバインディング部分を動作させます。私は 'ToggleButton'のカスタムコントロールを作成したいのですが、私の' DependencyProperty'は適用されません。更新された質問を参照してください。ありがとう。 – PutraKg

ToggleButtonチェック状態の背景色を変更しましたUWP

答えて

関連する問題