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

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>

我也遇到了错误

The attachable property 'Triggers' was not found in type 'ControlTemplate'

Answer 1

我们的想法是让两张图片一前一后，所以当按下按钮时，只需将图片的可见性更改为按下按钮时折叠。

您可以通过更改按钮的视觉状态来实现。

从您的情况看来，您正在寻找复选框。显示选中状态的不同图像。

Answer 2

如果您只需要在按下时更改图像（按下时，我的意思是您实际上是用 mouse/finger/pen 按下它），那么这样做：

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

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

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

How to change button style for pressed state?

xaml

windows-phone-8