Channging Template

Question

J'ai un bouton bascule sur lequel je veux utiliser deux modèles différents sur Checked et Unchecked State.

Lorsque le ToggleButton est clicked (IsChecked = True) Je veux utiliser modèle 1 et quand on clique dessus pour la deuxième fois que je veux utiliser le modèle 2.

Ca y est !!!

Comment puis-je faire ça? Devrais-je utiliser Event Trigger ou Trigger pour ça ???

Answer 1

Vous pouvez modifier les modèles d'un élément en les affectant par le biais d'un style plutôt que directement à l'élément. Dans notre style, nous pouvons assigner un déclencheur qui est déclenché lorsque la propriété IsChecked du ToggleButton est définie sur True/False, puis dans ce déclencheur, nous pouvons changer le modèle assigné. Un échantillon de style pour notre ToggleButton ressemblerait à ceci:

<ToggleButton Content="Toggle Me"> 
    <ToggleButton.Style> 
     <Style TargetType="{x:Type ToggleButton}"> 
      <Setter Property="Template" 
        Value="{StaticResource ToggleButtonUncheckedTemplate}" /> 
      <Style.Triggers> 
       <Trigger Property="IsChecked" 
         Value="True"> 
        <Setter Property="Template" 
          Value="{StaticResource ToggleButtonCheckedTemplate}" /> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </ToggleButton.Style> 
</ToggleButton> 

Les deux années StaticResource sont nos ControlTemplates prédéfinies. Alors que cela fonctionne, je recommande de faire les modifications nécessaires à l'intérieur du modèle, au lieu d'échanger complètement le ControlTemplate pour un autre.

Tout comme nous l'avons fait dans le style, nous pourrions créer un déclencheur à l'intérieur du ControlTemplate qui change ce qui est nécessaire:

 <ControlTemplate x:Key="ToggleButtonUncheckedTemplate" 
         TargetType="{x:Type ToggleButton}"> 
      <Grid SnapsToDevicePixels="False" 
        Background="Transparent"> 
       ... layout ... 
      </Grid> 

      <ControlTemplate.Triggers> 
       <Trigger Property="IsChecked" 
         Value="true"> 
        <Setter Property="Data" 
          TargetName="arrow" 
          Value="M 1,4 L 4,1 L 7,4" /> 
       </Trigger> 
       <Trigger Property="IsMouseOver" 
         Value="true"> 
        <Setter Property="Stroke" 
          TargetName="circle" 
          Value="#666" /> 
        <Setter Property="Stroke" 
          TargetName="arrow" 
          Value="#222" /> 
        <Setter Property="Visibility" 
          TargetName="shadow" 
          Value="Visible" /> 
       </Trigger> 
      </ControlTemplate.Triggers> 

     </ControlTemplate>