通过 接收焦点时修改按钮样式，但单击时不修改按钮样式

本文关键字：按钮 样式 修改 单击 tab 焦点 通过 | 更新日期: 2023-09-27 18:34:11

我想做什么

在用户界面中按 Tab 键时，大多数 WPF 控件在接收键盘焦点时会显示虚线边框。当用鼠标单击它们时，它们不显示此边框。

我

有一个带有自定义控件模板的按钮，我想要与上述相同的行为，但我不仅想添加边框，还想修改按钮本身的外观。

我尝试了什么

  • 自定义FocusVisualStyle .这没有给我足够的灵活性，因为FocusVisualStyle设置的模板是添加到按钮顶部的。据我所知，这不能用于以任何方式修改(样式，动画,...(按钮本身。

  • 使用具有IsFocused和/或IsKeyboardFocused属性的触发器以及具有Got/LostFocus和/或Got/LostKeyboardFocus事件的事件触发器来设置按钮样式。这也不起作用，因为当我单击按钮时，所有这些似乎也会被触发。

示例代码

<StackPanel VerticalAlignment="Center" Width="150">
    <StackPanel.Resources>
        <ControlTemplate x:Key="CustomButtonTemplate" TargetType="Button">
            <!--A simple black border with a content presenter-->
            <Border BorderBrush="Black" BorderThickness="1" CornerRadius="2">
                <ContentPresenter x:Name="Presenter" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="2" />
            </Border>
            <ControlTemplate.Triggers>
                <!--When receiving keyboard focus modify the button text-->
                <Trigger Property="IsKeyboardFocused" Value="True">
                    <Setter TargetName="Presenter" Property="Content" Value="I have keyboard focus" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        <Style x:Key="CustomFocusVisualStyle" TargetType="Control">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <!--Display a red border-->
                        <Border BorderThickness="1" CornerRadius="2" BorderBrush="Red" Margin="-1" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </StackPanel.Resources>
    <Button Content="I am a normal button" Margin="5" />
    <Button Content="I am a custom button" Margin="5"
            Template="{StaticResource CustomButtonTemplate}"
            FocusVisualStyle="{StaticResource CustomFocusVisualStyle}" />
</StackPanel>

请注意，自定义红色焦点边框仅在两个按钮之间按 Tab 键时显示，而不是在单击按钮时显示。但是，在这两种情况下，自定义按钮文本都会被修改。

我怎样才能做到这一点？

通过 <tab> 接收焦点时修改按钮样式，但单击时不修改按钮样式

好的，经过无数个小时，我终于找到了适合我的方案的解决方案。我希望它也适合你。

忘记FocusVisualStyle，它是垃圾。我正在使用与IsKeyboardFocused=True和IsMouseCaptured=False相关联的多触发器。

这是我现在的风格：

<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Style.Triggers>
    <MultiTrigger>
        <MultiTrigger.Conditions>
            <Condition Property="IsKeyboardFocused" Value="True"/>
            <Condition Property="IsMouseCaptured" Value="False"/>
        </MultiTrigger.Conditions>
        <Setter Property="BorderBrush" Value="Green" />
        <Setter Property="BorderThickness" Value="2" />
    </MultiTrigger>
</Style.Triggers>

这仅在按 Tab 键时在我的按钮周围给我一个绿色环，而不是在通过鼠标聚焦时。

相关文章：