Как изменить стиль кнопки для нажатого состояния?

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> 

Если вам это нужно -stay- изменить после нажатия до тех пор, пока нажата снова, то вам нужно будет заменить кнопку с 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> 

Если вы хотите, чтобы содержимое анимированные, как они делают этот переход, то я предлагаю использовать смесь для таргетинга показанных здесь триггеров и создания раскадровка, которая выполняет анимацию (ы), которой вы пользуетесь.

Answer 2

Идея состоит в том, чтобы иметь два изображения позади другого, поэтому, когда кнопка нажата, просто измените видимость изображения, чтобы сжать его при нажатии кнопки.

Вы можете сделать это, внеся изменения в визуальное состояние кнопки.

Из вашего сценария кажется, что вы ищете флажок. Это отображает разные изображения для проверенных состояний.