WPF ToggleButton背景の問題

Question

トグルボタンの状態に応じてコンテンツを変更するためのスタイルをToggleButtonに適用すると、背景イメージは表示されません。

アイデアはイメージがあり、クリックするとイメージにカラーフィルタを追加したいと考えています。

<Page.Resources> 
     <Style TargetType="{x:Type ToggleButton}" x:Key="tgStyle"> 
      <Setter Property="OverridesDefaultStyle" Value="True"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type ButtonBase}"> 
         <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
         <ControlTemplate.Triggers> 
          <Trigger Property="Button.IsDefaulted" Value="True"/> 
          <Trigger Property="IsMouseOver" Value="True"/> 
          <Trigger Property="IsPressed" Value="True"/> 
          <Trigger Property="ToggleButton.IsChecked" Value="True"/> 
          <Trigger Property="IsEnabled" Value="False"> 
           <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="#55838383"/> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
      <Setter Property="Content"> 
       <Setter.Value> 
        <Border BorderThickness="0" > 
         <Rectangle Fill="#50A52A2A" Width="30" Height="30" /> 
        </Border> 
       </Setter.Value> 
      </Setter> 
      <Style.Triggers> 
       <Trigger Property="IsChecked" Value="True"> 
        <Setter Property="Content"> 
         <Setter.Value> 
          <Border BorderThickness="0" > 
           <Rectangle Fill="#55FF0000" Width="30" Height="30" /> 
          </Border> 
         </Setter.Value> 
        </Setter> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </Page.Resources> 
<StackPanel> 
    <ToggleButton Width="30" Height="30" Style="{StaticResource ResourceKey=tgStyle}"> 
       <ToggleButton.Background> 
        <ImageBrush ImageSource="Resources/bg_cig.jpg" Stretch="UniformToFill"/> 
       </ToggleButton.Background> 
      </ToggleButton> 
    </StackPanel> 

Answer 1

<DataTrigger Binding="{Binding IsChecked}" Value="True"> 
    <Setter Property="Content"> 
     <Setter.Value> 
      <Border BorderThickness="0" > 
       <Rectangle Fill="#55FF0000" Width="30" Height="30" /> 
      </Border> 
     </Setter.Value> 
    </Setter> 
</DataTrigger> 

あなたはDataTriggerを使用する必要があります。

Triggerの場合、DataTriggerおよびEventTriggerこのチュートリアルを参照してください。

Trigger, DataTrigger & EventTrigger - The complete WPF tutorial

Answer 2

私はそれが私のスタイルとコンポーネント

<Style x:Key="myToggleButton" TargetType="{x:Type ToggleButton}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate> 
         <Border x:Name="outer" 
     BorderBrush="Transparent" 
     BorderThickness="0" 
     Opacity=".5" 
     Background="Transparent"/> 

         <ControlTemplate.Triggers> 
          <Trigger Property="ToggleButton.IsChecked" Value="True"> 
           <Setter TargetName="outer" Property="Background" Value="#50F0"/> 
           <Setter TargetName="outer" Property="BorderBrush" Value="Transparent"/> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

とcompenentsでいくつかの変更を行うことで作業を取得：

<Grid HorizontalAlignment="Center"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition/> 
      <ColumnDefinition/> 
     </Grid.ColumnDefinitions> 
     <Image Source="Resources/bg_cig.jpg" Stretch="UniformToFill"/> 
     <ToggleButton Style="{StaticResource ResourceKey=myToggleButton}"/> 
     <Image Source="Resources/bg_cig.jpg" Stretch="UniformToFill" Grid.Column="1"/> 
     <ToggleButton Style="{StaticResource ResourceKey=myToggleButton}" Grid.Column="1"/> 
    </Grid>