Utiliser ObjectAnimation pour changer l'image de ToggleButton en fonction de CheckState

Question

J'ai le code ci-dessous qui est censé changer l'image lorsque le ToggleButton est activé, mais malheureusement il ne fait rien. Des idées?

<Style x:Key="CustomButton" TargetType="ToggleButton"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="ToggleButton"> 
        <Grid> 
         <Ellipse HorizontalAlignment="Stretch" VerticalAlignment="Stretch" x:Name="CheckedImage" Visibility="Collapsed" > 
           <Ellipse.Fill> 
            <ImageBrush ImageSource="Checked.png" Stretch="UniformToFill"></ImageBrush> 
           </Ellipse.Fill> 
          </Ellipse> 
          <Ellipse HorizontalAlignment="Stretch" VerticalAlignment="Stretch" x:Name="UnCheckedImage" Visibility="Collapsed"> 
           <Ellipse.Fill> 
            <ImageBrush ImageSource="UnChecked.png" Stretch="UniformToFill"></ImageBrush> 
           </Ellipse.Fill> 
         </Ellipse> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CheckStates"> 
           <VisualState x:Name="Checked"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckedImage" Storyboard.TargetProperty="Visibility" Duration="0"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="UnChecked"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="UnCheckedImage" Storyboard.TargetProperty="Visibility" Duration="0"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="Cursor" Value="Hand" /> 
    </Style> 

Answer 1

Essayez de changer DiscreteObjectKeyFrame à: -

<DiscreteObjectKeyFrame KeyTime="0:0:0"> 
    <DiscreteObjectKeyFrame.Value> 
     <Visibility>Collapsed</Visibility> 
    </DiscreteObjectKeyFrame.Value> 
    </DiscreteObjectKeyFrame> 

J'ai trouvé l'analyseur à défaut lorsque le temps clé ne pas utiliser un format timespan. En outre, XamlParser ne sait pas que la valeur est de type Visibility et vous devez donc être explicite.

Answer 2

Edité pour vous:

<Style x:Key="CustomButton" TargetType="ToggleButton"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="ToggleButton"> 
        <Grid> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CheckStates"> 
           <VisualState x:Name="Checked"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="CheckedImage"> 
              <DiscreteObjectKeyFrame KeyTime="0"> 
               <DiscreteObjectKeyFrame.Value> 
                <Visibility>Visible</Visibility> 
               </DiscreteObjectKeyFrame.Value> 
              </DiscreteObjectKeyFrame> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="UnCheckedImage"> 
              <DiscreteObjectKeyFrame KeyTime="0"> 
               <DiscreteObjectKeyFrame.Value> 
                <Visibility>Collapsed</Visibility> 
               </DiscreteObjectKeyFrame.Value> 
              </DiscreteObjectKeyFrame> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="UnChecked"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="CheckedImage"> 
              <DiscreteObjectKeyFrame KeyTime="0"> 
               <DiscreteObjectKeyFrame.Value> 
                <Visibility>Collapsed</Visibility> 
               </DiscreteObjectKeyFrame.Value> 
              </DiscreteObjectKeyFrame> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="UnCheckedImage"> 
              <DiscreteObjectKeyFrame KeyTime="0"> 
               <DiscreteObjectKeyFrame.Value> 
                <Visibility>Visible</Visibility> 
               </DiscreteObjectKeyFrame.Value> 
              </DiscreteObjectKeyFrame> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Unchecked"/> 
           <VisualState x:Name="Indeterminate"/> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="CommonStates" ei:ExtendedVisualStateManager.UseFluidLayout="True"> 
           <VisualState x:Name="Normal"/> 
           <VisualState x:Name="MouseOver"/> 
           <VisualState x:Name="Pressed"/> 
           <VisualState x:Name="Disabled"/> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <VisualStateManager.CustomVisualStateManager> 
          <ei:ExtendedVisualStateManager/> 
         </VisualStateManager.CustomVisualStateManager> 
         <Ellipse HorizontalAlignment="Stretch" VerticalAlignment="Stretch" x:Name="CheckedImage" Visibility="Collapsed" > 
           <Ellipse.Fill> 
            <ImageBrush ImageSource="Checked.png" Stretch="UniformToFill"/> 
           </Ellipse.Fill> 
          </Ellipse> 
          <Ellipse HorizontalAlignment="Stretch" VerticalAlignment="Stretch" x:Name="UnCheckedImage"> 
           <Ellipse.Fill> 
            <ImageBrush ImageSource="UnChecked.png" Stretch="UniformToFill"/> 
           </Ellipse.Fill> 
         </Ellipse> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="Cursor" Value="Hand" /> 
    </Style>