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

我的代码效果很好，但我怎样才能修改我的风格，就像上面的图片，我在通用应用程序上工作谢谢你的帮助

更新：我像Kory Gill先生所说的那样编辑了我的代码，但是得到了这个结果：

这是我的代码后面的方法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等属性。

我认为我理解你在寻找什么，以下是我为了达到这个目的而修改的内容。如果这不是您想要的，请更详细地说明您发布的代码以及所需的结果。

<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中的按钮

1 个答案: