2009-06-05 1 views
0

私は、CheckedとUncheckedの2つの異なるテンプレートを使用したいトグルボタンを持っています。チャニングテンプレート

トグルボタンがクリック(にisChecked = TRUE)それはそれだ、私はテンプレート2

を使用する2番目の時間のためにクリックされたとき、私は、テンプレート1を使用したいとです!

どうすればいいですか?私はそれのためのイベントトリガーまたはトリガーを使用する必要がありますか?

答えて

1

エレメント上のテンプレートを直接変更するのではなく、スタイルを使用して変更することができます。私たちのスタイルでは、ToggleButtonのIsCheckedプロパティがTrue/Falseに設定されたときに起動されるトリガーを割り当てることができ、そのトリガー内で割り当てられたテンプレートを変更できます。私たちのトグルボタンのサンプルスタイルは次のようになります。

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

2 StaticResourceの私たちの定義済みのControlTemplatesです。これがうまくいく間に、私はテンプレート内で必要な変更を行うだけで、ControlTemplateを別のテンプレートに完全に入れ替えるのではなく、

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

は、私たちのスタイルで行ったように、我々は必要なものに変更するControlTemplate内のトリガーを作成することができます