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

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 在 frameworkelement 。

获取或设置一个能够自定义外观，效果或其他样式特征的属性，该特征将在此元素捕获键盘焦点时适用于此元素。

虽然您可以创建设置器并提供控制模板，这不是很灵活，因为它在控制模板的顶部添加了控制模板。

a focusVisualStyle 是来自明确样式或主题样式的任何控制模板样式的加性； 仍然可以通过使用来创建控件的主要样式 ControlTemplate 并将该样式设置为样式属性。

这是您自己风格的焦点视觉风格的示例。聚焦时，包含的模板在按钮周围绘制了两个像素宽的蓝线。

<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 和 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>

来自文档关于改变焦点视觉样式的文档：

从概念上讲，将视觉样式的焦点视觉样式的外观从控制之间连贯。确保连贯性的一种方法是只有在撰写整个主题时才更改焦点视觉样式，在主题中定义的每个控件都具有相同的焦点视觉样式，[...]

将焦点设置为主题的单个控制样式的焦点风格不是焦点视觉样式的预期用法。

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

• 用于控件中的焦点的样式，而focusVisalStyle