将样式应用于 UWP 中的按钮

Question

当我将鼠标悬停在设计中的每个按钮上时，我尝试定义这种样式，如下所示：

这是我的代码：

<Page.Resources>
<Style  x:Key="ButtontopStyle" TargetType="Button">
        <Setter Property="Foreground" Value="#e6e6e6"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" To="#e6e6e6" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Button1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" To="#e6e6e6" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Button1" />
                                        <ColorAnimation Duration="0" To="#e6e6e6" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Content1" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>

                            <ContentPresenter x:Name="Content1" Grid.Column="0" Margin="0" />

                            <Rectangle x:Name="Button1" Stroke="Transparent" Fill="Transparent" Margin="0" Grid.Column="1" Width="5"/>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

然后我将这种样式应用到每个按钮，如下所示：

<Button x:Name="res" Style="{Binding Source={StaticResource ButtontopStyle}}" PointerMoved="res_PointerMoved"/>

我的代码运行良好，但我如何修改我的样式以像上图一样，我在通用应用程序上工作感谢帮助

更新：我已经像科里吉尔爵士所说的那样编辑了我的代码，但我得到了这个结果：

这是我的代码背后的方法 res_PointerMoved:

private void res_PointerMoved(object sender, PointerRoutedEventArgs e)
        {
            res.Foreground = new SolidColorBrush(Windows.UI.Color.FromArgb(255, 34, 13, 238));
        }

但是问题是如何修改样式代码使其像第一张图片一样，将鼠标悬停在每个按钮上时如何组合两种颜色

Answer 1

我假设您代码中的 </<Page.Resources> 只是一个拼写错误，应该是 </Page.Resources>。我会避免将您的对象命名为与 Button 等其他控件的名称和 Content.

等属性相同的名称

我认为我明白你在找什么，下面是我为达到那个结果所做的修改。如果这不是您想要的，请更详细地描述您的代码 post 和想要的结果。

<Page.Resources>
    <Style  x:Key="ButtontopStyle" TargetType="Button">
        <Setter Property="Foreground" Value="#e6e6e6"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" To="#e6e6e6" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Button1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" To="#e6e6e6" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Button1" />
                                        <ColorAnimation Duration="0" To="#e6e6e6" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Content1" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>

                            <ContentPresenter x:Name="Content1"/>
                            <Rectangle x:Name="Button1" Stroke="Transparent" Fill="Transparent" Margin="0" Grid.Column="1" Width="20"/>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Button Style="{Binding Source={StaticResource ButtontopStyle}}" Content="My Button"/>
</StackPanel>

将样式应用于 UWP 中的按钮

apply a Style to a Button in a UWP

win-universal-app

windows-10-universal