Как изменить изображение кнопки при нажатии на 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"/> 

Я хочу, чтобы добавить 3-ий файл, когда пользователь нажимает на кнопку, как мне изменить выше, чтобы сделать это?

Answer 1

Просто добавьте еще один триггер, основанный на IsPressed собственности:

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

Answer 2

Проблема с началом свежего с собственным шаблоном является то, что вы собираетесь пропустить много свойств, которые установлены на кнопке чтобы он выглядел определенным образом. Вместо этого, не было бы здорово, если бы вы могли скопировать существующий стиль/шаблон кнопки, а затем просто переопределить то, что вам нужно? Ты можешь.

Вы можете просто щелкнуть правой кнопкой мыши по кнопке => edit 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>