When I apply a style to ToggleButton for changing the content depending on the toggleButton state, the background image is not shown.
The idea is that I have an image, and when it's clicked I want to add a color filter to the image.
<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>
<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>
You will have to use DataTrigger
.
For usage of Trigger
, DataTrigger
and EventTrigger
Please refer this tutorial.
Trigger, DataTrigger & EventTrigger - The complete WPF tutorial
i get it working by doing some modifications in my style and components
<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>
and the 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.