当我将鼠标悬停在设计器中的每个按钮上时,我试图定义此样式,如下所示:
但是当我用我的代码悬停在每个Button上时,我得到了这个结果:
这是我的代码,我为Button定义了一个样式:
<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>
正如您所看到的,当我悬停时,我有一个隐藏按钮文本的矩形
如何将我的代码修改为我想要的结果?
答案 0 :(得分:3)
你可以这样做:
<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>