以选项卡为中心的按钮边框颜色和样式

Question

我的用户控件中有这个按钮：

<Button
    x:Name="OkButton"
    Grid.Column="1"
    Command="{Binding Confirm}"
    IsDefault="True"
    IsEnabled="{Binding ConfirmEnabled}"
    Style="{StaticResource okCancelbuttons}"
    Visibility="{Binding ConfirmVisibility}">
    <Image
        Grid.Column="0"
        Margin="0"
        Source="{DynamicResource ResourceKey=confirm_res}" />

<!-- Style Dictionary -->
<Style x:Key="okCancelbuttons" TargetType="{x:Type Button}">
    <Setter Property="BorderBrush" Value="Black" />
    <Setter Property="BorderThickness" Value="3" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border
                    x:Name="Border"
                    Padding="3"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="0"
                    CornerRadius="3"
                    Style="{DynamicResource bordoPulsante}">
                    <ContentPresenter />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Resources>
        <Style TargetType="Image">
            <Style.Triggers>
                <Trigger Property="IsEnabled" Value="True">
                    <Setter Property="Opacity" Value="1" />
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Opacity" Value="0.5" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Style.Resources>
</Style>

<Style x:Key="bordoPulsante" TargetType="{x:Type Border}">
    <Setter Property="BorderBrush" Value="Black" />
    <Setter Property="CornerRadius" Value="3" />
    <Setter Property="Background" Value="Transparent" />
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="{StaticResource brushverdechiaro}" />
        </Trigger>
        <Trigger Property="IsMouseOver" Value="False">
            <Setter Property="Background" Value="Transparent" />
        </Trigger>
    </Style.Triggers>
</Style>

可能有人想在表单中反复点击 Tab 进行导航，但是当其他控件清楚地突出显示时，按钮会显示这条非常细的黑色虚线几乎看不到：

我试过对样式进行一些修改，但似乎没有任何效果。有什么建议吗？

Answer 1

有一个名为 FocusVisualStyle on FrameworkElement 的专用属性。

Gets or sets a property that enables customization of appearance, effects, or other style characteristics that will apply to this element when it captures keyboard focus.

虽然您可以 create setters and supply a control template，但这不是很灵活，因为它将控件模板添加到控件本身的控件模板之上。

A FocusVisualStyle is additive to any control template style that comes either from an explicit style or a theme style; the primary style for a control can still be created by using a ControlTemplate and setting that style to the Style property.

这是您自己风格的焦点视觉样式示例。包含的模板在获得焦点时在按钮周围绘制一条两像素宽的蓝线。

<Style x:Key="okCancelbuttons" TargetType="{x:Type Button}">
    <Setter Property="FocusVisualStyle">
        <Setter.Value>
            <Style>
                <Setter Property="Control.Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Rectangle Margin="2" Stroke="Blue" StrokeThickness="2"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Setter.Value>
    </Setter>
    <!-- ...other markup. -->
</Style>

更灵活的方法是在样式或控件模板的设置器中使用 IsFocused and IsKeyboardFocusWithin 属性。后者允许您通过使用 TargetName.

引用它来更改控件模板中任何控件的属性

另请注意，FocusVisualStyle 已明确设置为 {x:Null} 以删除带有虚线边框的默认焦点样式。

<Style x:Key="okCancelbuttons" TargetType="{x:Type Button}">
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <!-- ...other setters. -->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border
                  x:Name="Border"
                  Padding="3"
                  BorderBrush="{TemplateBinding BorderBrush}"
                  BorderThickness="0"
                  CornerRadius="3"
                  Style="{DynamicResource bordoPulsante}">
                    <ContentPresenter />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsFocused" Value="True">
                        <!-- ...your control template setters. -->
                    </Trigger>
                    <Trigger Property="IsKeyboardFocusWithin" Value="True">
                        <!-- ...your control template setters. -->
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsFocused" Value="True">
            <!-- ...your style setters. -->
        </Trigger>
        <Trigger Property="IsKeyboardFocusWithin" Value="True">
            <!-- ...your style setters. -->
        </Trigger>
    </Style.Triggers>
    <!-- ...other markup. -->
</Style>

来自 documentation 的关于更改焦点视觉样式的警告：

Conceptually, the appearance of focus visual styles applied to controls should be coherent from control to control. One way to ensure coherence is to change the focus visual style only if you are composing an entire theme, where each control that is defined in the theme gets either the very same focus visual style, [...]

Setting FocusVisualStyle on individual control styles that are not part of a theme is not the intended usage of focus visual styles.

更多信息，您可以参考以下文章：

以选项卡为中心的按钮边框颜色和样式

Tab-focused button border color and style

wpf

xaml

focus

controltemplate