当按tab键时，可以改变按钮的焦点颜色

本文关键字：按钮 焦点 颜色 改变 tab 键时 当按 | 更新日期: 2023-09-27 17:49:55

我有一个黑色背景的按钮。当您将选项卡切换到按钮时，由于按钮的背景颜色，您不会看到焦点现在在按钮上。如何将对焦帧更改为红色?

(当你对焦在按钮上时，你会看到一些在按钮上有点的帧)

<Border x:Name="border" Background="{TemplateBinding Background}">
    <ContentPresenter x:Name="contentPresenter"
         ContentTemplate="{TemplateBinding ContentTemplate}"
         Content="{TemplateBinding Content}"
         ContentStringFormat="{TemplateBinding ContentStringFormat}"
         Focusable="False"/>
</Border>
<ControlTemplate.Triggers>
         <Trigger Property="IsMouseOver" Value="True">
              <Setter Property="Opacity" Value="1" />
         </Trigger>
....

当按tab键时，可以改变按钮的焦点颜色

试试这个

<Style TargetType="Button">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="FocusVisualStyle">
            <Setter.Value>
                <Style TargetType="Control">
                    <Setter Property="Control.Template">
                        <Setter.Value>
                            <ControlTemplate>
                                 <Rectangle x:Name="bd" Stroke="Red" SnapsToDevicePixels="True" StrokeThickness="1" StrokeDashCap="Triangle" StrokeDashArray="1,2" Margin="1" />
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border x:Name="border" BorderBrush="Transparent" BorderThickness="1"  Background="{TemplateBinding Background}">
                        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="border" Property="BorderBrush" Value="Black"></Setter>
                            <Setter TargetName="border" Property="Margin" Value="1"></Setter>
                        </Trigger>
                        <Trigger Property="IsFocused" Value="True">
                            <Setter Property="Foreground" Value="Red"></Setter>                                
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
<Button Content="Hello World" Background="Gray" Height="35" Width="200" ></Button>

据我所知，未启用的元素不会参与命中测试或焦点，因此不会成为输入事件的来源。所以我们需要这样做:

<Window.Resources>
        <Style x:Key="FocusVisualStyle">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle x:Name="bd" Stroke="Red" SnapsToDevicePixels="True" StrokeThickness="1" StrokeDashCap="Triangle" StrokeDashArray="1,2" Margin="1" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="Buttonstyle" TargetType="Button">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="IsEnabled" Value="True"/>
        <Setter Property="FocusVisualStyle" Value="{DynamicResource FocusVisualStyle}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border x:Name="border" Focusable="False" BorderBrush="Transparent" BorderThickness="1"  Background="{TemplateBinding Background}">
                        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" ContentStringFormat="{TemplateBinding ContentStringFormat}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="border" Property="BorderBrush" Value="Black"></Setter>
                            <Setter TargetName="border" Property="Margin" Value="1"></Setter>
                        </Trigger>
                        <Trigger Property="IsFocused" Value="True">
                            <Setter Property="Foreground" Value="Red"></Setter>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Opacity" Value="0.3"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid x:Name="gd"  Height="35" Width="200">
    <Grid.Style>
         <Style TargetType="Grid">
              <Style.Triggers>
                   <DataTrigger Binding="{Binding ElementName=bt,Path=IsEnabled}" Value="False">
                       <Setter Property="Focusable" Value="True"></Setter>
                       <Setter Property="FocusVisualStyle" Value="{DynamicResource FocusVisualStyle}"/>
                    </DataTrigger>
               </Style.Triggers>
          </Style>
     </Grid.Style>
     <Button x:Name="bt" IsEnabled="False" Style="{StaticResource Buttonstyle}" Content="Hello World"   IsTabStop="True"  Background="Gray"/>
</Grid>

在触发器中使用IsFocused依赖属性。我建议你改变边框的宽度或颜色，以区分按钮和未聚焦的按钮。据我所知，表示焦点的虚线矩形仅在内置控件中实现。如果你制作了一个模板，你应该覆盖它以满足你的需要。

相关文章：