c# - 自定义 ComboBox 样式看不到所选项目文本

Question

我一直在研究基于这里的自定义组合框样式:

https://gist.github.com/HalidCisse/50df055a0c02714a9e3f

我遇到的问题是，当我选择一个项目或将某些文本设置为默认显示时，所选项目的文本没有显示。但是，如果我将其设置为组合框可编辑，我可以看到文本长度的蓝色轮廓，它应该在该位置。这让我觉得文本实际上是绑定(bind)和显示的，它只是不可见或隐藏的。不幸的是，我已经弄乱了几个小时，但我没有成功地试图取消隐藏它。

What it looks like when something is selected

这就是我设置组合框的方式:

<ComboBox     Style="{StaticResource ComboBoxFlatStyle}"
              Height="40"
              FontSize="16"
              Margin="10 0 10 0"
              IsEnabled="True"
              IsEditable="True"
              IsReadOnly="True"
              Text="Testing Text">
        <ComboBoxItem Content="Test 0"/>
        <ComboBoxItem Content="Test 1"/>
    </ComboBox>

这是我的:

<SolidColorBrush x:Key="ComboBoxNormalBorderBrush"
                 Color="#333333" />
<SolidColorBrush x:Key="ComboBoxNormalBackgroundBrush"
                 Color="#222222" />
<SolidColorBrush x:Key="ComboBoxDisabledForegroundBrush"
                 Color="White" />
<SolidColorBrush x:Key="ComboBoxDisabledBackgroundBrush"
                 Color="#222222" />
<SolidColorBrush x:Key="ComboBoxDisabledBorderBrush"
                 Color="#333333" />
<SolidColorBrush x:Key="DropDownBackgroundBrush"
                 Color="#111111" />
<SolidColorBrush x:Key="DropDownTextFillBrush"
                 Color="#FFFFB83D" />
<SolidColorBrush x:Key="ArrowFillBrush"
                 Color="#FFFFB83D" />

<ControlTemplate x:Key="ComboBoxToggleButtonTemplate"
                 TargetType="ToggleButton">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="20" />
        </Grid.ColumnDefinitions>
        <Border Name="Border"
                Grid.ColumnSpan="2"
                Background="{StaticResource ComboBoxNormalBackgroundBrush}"
                BorderBrush="{StaticResource ComboBoxNormalBorderBrush}"
                BorderThickness="1, 1, 1, 1"
                CornerRadius="0" />
        <Border Name="ButtonBorder"
                Grid.Column="1"
                Margin="1, 1, 1, 1"
                Background="{StaticResource ComboBoxNormalBackgroundBrush}"
                BorderBrush="#444"
                BorderThickness="0, 0, 0, 0"
                CornerRadius="0, 0, 0, 0" />

        <Path Name="Arrow"
              Grid.Column="1"
              HorizontalAlignment="Center"
              VerticalAlignment="Center"
              Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z"
              Fill="{StaticResource ArrowFillBrush}" />
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="UIElement.IsMouseOver" Value="True">
            <Setter TargetName="ButtonBorder" Property="Panel.Background" Value="#111111" />
        </Trigger>
        <Trigger Property="ToggleButton.IsChecked" Value="True">
            <Setter TargetName="Arrow" Property="Shape.Fill" Value="{StaticResource ArrowFillBrush}" />
            <Setter TargetName="ButtonBorder" Property="Panel.Background" Value="#111111" />
        </Trigger>
        <Trigger Property="UIElement.IsEnabled" Value="False">
            <Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}" />
            <Setter TargetName="Arrow" Property="Shape.Fill" Value="#999" />
            <Setter TargetName="Border" Property="Panel.Background" Value="{StaticResource ComboBoxDisabledBackgroundBrush}" />
            <Setter TargetName="ButtonBorder" Property="Border.BorderBrush" Value="{StaticResource ComboBoxDisabledBorderBrush}" />
            <Setter TargetName="ButtonBorder" Property="Panel.Background" Value="{StaticResource ComboBoxDisabledBackgroundBrush}" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

<Style x:Key="ComboBoxFlatStyle"
       TargetType="{x:Type ComboBox}">
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate TargetType="ComboBox">
                <ControlTemplate.Resources>
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
                                     Color="#222222" />
                </ControlTemplate.Resources>
                <Grid>
                    <ContentPresenter x:Name="ContentSite"
                                      Margin="5, 3, 23, 3"
                                      HorizontalAlignment="Stretch"
                                      VerticalAlignment="Center"
                                      Content="{TemplateBinding ComboBox.SelectionBoxItem}"
                                      ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}"
                                      ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                                      IsHitTestVisible="False" />
                    <TextBox Name="PART_EditableTextBox"
                             Margin="3, 3, 23, 3"
                             HorizontalAlignment="Left"
                             VerticalAlignment="Center"
                             Background="Transparent"
                             Focusable="True"
                             IsReadOnly="{TemplateBinding IsReadOnly}"
                             Visibility="Hidden">
                        <TextBox.Template>
                            <ControlTemplate TargetType="TextBox">
                                <Border x:Name="PART_ContentHost"
                                        Focusable="False" />
                            </ControlTemplate>
                        </TextBox.Template>
                    </TextBox>
                    <!--  Popup showing items  -->
                    <Popup Name="Popup"
                           AllowsTransparency="True"
                           Focusable="False"
                           IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}"
                           Placement="Bottom"
                           PopupAnimation="Slide">
                        <Grid Name="DropDown"
                              MinWidth="{TemplateBinding FrameworkElement.ActualWidth}"
                              MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}"
                              SnapsToDevicePixels="True">
                            <Border Name="DropDownBorder"
                                    Margin="0, 1, 0, 0"
                                    Background="{StaticResource DropDownBackgroundBrush}"
                                    BorderBrush="{StaticResource ComboBoxNormalBorderBrush}"
                                    BorderThickness="1,1,1,1"
                                    CornerRadius="0" />
                            <ScrollViewer Margin="4"
                                          SnapsToDevicePixels="True">
                                <ItemsPresenter KeyboardNavigation.DirectionalNavigation="Contained" />
                            </ScrollViewer>
                        </Grid>
                    </Popup>
                    <ToggleButton Name="ToggleButton"
                                  Grid.Column="2"
                                  ClickMode="Press"
                                  Focusable="False"
                                  IsChecked="{Binding Path=IsDropDownOpen,
                                                      RelativeSource={RelativeSource TemplatedParent},
                                                      Mode=TwoWay}"
                                  Template="{StaticResource ComboBoxToggleButtonTemplate}" />
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="ItemsControl.HasItems" Value="False">
                        <Setter TargetName="DropDownBorder" Property="FrameworkElement.MinHeight" Value="95" />
                    </Trigger>
                    <Trigger Property="UIElement.IsEnabled" Value="False">
                        <Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}" />
                    </Trigger>
                    <Trigger Property="ItemsControl.IsGrouping" Value="True">
                        <Setter Property="ScrollViewer.CanContentScroll" Value="False" />
                    </Trigger>
                    <Trigger Property="ComboBox.IsEditable" Value="True">
                        <Setter Property="KeyboardNavigation.IsTabStop" Value="False" />
                        <Setter TargetName="ContentSite" Property="UIElement.Visibility" Value="Hidden" />
                        <Setter TargetName="PART_EditableTextBox" Property="UIElement.Visibility" Value="Visible" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="FrameworkElement.FocusVisualStyle" Value="{x:Null}" />
    <Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True" />
    <Setter Property="ScrollViewer.CanContentScroll" Value="True" />
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
    <Setter Property="TextElement.Foreground" Value="{StaticResource DropDownTextFillBrush}" />
    <Setter Property="UIElement.SnapsToDevicePixels" Value="True" />
</Style>

Answer 1

好的，问题出在组合框中项目的顺序。我一直在使用 vs2013 的 XAML 样式器扩展，它可以自动格式化你的 xaml 以使其看起来更好。然而，我有一个自动排序我的元素的设置，这意味着元素以错误的顺序放置在空网格上，这会模糊文本。

供引用，正确的顺序是:

切换按钮

内容展示器

文本框

弹出