按钮背景颜色更改悬停/ PointerOver / MouseEnter-UWP

Question

如果仅输入以下部分，则可以看到自定义颜色已应用于整个按钮。

<Page.Resources>
    <Style x:Key="ButtonStyle" TargetType="Button">
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Background" Value="#3D8DEB" />       
    </Style>
</Page.Resources>
.
.
.

<Grid>
    <Button x:Name="btn1" ... Style="{StaticResource ButtonStyle}">
    </Button>
    .
    .
</Grid>

但是，使用下面的代码，我无法看到或单击按钮。 （类似于Visibility="Collapsed"）

<Style  x:Key="ButtonStyle" TargetType="Button">
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Background" Value="#3D8DEB" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup>
                            <VisualState x:Name="Normal">
                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ColorAnimation Duration="0"
                                        To="#25326E"
                                        Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
                                        Storyboard.TargetName="btn1" />
                                    <ColorAnimation Duration="0"
                                        To="#25326E"
                                        Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
                                        Storyboard.TargetName="btn2" />
                                    <ColorAnimation Duration="0"
                                        To="Red"
                                        Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
                                        Storyboard.TargetName="btn3_ONLY_different" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

当鼠标悬停时，我希望btn3为Background="Red"，而所有其他按钮均为Background="#25326E"]

有人知道我在做什么错吗？

任何帮助将不胜感激。

Answer 1

如果您打算自定义Button的外观，则在设置ContentPresenter时需要使用ControlTemplate来显示内容。

应该指出，Storyboard内部的Style不会影响其他控件。例如，Storyboard的内部btn1只能更改其自身的颜色，而不能更改外部btn2和btn3的颜色。如果要在悬停时更改所有按钮的颜色，则需要使用Code-behind并监听Button.PointerEntered事件，或者可以在页面级使用VisualStateManager。

这是一个完整的Button自定义控件模板，可以用作参考

<Style x:Key="PrimaryButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="#3D8DEB"/>
    <Setter Property="BackgroundSizing" Value="OuterBorderEdge"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Padding" Value="10,5"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="FontWeight" Value="Normal"/>
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
    <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
    <Setter Property="FocusVisualMargin" Value="-3"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BackgroundSizing="{TemplateBinding BackgroundSizing}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame Value="Red"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="#25326E"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <PointerDownThemeAnimation Storyboard.TargetName="ContentPresenter"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundDisabled}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushDisabled}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundDisabled}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </ContentPresenter>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

ContentPresenter出现时，您的控制内容将显示。

---

如果要在鼠标悬停时更改其他按钮的颜色，这可能很复杂，建议您了解以下知识：

• INotifyPropertyChanged
• VisualStateManager

这是执行此操作的代码：

ButtonsPage.xaml

<StackPanel>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualStateGroup.States>
                <VisualState>
                    <VisualState.StateTriggers>
                        <StateTrigger IsActive="{x:Bind IsHover, Mode=OneWay}"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="btn1.Background" Value="#25326E"/>
                        <Setter Target="btn2.Background" Value="#25326E"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup.States>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Button Content="First" x:Name="btn1"/>
    <Button Content="Second" x:Name="btn2"/>
    <Button Content="Third" x:Name="btn3" PointerEntered="btn3_PointerEntered" PointerExited="btn3_PointerExited"
            Style="{StaticResource PrimaryButtonStyle}"/>
</StackPanel>

ButtonsPage.xaml.cs

public sealed partial class ButtonsPage : Page, INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    public void OnProeprtyChnaged([CallerMemberName]string propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    private bool _isHover;

    public bool IsHover
    {
        get => _isHover;
        set 
        { 
            _isHover = value;
            OnProeprtyChnaged();
        }
    }
    public ButtonsPage()
    {
        this.InitializeComponent();
    }

    private void btn3_PointerEntered(object sender, PointerRoutedEventArgs e)
    {
        IsHover = true;
    }

    private void btn3_PointerExited(object sender, PointerRoutedEventArgs e)
    {
        IsHover = false;
    }
}