WPF ToggleButton背景問題

當我根據toggleButton狀態將樣式應用於ToggleButton以更改內容時，不顯示背景圖像。WPF 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>

來源

2016-11-30 ahdev

<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

來源

2016-11-30 12:42:05 Prajwal

謝謝您的回答，但這麼想的工作 – ahdev

發生了什麼？你應該得到一個紅色的背景。 – Prajwal

這不是問題，我需要將顏色過濾器應用到背景圖像，所以我需要重疊內容與背景以獲得所需的結果 – ahdev

我得到它做在我的風格進行一些修改和組件

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

來源

2016-11-30 14:55:04 ahdev

WPF ToggleButton背景問題

回答

相關問題