Question

当用户将鼠标悬停在按钮上时，我可以在XAML中更改按钮的图像：

<Page.Resources>
    <ImageBrush x:Key="troubleshooting_normal" ImageSource="/Images/troubleshooting_yellow.png" />
    <ImageBrush x:Key="troubleshooting_hover" ImageSource="/Images/troubleshooting_gray.png" />

<ControlTemplate TargetType="Button" x:Key="buttonTroubleshooting">
        <Grid Name="button" Background="{StaticResource troubleshooting_normal}">
            <ContentPresenter/>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="button" Property="Background" Value="{StaticResource troubleshooting_hover}" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Page.Resources>

<Button Name="ButtonTroubleShooting" Template="{StaticResource buttonTroubleshooting}" HorizontalAlignment="Left" Margin="287,109,0,0" VerticalAlignment="Top" Width="155" Height="155" Click="ButtonTroubleShooting_Click"/>

我想在用户点击按钮时添加第3张图片，如何修改上述图片？

Answer 1

根据IsPressed属性添加另一个触发器：

<Trigger Property="IsPressed" Value="True">
    <Setter TargetName="button" Property="Background" Value="{StaticResource troubleshooting_pressed}" />
</Trigger>

Answer 2

使用您自己的模板重新开始的问题是，您将错过按钮上设置的许多属性，使其看起来像某种方式。相反，如果你可以复制现有的按钮样式/模板，然后简单地覆盖你需要的东西，那就不会有点好处吗？你可以。

您只需右键点击按钮=＆gt;编辑syle =＆gt;编辑副本并按照提示操作。这会将所有按钮样式放入“资源”部分，您可以根据需要进行覆盖。无需重新开始。

这是我自动生成的内容，我只是进入并更改了鼠标图像，然后单击。

<UserControl.Resources>
<Style x:Key="FocusVisual">
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate>
                <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
<SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
<SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
<SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
    <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
    <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
    <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                    <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsDefaulted" Value="true">
                        <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background">
                            <Setter.Value>
                                <ImageBrush ImageSource="/V.Outlook;component/Assets/images/btn_welcome_button_hover.png" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background">
                            <Setter.Value>
                                <ImageBrush ImageSource="/V.Outlook;component/Assets/images/btn_welcome_button_pressed.png" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
                        <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

如何在xaml中单击时更改按钮图像

2 个答案: