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

Спасибо за ваш ответ, но работа dosen't – 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

ответ

Смежные вопросы