【发布时间】：2020-09-17 15:06:16
【问题描述】：
我有一个组合框样式。
当标签到组合框时，焦点会因为 FocusButtonStyle 而起作用，但是当用户单击组合框时，我不知道如何获得相同的边框。就好像它没有那样集中注意力。
尝试了触发器，但无法使其工作。
<Style x:Key="ItemStyle" TargetType="{x:Type ComboBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Padding" Value="8,8,0,7"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border
Name="Border"
Padding="2"
SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="true">
<Setter TargetName="Border" Property="Background" Value="{StaticResource Interaction-Hover}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{StaticResource Grey-7}"/>
<Setter Property="Background" Value="{StaticResource Grey-Bg}"/>
<Setter TargetName="Border" Property="Background" Value="{StaticResource Grey-3}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
我尝试在下面的样式上使用触发器，并选中，但它只持续点击，并且只针对小切换按钮，在覆盖文本框的那个上尝试了相同的操作，但没有。
<Style x:Key="ComboBoxButtonStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Background="{TemplateBinding Background}"
x:Name="border"
CornerRadius="0,4,4,0"
BorderThickness="0,1,1,1"
BorderBrush="{StaticResource Grey-Border}">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ComboBoxTextBoxStyle" TargetType="{x:Type TextBox}">
<!--<Setter Property="Padding" Value="8,8,0,7"/>-->
<Setter Property="Focusable" Value="False" />
<Setter Property="IsReadOnly" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid>
<Border CornerRadius="4,0,0,4"
x:Name="border"
BorderThickness="1,1,0,1"
Background="{TemplateBinding Background}"
BorderBrush="{StaticResource Grey-Border}">
<ScrollViewer x:Name="PART_ContentHost"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ComboBoxOverlayToggleButtonStyle" TargetType="ToggleButton">
<Setter Property="Focusable" Value="False" />
<Setter Property="ClickMode" Value="Press" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid Background="Transparent"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="FocusButtonStyle" TargetType="Control">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Stroke="{StaticResource Default-Border-Brush}"
SnapsToDevicePixels="True"
RadiusX="4"
RadiusY="4" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ComboBoxStyle" BasedOn="{StaticResource Caption1}" TargetType="{x:Type ComboBox}">
<Setter Property="Height" Value="35"/>
<Setter Property="Margin" Value="16,0,0,0"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Focusable" Value="True"/>
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="ItemContainerStyle" Value="{StaticResource ItemStyle}"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusButtonStyle}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="18"/>
</Grid.ColumnDefinitions>
<ToggleButton Grid.Column="0"
Style="{StaticResource ComboBoxOverlayToggleButtonStyle}"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
Background="{TemplateBinding Background}"/>
<TextBox Grid.Column="0"
Name="PART_EditableTextBox"
Style="{StaticResource ComboBoxTextBoxStyle}"
Background="{TemplateBinding Background}"
IsHitTestVisible="{TemplateBinding IsEditable}"/>
<ToggleButton Grid.Column="1"
Height="{TemplateBinding Height}"
Style="{StaticResource ComboBoxButtonStyle}"
Focusable="False"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press"
Background="{TemplateBinding Background}">
<Path Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"
Fill="Black" />
</ToggleButton>
<ContentPresenter Grid.Column="0"
Name="ContentSite"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="5,0,0,0"/>
<Popup Grid.Column="0"
Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
<Border x:Name="DropDownBorder"
BorderThickness="1,1,1,1"
CornerRadius="0,4,4,4"
Background="White"
BorderBrush="{StaticResource Grey-Border}">
<Grid Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<ScrollViewer SnapsToDevicePixels="True"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Auto">
<StackPanel IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Border>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsReadOnly" Value="True">
<Setter Property="Background" Value="{StaticResource Grey-Bg}"/>
<Setter Property="IsEnabled" Value="False"/>
<Setter Property="Focusable" Value="False"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
解决方案
将此添加到组合框模板
<Rectangle x:Name="focusRect"
Grid.Column="0"
Grid.ColumnSpan="2"
Grid.ZIndex="1"
SnapsToDevicePixels="true"
Stroke="{StaticResource PrimaryBrush}"
RadiusX="4"
RadiusY="4"
Visibility="Collapsed"/>
还有这些触发器：
<Trigger Property="IsDropDownOpen" Value="True">
<Setter TargetName="focusRect" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="focusRect" Property="Visibility" Value="Visible" />
</Trigger>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
【问题讨论】：
-
你不能只触发 IsFocused 吗？
-
@GazTheDestroyer 也尝试过，但无法正常工作
-
我看到您有时将 Focusable 设置为 False。这可能会阻止它。
-
@GazTheDestroyer 需要它来防止组合框上出现多个制表符