如何显示所选项目并使用组合框边框？为什么会出现这种行为？

Question

如何使 ComboBox 的选定项目显示在 ComboBox 文本字段中并在 ComboBox 中使用 Border > 控制模板？使用以下代码，项目可以正常弹出，但选择后永远不会显示在 ComboBox 文本字段中；但从 ComboBox 模板中删除 2 个 Border 可以解决此问题。为什么？？如何？？更重要的是：如何将此模板与 Border 一起使用，并在选择后让 SelectedItem 正确显示在 ComboBox 文本字段中？

<Window.Resources>
    <Style x:Key="ComboboxDropdownButton" TargetType="{x:Type ToggleButton}">
        <Setter Property="MinWidth" Value="0"/>
        <Setter Property="MinHeight" Value="0"/>
        <Setter Property="Width" Value="NaN"/>
        <Setter Property="Height" Value="NaN"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="Black"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <DockPanel SnapsToDevicePixels="True" 
                               Background="{TemplateBinding Background}" 
                               LastChildFill="False">
                        <Border x:Name="Border" 
                                Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" 
                                DockPanel.Dock="Right" 
                                Background="WhiteSmoke" 
                                CornerRadius="0,3,3,0"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                >
                            <Path Fill="{TemplateBinding Foreground}"
                                  HorizontalAlignment="Center" VerticalAlignment="Center" Data="M0,0L4.5,4 9,0z"/>
                        </Border>
                    </DockPanel>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="White" />
                        </Trigger>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="White" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Opacity" Value="0.5"/>
            </Trigger>
        </Style.Triggers>
    </Style>

    <ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">
        <Border x:Name="PART_ContentHost" Focusable="False" />
    </ControlTemplate>

    <Style x:Key="{x:Type ComboBox}"
           TargetType="{x:Type ComboBox}">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
        <Setter Property="ScrollViewer.CanContentScroll" Value="true" />
        <Setter Property="MinWidth" Value="120" />
        <Setter Property="MinHeight" Value="20" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ComboBox}">
                    <Border SnapsToDevicePixels="True" 
                            x:Name="OuterBorder" 
                            Background="Transparent" 
                            BorderBrush="Red" 
                            BorderThickness="1" 
                            CornerRadius="4"
                            Margin="-1">
                        <Border x:Name="InnerBorder" 
                                Background="WhiteSmoke" 
                                BorderThickness="1" 
                                CornerRadius="3" 
                                BorderBrush="Black">
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="EditStates">
                                        <VisualState x:Name="Editable">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                                               Storyboard.TargetName="PART_EditableTextBox">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                                               Storyboard.TargetName="ContentSite">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Uneditable" />
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <ToggleButton x:Name="ToggleButton"
                                              Margin="-1"
                                              Grid.Column="2"
                                              Focusable="False"
                                              ClickMode="Press"
                                              Style="{StaticResource ComboboxDropdownButton}"
                                              IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
                                </ToggleButton>
                                <ContentPresenter x:Name="ContentSite"
                                                  IsHitTestVisible="False"
                                                  Content="{TemplateBinding SelectionBoxItem}"
                                                  ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                                                  ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                                                  Margin="3,3,23,3"
                                                  VerticalAlignment="Stretch"
                                                  HorizontalAlignment="Left">
                                </ContentPresenter>
                                <TextBox x:Name="PART_EditableTextBox"
                                         Style="{x:Null}"
                                         Template="{StaticResource ComboBoxTextBox}"
                                         HorizontalAlignment="Left"
                                         VerticalAlignment="Bottom"
                                         Margin="3,3,23,3"
                                         Focusable="True"
                                         Background="Transparent"
                                         Visibility="Hidden"
                                         IsReadOnly="{TemplateBinding IsReadOnly}" />
                                <Popup x:Name="PART_Popup"
                                       Placement="Bottom"
                                       IsOpen="{TemplateBinding IsDropDownOpen}"
                                       AllowsTransparency="True"
                                       Focusable="False"
                                       PopupAnimation="Slide">
                                    <Grid x:Name="DropDown"
                                          SnapsToDevicePixels="True"
                                          MinWidth="{TemplateBinding ActualWidth}"
                                          MaxHeight="{TemplateBinding MaxDropDownHeight}"
                                          >
                                        <Border x:Name="DropDownBorder"
                                                MaxHeight="{TemplateBinding MaxDropDownHeight}"
                                                MinWidth="{Binding ActualWidth, ElementName=Border}" 
                                                Background="WhiteSmoke" 
                                                BorderBrush="Black" 
                                                BorderThickness="1" CornerRadius="0,0,3,3">
                                        </Border>
                                        <ScrollViewer Padding="1" SnapsToDevicePixels="True">
                                            <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                                        </ScrollViewer>
                                    </Grid>
                                </Popup>
                            </Grid>
                        </Border>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="HasItems" Value="false">
                            <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95" />
                        </Trigger>
                        <Trigger Property="IsGrouping" Value="true">
                            <Setter Property="ScrollViewer.CanContentScroll" Value="false" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<Grid>
    <ComboBox Width="120" Height="20" Name="comboBox1" SnapsToDevicePixels="True"
              HorizontalAlignment="Center" VerticalAlignment="Center"
              Text="ComboBox" SelectedIndex="0" IsEditable="True" IsReadOnly="True">
        <ComboBoxItem>item 1</ComboBoxItem>
        <ComboBoxItem>item 2</ComboBoxItem>
        <ComboBoxItem>item 3</ComboBoxItem>
    </ComboBox>
</Grid>

Answer 1

我终于解决了这个问题..通过从模板中删除边框。我用模板网格中的矩形替换了边框。工作起来就像一个魅力。结果可以在此处的下一个问题中找到。