如何更改按下状态的按钮样式？

Question

我有一个按钮样式。

 <Style x:Key="btnBackStyle" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Image   Source="/Assets/Icons/ic_arrow_back_white_48dp.png"  Margin="8"/>
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"  
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                          Content=""/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

当用户单击它时，我需要图像是不同的图像，当他再次单击时，图像需要再次成为第一个图像。由于我在项目中的多个地方使用这种样式，我不想使用 C# 代码，是否可以通过 XAMl 代码进行设置？

我用触发器尝试了以下操作

<ControlTemplate.Triggers>

   <Trigger Property="IsPressed" Value="True">
        <Setter Property="Source" Value="/Assets/Icons/ic_arrow_back_blue_48dp.png"  />
   </Trigger>

 </ControlTemplate.Triggers>

我也收到了错误

在“ControlTemplate”类型中找不到可附加属性“触发器”

Answer 1

如果您只需要在按下时更改图像（并且按下时，我的意思是您实际上是用鼠标/手指/笔按下它），那么这样做：

<ControlTemplate TargetType="Button">
    <Grid>
        <Image x:Name="ImageOne"></Image>
        <Image x:Name="ImageTwo"></Image>
        <ContentPresenter></ContentPresenter>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsPressed" Value="False">
            <Setter TargetName="ImageOne" Property="Visibility" Value="Visible"></Setter>
            <Setter TargetName="ImageTwo" Property="Visibility" Value="Collapsed"></Setter>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter TargetName="ImageOne" Property="Visibility" Value="Collapsed"></Setter>
            <Setter TargetName="ImageTwo" Property="Visibility" Value="Visible"></Setter>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

如果您需要它在按下后一直保持更改直到再次按下，那么您需要将 Button 替换为 ToggleButton 并将此模板提供给它：

<ControlTemplate TargetType="ToggleButton">
    <Grid>
        <Image x:Name="ImageOne"></Image>
        <Image x:Name="ImageTwo"></Image>
        <ContentPresenter></ContentPresenter>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsChecked" Value="False">
            <Setter TargetName="ImageOne" Property="Visibility" Value="Visible"></Setter>
            <Setter TargetName="ImageTwo" Property="Visibility" Value="Collapsed"></Setter>
        </Trigger>
        <Trigger Property="IsChecked" Value="True">
            <Setter TargetName="ImageOne" Property="Visibility" Value="Collapsed"></Setter>
            <Setter TargetName="ImageTwo" Property="Visibility" Value="Visible"></Setter>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

如果您希望内容在进行此转换时具有动画效果，那么我建议使用 blend 来定位此处显示的触发器并创建一个故事板来执行您所追求的动画。

Answer 2

这个想法是让两个图像一个接一个，所以当按下按钮时，只需将图像的可见性更改为按下按钮时折叠。

您可以通过更改按钮的视觉状态来做到这一点。

从您的场景看来，您正在寻找复选框。这会为选中的状态显示不同的图像。