Comment voulez-vous modifier l'arrière-plan pour un Bouton de la Souris dans WPF?

Toutes les réponses jusqu'à présent sont complètement remplacer le bouton par défaut de comportement avec quelque chose d'autre. Cependant, à mon humble avis il est utile et important de comprendre qu'il est possible de changer juste la partie que vous vous souciez d', par l'édition de l'existant, le modèle par défaut pour un élément XAML.

Dans le cas de traiter avec l'effet hover sur un WPF bouton, le changement dans l'apparence, dans un WPF Button élément est causée par un Trigger dans le style par défaut de la Button, qui est basée sur la IsMouseOver de propriété et fixe le Background et BorderBrush propriétés de haut niveau Border élément dans le modèle de contrôle. Le Button de l'élément d'arrière-plan est en dessous de la Border de l'élément d'arrière-plan, de sorte que la modification de la Button.Background propriété n'empêche pas le hover effet d'être vu.

Avec un peu d'effort, vous pouvez remplacer ce comportement avec votre propre setter, mais parce que l'élément que vous devez affecter est dans le modèle et ne sont pas directement accessibles dans votre XAML, cette approche serait difficile et à mon humble avis trop complexe.

Une autre option serait d'utiliser le graphique comme Content pour la Button plutôt que de la Background. Si vous avez besoin de plus de contenu sur le graphique, vous pouvez les combiner avec un Grid que l'objet de plus haut niveau dans le contenu.

Toutefois, si vous avez littéralement veux juste désactiver l'effet hover entièrement (plutôt que de les cacher), vous pouvez utiliser Visual Studio Concepteur XAML:

1. Lors de l'édition de votre XAML, sélectionnez le "Design" onglet.
2. Dans le "Design" onglet, de trouver le bouton pour lequel vous souhaitez désactiver l'effet.
3. Droit-cliquez sur ce bouton, et choisissez "Modèle d'Édition/Éditer une Copie...". Sélectionnez dans l'invite à vous rendre où vous voulez que le nouveau modèle de ressources pour être placé. Ce semble ne rien faire, mais en fait, le Concepteur aura ajouté de nouvelles ressources, où vous avez dit il, et de la modification de votre bouton de l'élément de référence le style qui utilise ces ressources comme le bouton de modèle.
4. Maintenant, vous pouvez aller la modifier. La chose la plus simple est de supprimer ou commentaires (par exemple: Ctrl+E, C) le <Trigger Property="IsMouseOver" Value="true">...</Trigger> élément. Bien sûr, vous pouvez modifier le modèle que vous voulez à ce point.

Lorsque vous avez terminé, le bouton style de ressembler à quelque chose comme ceci:

<p: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>
</p: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"/>
<p: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" 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>
</ControlTemplate>
</Setter.Value>
</Setter>
</p:Style>

(Remarque: vous pouvez omettre le p: espace de noms XML qualifications dans le code...je vous les fournir ici seulement parce que le Dépassement de Pile XML formateur de code devient confus par <Style/> éléments qui n'ont pas de nom complet avec espace de noms XML.)

Si vous souhaitez appliquer le même style à d'autres boutons, vous pouvez faire un clic droit et de choisir "Modifier le Modèle/Appliquer la Ressource" et sélectionnez le style que vous venez d'ajouter pour le premier bouton. Vous pouvez même faire style que le style par défaut pour tous les boutons, utilisant les techniques de l'application d'un style par défaut pour les éléments dans le code XAML.

Veux juste partager mon style de bouton de mon ResourceDictionary que j'ai utilisé.
Vous pouvez changer librement le onHover fond dans le style des déclencheurs.
"ColorAnimation À = *de votre choix BG(j'.e #FFCEF7A0)". Le bouton BG sera également automatiquement revenir à son origine BG après le passage de la souris de l'état.Vous pouvez même définir la façon dont rapidement la transition.

Dictionnaire De Ressources

<Style x:Key="Flat_Button" TargetType="{x:Type Button}">
<Setter Property="Width" Value="100"/>
<Setter Property="Height" Value="50"/>
<Setter Property="Margin" Value="2"/>
<Setter Property="FontFamily" Value="Arial Narrow"/>
<Setter Property="FontSize" Value="12px"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Opacity="1" Color="White"/>
</Setter.Value>
</Setter>
<Setter Property="Background" >
<Setter.Value>
<SolidColorBrush Opacity="1" Color="#28C2FF" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border"
SnapsToDevicePixels="True"
BorderThickness="1"
Padding="4,2"
BorderBrush="Gray"
CornerRadius="3"
Background="{TemplateBinding Background}">
<Grid>
<ContentPresenter 
Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="#D2F898"
Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)" 
FillBehavior="HoldEnd" Duration="0:0:0.25" AutoReverse="False" RepeatBehavior="1x"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)" 
FillBehavior="HoldEnd" Duration="0:0:0.25" AutoReverse="False" RepeatBehavior="1x"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>

tout ce que vous avez à faire est d'appeler le style.

Exemple De Mise En Œuvre

<Button Style="{StaticResource Flat_Button}" Height="Auto"Width="Auto">  
<StackPanel>
<TextBlock Text="SAVE" FontFamily="Arial" FontSize="10.667"/>
</StackPanel>
</Button>

Pour changer de style de bouton

1er: définir les styles de ressource

<Window.Resources>
<Style x:Key="OvergroundIn" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="#FF16832F">
<ContentPresenter TextBlock.Foreground="White" TextBlock.TextAlignment="Center" Margin="0,8,0,0" ></ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="#FF06731F">
<ContentPresenter TextBlock.Foreground="White" TextBlock.TextAlignment="Center" Margin="0,8,0,0" ></ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="OvergroundOut" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="#FFF35E5E">
<ContentPresenter TextBlock.Foreground="White" TextBlock.TextAlignment="Center" Margin="0,8,0,0" ></ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="#FFE34E4E">
<ContentPresenter TextBlock.Foreground="White" TextBlock.TextAlignment="Center" Margin="0,8,0,0" ></ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>

2ème bouton définir le code

                           <Border Grid.Column="2" BorderBrush="LightGray" BorderThickness="2" CornerRadius="3" Margin="2,2,2,2"  >
<Button Name="btnFichar" BorderThickness="0" Click="BtnFichar_Click">
<Button.Content>
<Grid>
<TextBlock Margin="0,7,0,7" TextAlignment="Center">Fichar</TextBlock> 
</Grid>
</Button.Content>
</Button>
</Border>

3ème code derrière

    public void ShowStatus()
{
switch (((MainDto)this.DataContext).State)
{
case State.IN:
this.btnFichar.BorderBrush = new SolidColorBrush(Color.FromRgb(243, 94, 94));
this.btnFichar.Style = Resources["OvergroundIn"] as Style;
this.btnFichar.Content = "Fichar Salida";
break;
case State.OUT:
this.btnFichar.BorderBrush = new SolidColorBrush(Color.FromRgb(76, 106, 83));
this.btnFichar.Style = Resources["OvergroundOut"] as Style;
this.btnFichar.Content = "Fichar Entrada";
break;
}
}