Ajouter une couleur personnalisée à ToggleButton IsChecked = false

Question

J'ai donc ce style:

<Style x:Key="AnimatedSwitch" TargetType="{x:Type ToggleButton}"> 
      <Setter Property="Foreground" Value="Black" /> 
      <Setter Property="Background" Value="Crimson" /> 
      <Setter Property="BorderBrush" Value="#EAEAEB" /> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="ToggleButton"> 
         <Viewbox Stretch="Uniform"> 
          <Canvas Name="Layer_1" Width="20" Height="20" Canvas.Left="10" Canvas.Top="0"> 
           <Ellipse Canvas.Left="0" Width="20" Height="20" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="0.5"/> 
           <Ellipse Canvas.Left="15" Width="20" Height="20" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="0.5"/> 
           <Border Canvas.Left="10" Width="15" Height="20" Name="rect416927" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0.5,0,0.5"/> 
           <Ellipse x:Name="ellipse" Canvas.Left="0" Width="20" Height="20" Fill="White" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="0.3"> 
            <Ellipse.RenderTransform> 
             <TranslateTransform X="0" Y="0" /> 
            </Ellipse.RenderTransform> 
            <Ellipse.BitmapEffect> 
             <DropShadowBitmapEffect Softness="0.1" ShadowDepth="0.7" Direction="270" Color="#BBBBBB"/> 
            </Ellipse.BitmapEffect> 
           </Ellipse> 
          </Canvas> 
         </Viewbox> 
         <ControlTemplate.Triggers> 
          <Trigger Property="IsChecked" Value="True" > 
           <Trigger.EnterActions> 
            <BeginStoryboard> 
             <Storyboard> 
              <ColorAnimation Storyboard.TargetProperty="Background.Color" To="LightSeaGreen" Duration="0:0:0.2" /> 
              <ColorAnimation Storyboard.TargetProperty="BorderBrush.Color" To="LightSeaGreen" Duration="0:0:0.2" /> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ellipse"> 
               <SplineDoubleKeyFrame KeyTime="0" Value="0"/> 
               <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="15" KeySpline="0, 1, 0.6, 1"/> 
              </DoubleAnimationUsingKeyFrames> 
             </Storyboard> 
            </BeginStoryboard> 
           </Trigger.EnterActions> 
           <Trigger.ExitActions> 
            <BeginStoryboard> 
             <Storyboard> 
              <ColorAnimation Storyboard.TargetProperty="Background.Color" To="#FAFAFB" Duration="0:0:0.2" /> 
              <ColorAnimation Storyboard.TargetProperty="BorderBrush.Color" To="#FAFAFB" Duration="0:0:0.2" /> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ellipse"> 
               <SplineDoubleKeyFrame KeyTime="0" Value="15"/> 
               <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="0" KeySpline="0, 0.5, 0.5, 1"/> 
              </DoubleAnimationUsingKeyFrames> 
             </Storyboard> 
            </BeginStoryboard> 
           </Trigger.ExitActions> 
          </Trigger> 

         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

J'ai changé la couleur quand IsChecked = True (couleur LightSeaGreen) et je dupliqués cela pour IsChecked = False-Red couleur:

<Trigger Property="IsChecked" Value="False" > 
    <Trigger.EnterActions> 
     <BeginStoryboard> 
      <Storyboard> 
       <ColorAnimation Storyboard.TargetProperty="Background.Color" To="Red" Duration="0:0:0.2" /> 
       <ColorAnimation Storyboard.TargetProperty="BorderBrush.Color" To="Red" Duration="0:0:0.2" /> 
       <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ellipse"> 
        <SplineDoubleKeyFrame KeyTime="0" Value="0"/> 
        <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="15" KeySpline="0, 1, 0.6, 1"/> 
       </DoubleAnimationUsingKeyFrames> 
      </Storyboard> 
     </BeginStoryboard> 
    </Trigger.EnterActions> 
    <Trigger.ExitActions> 
     <BeginStoryboard> 
      <Storyboard> 
       <ColorAnimation Storyboard.TargetProperty="Background.Color" To="#FAFAFB" Duration="0:0:0.2" /> 
       <ColorAnimation Storyboard.TargetProperty="BorderBrush.Color" To="#FAFAFB" Duration="0:0:0.2" /> 
       <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ellipse"> 
        <SplineDoubleKeyFrame KeyTime="0" Value="15"/> 
        <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="0" KeySpline="0, 0.5, 0.5, 1"/> 
       </DoubleAnimationUsingKeyFrames> 
      </Storyboard> 
     </BeginStoryboard> 
    </Trigger.ExitActions> 
</Trigger> 

Donc mon problème est que, après mon ToggleButton est checked il devient Red au lieu de LightSeaGreen et lorsqu'il n'est pas coché il devient White dans lieu de Red. Ce hapenning n'ajouter après cette IsChecked = False

Answer 1

Votre question est: ces lignes

<ColorAnimation Storyboard.TargetProperty="Background.Color" To="#FAFAFB" Duration="0:0:0.2" /> 
<ColorAnimation Storyboard.TargetProperty="BorderBrush.Color" To="#FAFAFB" Duration="0:0:0.2" /> 

Vous devez définir dans les ExitActions le To-Crimson à nouveau et il devrait fonctionner correctement