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>

如果您需要将它更改为按住，直到再次按下，那么您需要使用ToggleButton替换Button并将其输入此模板：

<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

我们的想法是将两个图像放在另一个图像之后，因此当按下按钮时，只需在按下按钮时更改图像的可见性即可。

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

从您的方案中看来，您正在寻找复选框。这会显示已检查状态的不同图像。

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

2 个答案: