Question

我有一个组合框样式。

使用Tab键选择组合框时，焦点将因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}"/>

Answer 1

FocusVisualStyle仅在通过键盘导航使控件聚焦时适用。这是设计使然。

尽管如此，您仍然可以创建自己的自定义模板来实现相同的效果。在下面的示例标记中，我向Rectangle模板添加了ComboBox，并在{{1}时将其Trigger属性设置为Visibility的{{1}} }}专注。您可以根据自己的确切要求进行编辑。

Visible

鼠标单击时WPF组合框边框颜色

1 个答案: