如何更改按钮图像在XAML

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

我想补充一个第三图像，当用户点击按钮，我如何修改上面的操作？

Answer 1

只需添加另一种触发因素的基础上，IsPressed属性：

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

Answer 2

与新鲜的开始与自己的模板的问题是，你会错过很多正在上的按钮设置的属性使其看起来有某种特定的方式。相反，如果您可以复制现有的按钮样式/模板，然后简单地覆盖您所需的内容，那么这样做会不会很好？您可以。

你可以简单地右键点击你的按钮=>编辑syle =>编辑副本，并按照提示。这会将所有的按钮样式放入参考资料部分，并且可以根据需要进行覆盖。无需重新开始。

这是自动为我生成的内容，我只需进入并更改鼠标的图像并点击即可。

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