Modifier la couleur d'arrière-plan de l'état coché ToggleButton UWP

Je souhaite changer la couleur ToggleButtonBackground lorsque IsChecked est true. J'ai essayé de changer le VisualStateChecked àModifier la couleur d'arrière-plan de l'état coché ToggleButton UWP

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

Mais cela fait le fond totalement transparent de l'état Normal. Je voudrais lier la couleur CheckedBackground en XAML. Comment puis-je faire cela?

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

Mise à jour

je parviens à changer la couleur de fond basé sur la suggestion Vérifié @DarkTemplar. Maintenant, pour la partie de liaison, je crée un Custom Control mais mon Dependency Property ne s'applique pas.

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"]));

Dans mon XAML je

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

Puis dans mon 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>

Source

2016-10-17 PutraKg

Basé sur les commentaires que j'ai réussi à lier la couleur Checked état Background.

Pour définir la liaison, je n'utilise pas la propriété SolidColorBrushColor. Utilisez simplement la propriété DiscreteObjectKeyFrame.Donc, mon Storyboard devient

<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 est le DependencyProperty créé plus tôt dans mon Templated Control comme indiqué dans ma question.

Source

2016-10-19 08:31:27 PutraKg

Si vous voulez changer l'arrière-plan que lorsqu'elle est cochée mais que vous souhaitez conserver la couleur par défaut lorsque il n'est pas coché, Modifier ci-dessous dans le modèle par défaut

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

Source

2016-10-17 14:24:46 AVK

Que ce que j'ai fait mais la couleur par défaut est devenue transparente. – PutraKg

Si vous voyez 'VisualState', c'est seulement pour' Checked' Donc votre état par défaut n'est pas ici. Vérifiez si votre état par défaut est modifié? ou Peut-être que vous pouvez ** Modifier une copie ** Encore une fois et changer juste cela et voir si cela fonctionne? – AVK

Ce n'est pas modifié. J'ai copié et collé le défaut d'ici https://msdn.microsoft.com/en-us/library/windows/apps/mt299157.aspx – PutraKg

En fait, pour changer la couleur cochée d'un bouton bascule, vous pouvez envisager de changer 2 déclencheurs d'état visuel, "Checked" et "CheckedPointerOver", dans le XAML vous avez montré ces 2 déclencheurs retournent différentes valeurs pour différents objets et propriétés par exemple le déclencheur d'état visuel "Vérifié" définit la propriété "BorderBrush" du contrôle "ContentPresenter" sur transparent et l'état visuel "Normal" ne touche jamais le contrôle "ContentPresenter", ce qui peut expliquer pourquoi il devient transparent.

vérifier l'état visuel « vérifié » et « CheckedPointerOver » déclenche dans ce XAML:

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

pour se lier remplacer juste le mot « vert » avec la ressource que vous souhaitez lier.

exemple:

remplacer cette ligne:

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

avec ceci:

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

Une autre option vous pouvez essayer est d'essayer de définir la propriété BorderBrush du contrôle ContentPresenter sous la Déclenchement de l'état visuel "normal":

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

Source

2016-10-17 16:15:11

Merci @ Tarkar. Cela fonctionne juste que la partie de liaison. Je veux o créer un contrôle personnalisé pour 'ToggleButton' mais mon' DependencyProperty' n'est pas appliqué. Voir ma question mise à jour. Merci. – PutraKg

Modifier la couleur d'arrière-plan de l'état coché ToggleButton UWP

Répondre

Questions connexes