在通用应用程序中悬停时为按钮定义样式

Question

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

但是当我用我的代码将鼠标悬停在每个按钮上时，我得到了这个结果：

这是我的代码，我为按钮定义了一个样式：

<Style x:Key="ButtontopStyle1" 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" />
                                    <ColorAnimation Duration="0" To="#393185" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Button11" />
                                    <ColorAnimation Duration="0" To="#393185" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Content11" />
                                </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="#393185" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Content11" />

                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>

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

然后我将它应用到我的按钮中：

<StackPanel Orientation="Vertical" Margin="0" >
    <Button  Background="Transparent" Content="Resultats" FontSize="18" Foreground="#727271"  x:Name="res" Style="{Binding Source={StaticResource ButtontopStyle1}}" />
    <StackPanel x:Name="stackVisible" Orientation="Vertical" >
        <Button  Background="Transparent" Content="Tous les résultats" FontSize="16"  Foreground="#727271"   x:Name="ttres" Style="{Binding Source={StaticResource ButtontopStyle1}}"
        <Button Background="Transparent" Content="Recherches Avancées" FontSize="16"  Foreground="#727271"  x:Name="rechavan"  Style="{Binding Source={StaticResource ButtontopStyle1}}" />
    </StackPanel>
</StackPanel>

如您所见，当我悬停时，我有一个隐藏按钮文本的矩形

如何修改我的代码以获得我想要的结果？

Answer 1

你可以这样做：

<Style  x:Key="ButtontopStyle1"
        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" />
                                    <ColorAnimation Duration="0"
                                                    To="#393185"
                                                    Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
                                                    Storyboard.TargetName="Button11" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ColorAnimation Duration="0"
                                                    To="#e6e6e6"
                                                    Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
                                                    Storyboard.TargetName="Button1" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Grid Grid.Column="0">
                            <Rectangle x:Name="Button1"
                                       Stroke="Transparent"
                                       Fill="Transparent"
                                       Margin="0"
                                       Width="auto" />
                            <ContentPresenter x:Name="Content11"
                                              Background="Transparent"
                                              Foreground="{TemplateBinding Foreground}" />
                        </Grid>
                        <Rectangle x:Name="Button11"
                                   Stroke="Transparent"
                                   Fill="Transparent"
                                   Margin="0"
                                   Grid.Column="1"
                                   Width="5" />
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

在通用应用程序中悬停时为按钮定义样式

Define a Style for a Button when Hover in a universal App

win-universal-app

windows-10-universal