Le bouton UWP change de couleur lorsque la souris survole
J'essaie de créer un bouton UWP qui changera la couleur d'arrière-plan lorsque le pointeur de la souris survolera. Le problème que j'ai, c'est que par défaut, il semble déjà le faire, mais pas à la couleur que je veux. Lorsque je survole mon bouton, qui est rouge, il devient gris par défaut, puis revient lorsque je souris. J'ai écrit du code en C # pour essayer de le faire virer au bleu lorsque je le survole
private void button_PointerEntered_1(object sender, PointerRoutedEventArgs e)
{
button.Background = new SolidColorBrush(Windows.UI.Color.FromArgb(255, 0, 0, 255));
}
private void button_PointerExited_1(object sender, PointerRoutedEventArgs e)
{
button.Background = new SolidColorBrush(Windows.UI.Color.FromArgb(255, 255, 0, 0));
}
Voici le code XAML du bouton
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button x:Name="button"
Content="Button"
HorizontalAlignment="Left"
Margin="417,188,0,0"
VerticalAlignment="Top"
Height="230"
Width="461"
FontSize="72"
ManipulationMode="None"
PointerEntered="button_PointerEntered_1"
PointerExited="button_PointerExited_1">
<Button.Foreground>
<SolidColorBrush Color="Black"/>
</Button.Foreground>
<Button.Background>
<SolidColorBrush Color="Red"/>
</Button.Background>
</Button>
</Grid>
RÉPONSE MISE À JOUR 2018
Le moyen le plus simple d'y parvenir est de remplacer les ressources dans les dictionnaires de votre bouton (pour les thèmes que vous souhaitez)
Vous pouvez modifier la valeur des clés de ressource nommées Button<Property>PointerOver pour que l'effet fonctionne:
<Button Background="Red" Foreground="Black"> <!-- These are only applied when your button is not being hovered-->
<Button.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Dark">
<SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="Red"/>
<SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="Black"/>
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="Red"/>
<SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="Black"/>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Button.Resources>
</Button>
Voici un exemple sur la façon dont cela est fait dans la documentation officielle de Microsoft pour le résultat suivant:
Et voici la liste des ressources que vous pouvez remplacer dans un bouton
Vous devez remplacer le style Button
<Page.Resources>
<Style TargetType="Button" x:Key="CustomButtonStyle">
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
<Setter Property="Padding" Value="8,4,8,4" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid"
Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="Orange" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
x:Name="gridRoot">
<Button Content="stackoverflow"
Style="{StaticResource CustomButtonStyle}"/>
</Grid>
Regardez l'état PointerOver et comment je configure la propriété Background.
Vous pouvez faire glisser un bouton vers votre grille et cliquer dessus avec le bouton gauche de la souris pour sélectionner l'élément à modifier. Ensuite, vous verrez le style par défaut comme réponse @Andrii.Si vous souhaitez changer la souris sur la couleur et vous pouvez changer le code <VisualState x:Name="Pressed">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="The new Color" />
Vous pouvez changer le The new Color Comme couleur.