将样式应用于 UWP 中的按钮答案

【问题标题】：apply a Style to a Button in a UWP将样式应用于 UWP 中的按钮
【发布时间】：2016-01-03 06:38:55
【问题描述】：

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

这是我的代码：

<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"/>

我的代码运行良好，但我怎样才能修改我的风格，就像上图一样，我在通用应用程序上工作感谢帮助

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

这是我使用 res_PointerMoved 方法的代码：

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

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

【问题讨论】：

标签： win-universal-app windows-10-universal

【解决方案1】：

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

我认为我了解您在寻找什么，以下是我为实现该结果而进行的修改。如果这不是您想要的，请更详细地描述您发布的代码的内容以及所需的结果。

<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>

【讨论】：