WinUI3中如何设置不同的选择、悬停、点击按钮颜色

Question

我有一个问题，我是 WinUI 的新手，而且我过去没有使用过 WPF。在我的测试应用程序中，我想创建包含两个按钮的按钮组，该组允许您仅选择其中一个。主要目标是更改按钮背景，这很容易。

xaml：

<Button
    Grid.Row="1"
    Grid.Column="0"
    Height="40"
    HorizontalAlignment="Stretch"
    Content="PatientIn"
    x:Name="PatientIn"
    Click="buttonsPatient_click" />

<Button Grid.Row="1"
    Grid.Column="2"
    Height="40"
    HorizontalAlignment="Stretch"
    Content="PatientOut"
    x:Name="PatientOut"
    Click="buttonsPatient_click" />

cs：

private void ResetButtons2()
{
    PatientIn.Background = this.defaultBrush;
    PatientOut.Background = this.defaultBrush;
    PatientIn.Foreground = new SolidColorBrush(Colors.Black);
    PatientOut.Foreground = new SolidColorBrush(Colors.Black);
}

private void buttonsPatient_click(object sender, RoutedEventArgs e)
{
    ResetButtons2();
    ((Button)sender).Background = new SolidColorBrush(Colors.LightSeaGreen);
    ((Button)sender).Foreground = new SolidColorBrush(Colors.White);
}

但现在很长一段时间我都停留在风格配置上。我找到了在按住指针时更改悬停（指针焦点）和其他瞬间背景颜色的方法。我坚持这一点：

xaml：

<Button
    Style="{StaticResource onHoverStyle}"
    Grid.Row="0"
    Grid.Column="0"
    Height="40"
    HorizontalAlignment="Stretch"
    Content="InRegion"
    x:Name="InRegion"
    Click="buttonsRegion_click" />

<Button
    Style="{StaticResource onHoverStyle}"
    Grid.Row="0"
    Grid.Column="2"
    Height="40"
    HorizontalAlignment="Stretch"
    Content="OutRegion"
    x:Name="OutRegion"
    Click="buttonsRegion_click" />

风格：

<Style x:Key="onHoverStyle"
       BasedOn="{StaticResource DefaultButtonStyle}"
       TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
                    <Border BorderThickness="1"
                            BorderBrush="LightGray"
                            CornerRadius="3">
                        <Rectangle x:Name="ButtonBase"
                                   Fill="#fbfbfb" />
                    </Border>
                    <ContentPresenter HorizontalAlignment="Center"
                                      VerticalAlignment="Center" />
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBase"
                                                                   Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="yellow" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBase"
                                                                   Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="ForestGreen" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBase"
                                                                   Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="DarkOliveGreen" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBase"
                                                                   Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="Black" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

与上面相同的 .cs 文件，我尝试创建自定义类以将发送者对象转换为不同类型，但遗憾的是没有工作..

请注意，这些是不同的按钮，来自两个不同的组。但我的目标是用相同的风格编辑它们。

我知道

<VisualState x:Name="Selected">

不起作用，因为按钮没有选择状态，但我很长一段时间都无法弄清楚，我尝试了切换按钮，样式内有很多变化，大约一周后我完全陷入困境。也许你们有人可以帮助我？预先感谢！

Answer 1

假设您想要一组切换按钮，其中只能选择其中一个，此示例可能会对您有所帮助。

此示例基于

RadioButtons

，一组

RadioButton

，其中只能选择其中一个，并覆盖每个

Style

的

RadioButton

：

<RadioButtons>
    <RadioButtons.Resources>
        <Style TargetType="RadioButton">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RadioButton">
                        <ToggleButton
                            Content="{x:Bind Content, Mode=OneWay}"
                            IsChecked="{x:Bind IsChecked, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </RadioButtons.Resources>
    <x:String>A</x:String>
    <x:String>B</x:String>
</RadioButtons>