使用自定义按钮样式更改按钮内容前景或描边颜色
Change button content foreground or stroke color using a custom button style
我尝试使用自定义按钮样式更改鼠标悬停时按钮内容的椭圆的描边,如下所示:
<Style x:Key="MyButtonStyle" TargetType="ButtonBase">
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ButtonBase">
<Grid x:Name="RootGrid">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="Blue" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter
x:Name="ContentPresenter"
Foreground="{TemplateBinding Foreground}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Content="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
为什么只有带有文本 "Working" 的 TextBlock 更改其前景 属性?
<Button x:Name="MyButton" Style="{StaticResource MyButtonStyle}">
<StackPanel>
<Ellipse Width="20" Height="20" Stroke="{x:Bind MyButton.Foreground, Mode=OneWay}"></Ellipse>
<TextBlock Foreground="{x:Bind MyButton.Foreground, Mode=OneWay}" Text="Not Working" />
<TextBlock Text="Working" />
</StackPanel>
</Button>
- 您的视觉状态动画正在修改
ContentPresenter
的前景,而不是 Button
(MyButton
) 的前景。
- 使用
ContentControl
而不是 ContentPresenter
以访问模板中的其他属性。
- 访问一些其他控件的
Foreground
,如下所示。
代码:
<StackPanel>
<Ellipse Width="20" Height="20" Stroke="{x:Bind MyText.Foreground, Mode=OneWay}"></Ellipse>
<TextBlock Foreground="{x:Bind MyText.Foreground, Mode=OneWay}" Text="Not Working" />
<TextBlock x:Name="MyText" Text="Working" />
</StackPanel>
我尝试使用自定义按钮样式更改鼠标悬停时按钮内容的椭圆的描边,如下所示:
<Style x:Key="MyButtonStyle" TargetType="ButtonBase">
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ButtonBase">
<Grid x:Name="RootGrid">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="Blue" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter
x:Name="ContentPresenter"
Foreground="{TemplateBinding Foreground}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Content="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
为什么只有带有文本 "Working" 的 TextBlock 更改其前景 属性?
<Button x:Name="MyButton" Style="{StaticResource MyButtonStyle}">
<StackPanel>
<Ellipse Width="20" Height="20" Stroke="{x:Bind MyButton.Foreground, Mode=OneWay}"></Ellipse>
<TextBlock Foreground="{x:Bind MyButton.Foreground, Mode=OneWay}" Text="Not Working" />
<TextBlock Text="Working" />
</StackPanel>
</Button>
- 您的视觉状态动画正在修改
ContentPresenter
的前景,而不是Button
(MyButton
) 的前景。 - 使用
ContentControl
而不是ContentPresenter
以访问模板中的其他属性。 - 访问一些其他控件的
Foreground
,如下所示。
代码:
<StackPanel>
<Ellipse Width="20" Height="20" Stroke="{x:Bind MyText.Foreground, Mode=OneWay}"></Ellipse>
<TextBlock Foreground="{x:Bind MyText.Foreground, Mode=OneWay}" Text="Not Working" />
<TextBlock x:Name="MyText" Text="Working" />
</StackPanel>