WPF ToggleButton后台问题

Question

当我将样式应用于ToggleButton来根据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-完整的WPF教程

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>

和组件：

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