XAML 更改自定义WinUI3按钮的背景颜色

wwtsj6pe  于 2023-05-21  发布在  其他
关注(0)|答案(1)|浏览(242)

我在WinUI3应用程序中创建了一个自定义按钮组件。下面给出了相同的代码。

<Button
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Background="Transparent"
    BorderThickness="0"
    Width="{x:Bind Width}"
    Height="{x:Bind Height}">
    <StackPanel
        Orientation="Vertical"
        VerticalAlignment="Center"
        HorizontalAlignment="Center">
        <FontIcon
            VerticalAlignment="Center"
            FontFamily="{StaticResource SymbolThemeFontFamily}"
            Glyph="{x:Bind Glyph}"
            FontSize="{x:Bind IconSize}" />
        <TextBlock
            VerticalAlignment="Center"
            HorizontalAlignment="Center"
            Margin="0,10,0,0"
            Text="{x:Bind Label}"
            FontSize="{x:Bind FontSize}" />
    </StackPanel>
</Button>

默认情况下,它给出了一个非常浅的灰色背景,在页面的白色背景中几乎看不到。因此,我想改变的背景颜色的按钮时,光标悬停在它,或当按钮是在重点通过标签。Current Button on hover
我如何才能做到这一点?
我尝试了<ControlTemplate><VisualStateManager.VisualStateGroups><VisualState x:Name="PointerOver"><Storybaord>,但无法使其工作。
我希望它有我选择的颜色,这样它就更突出了。就像在默认的<AppBarButton>Default WinUI3 AppBarButton on hover中一样

xjreopfe

xjreopfe1#

DefaultButtonStyle(generic.xaml)中可以看到,VisualStatePointerOver将Button的Background更改为名为ButtonBackgroundPointerOver的ThemeResource。
(如果您不知道如何找到generic.xaml,请检查answer
您可以像这样覆盖ButtonBackgroundPointerOver

<Button>
    <Button.Resources>
        <Button.Resources>
            <SolidColorBrush
                x:Key="ButtonBackgroundPointerOver"
                Color="HotPink" />
        </Button.Resources>
    </Button.Resources>
</Button>

不幸的是,Button控件没有用于聚焦事件的VisualState。你可以做的是在代码隐藏中使用GotFocusLostFocus事件来更改Button的Background,但你也可以创建一个自定义控件:

AwesomeButton.cs

public class AwesomeButton : Button
{
    public static readonly DependencyProperty FocusedBackgroundProperty =
        DependencyProperty.Register(
            nameof(FocusedBackground),
            typeof(Brush),
            typeof(AwesomeButton),
            new PropertyMetadata(default));

    public AwesomeButton()
    {
        GotFocus += AwesomeButton_GotFocus;
        LostFocus += AwesomeButton_LostFocus;
    }

    public Brush FocusedBackground
    {
        get => (Brush)GetValue(FocusedBackgroundProperty);
        set => SetValue(FocusedBackgroundProperty, value);
    }

    private Brush? BackgroundBeforeGettingFocus { get; set; }

    private void AwesomeButton_GotFocus(object sender, RoutedEventArgs e)
    {
        BackgroundBeforeGettingFocus = Background;
        Background = FocusedBackground;
    }

    private void AwesomeButton_LostFocus(object sender, RoutedEventArgs e)
    {
        Background = BackgroundBeforeGettingFocus;
    }
}

然后像这样使用它:

<local:AwesomeButton
    x:Name="AwesomeButton"
    Width="{x:Bind Width}"
    Height="{x:Bind Height}"
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Background="Transparent"
    BorderThickness="0"
    FocusedBackground="LightGreen">
    <Button.Resources>
        <SolidColorBrush
            x:Key="ButtonBackgroundPointerOver"
            Color="HotPink" />
    </Button.Resources>
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Orientation="Vertical">
        <FontIcon
            VerticalAlignment="Center"
            FontFamily="{StaticResource SymbolThemeFontFamily}"
            FontSize="{x:Bind IconSize}"
            Glyph="{x:Bind Glyph}" />
        <TextBlock
            Margin="0,10,0,0"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            FontSize="{x:Bind FontSize}"
            Text="{x:Bind Label}" />
    </StackPanel>
</local:AwesomeButton>

相关问题