Изменение шаблона кнопки XAML, когда курсор мыши над ним

Question

У меня есть XAML ResourceDictionary, который я пытаюсь определить согласованный дизайн для всех кнопок в моей программе.

мне удалось сделать единый дизайн для них, с этим кодом:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <Style TargetType="{x:Type Button}"> 
     <Setter Property="OverridesDefaultStyle" Value="True" /> 
     <Setter Property="SnapsToDevicePixels" Value="True" /> 
     <Setter Property="Foreground" Value="MidnightBlue" /> 
     <Setter Property="Background" Value="White" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate x:Name="tmpltButton"> 
        <Grid> 
         <Border x:Name="ButtonBorder" 
          CornerRadius="7,7,7,7" 
          BorderBrush="MidnightBlue" 
          BorderThickness="2"> 
         </Border> 

         <ContentPresenter x:Name="ButtonContent" 
          Content="{Binding Path=Content, 
          RelativeSource={RelativeSource TemplatedParent}}" 
          HorizontalAlignment="center" 
          VerticalAlignment="center"> 
         </ContentPresenter> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</ResourceDictionary> 

Но удаляется поведение по умолчанию, когда пользователь Clik кнопку или поставить его мыши над ним. Несмотря на все мои усилия, чтобы найти способ вернуть его, я не могу найти способ.

Как я могу изменить дизайн кнопок, когда мышь над ним?

Answer 1

Вам не хватает Trigger Недвижимость ControlTemplate. Просто поместите его в элемент tmpltButton. Вот по умолчанию один:

<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" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/> 
     <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/> 
    </Trigger> 
    <Trigger Property="IsPressed" Value="true"> 
     <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/> 
     <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/> 
    </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> 

Однако, если вы хотите, чтобы стиль какого-либо компонент, я предлагаю правую кнопку мыши компонент в режиме конструктора, а затем нажмите Edit Template > Edit a copy, так что вы начинаете укладки его от царапин.

Ради полноты, как сказал Майк, Microsoft предлагает Expression Blend, который является инструментом, входящим в комплект Visual Studio. Он позволяет гораздо больше возможностей дизайна и, конечно же, заслуживает внимания.

Answer 2

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

Чтобы изменить цвет фона, вам нужно установить триггеры стиля на кнопке, а затем использовать привязку шаблона в шаблоне управления для установки фона.

Вот простой пример, когда я сделал фон кнопки разного цвета для 3 ситуаций - IsPressed, MouseOver = True и MouseOver = False:

<Style TargetType="{x:Type Button}"> 
    <Style.Triggers> 
     <Trigger Property="IsMouseOver" Value="True"> 
      <Setter Property="Background" Value="Pink"/> 
     </Trigger> 
     <Trigger Property="IsMouseOver" Value="False"> 
      <Setter Property="Background" Value="Orange"/> 
     </Trigger> 
     <Trigger Property="IsPressed" Value="True"> 
      <Setter Property="Background" Value="IndianRed"/> 
     </Trigger> 
    </Style.Triggers> 

    <Setter Property="SnapsToDevicePixels" Value="True" /> 
    <Setter Property="Foreground" Value="MidnightBlue" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate x:Name="tmpltButton"> 
       <Grid Background="{TemplateBinding Background}"> 
        <Border x:Name="ButtonBorder" CornerRadius="7,7,7,7" BorderBrush="MidnightBlue" BorderThickness="2"/> 
        <ContentPresenter x:Name="ButtonContent" Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" 
             HorizontalAlignment="Center" VerticalAlignment="Center"/> 

       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>