WPF 中的组合框样式

ComboBox styling in WPF

提问by Sonhja

I have a problem with a ComboBox. I wanted to change its apparency by overriding its style, but I have some problems of appearance, and I can't find where are they.

我有一个ComboBox. 我想通过覆盖它的样式来改变它的外观，但是我有一些外观问题，我找不到它们在哪里。

My ComboBoxhas this appearance:

我的ComboBox有这个样子：

I have two problems:

我有两个问题：

1. I don't know where to change the foreground of the expandable menu... Wherever I change it, it remains white!!

2. When I choose an option, the Textof the ComboBoxappears twice, one in dark blue and one in white, as you can appreciate on the image. And I don't know how to change it...

1. 我不知道在哪里更改可扩展菜单的前景......无论我在哪里更改它，它都是白色的！

2. 当我选择一个选项，Text的ComboBox出现了两次，一个深蓝色和一个白色的，因为你可以在图像上欣赏。而且不知道怎么改。。。

My style looks like this:

我的风格是这样的：

<!-- All ComboBox styles -->
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="ToggleButton">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="20" />
        </Grid.ColumnDefinitions>
        <Border
          x:Name="Border" 
          Grid.ColumnSpan="2"
          CornerRadius="5"
          Background="{StaticResource DarkGradient}"
          BorderBrush="{StaticResource SolidBorderBrush}"
          BorderThickness="1" />
        <Border 
          Grid.Column="0"
          CornerRadius="5,0,0,5" 
          Margin="1" 
          Background="{StaticResource TextBoxBrush}" 
          BorderBrush="{StaticResource SolidBorderBrush}"
          BorderThickness="0,0,1,0" />
        <Path 
          x:Name="Arrow"
          Grid.Column="1"     
          Fill="{StaticResource TextBoxBrush}"
          HorizontalAlignment="Center"
          VerticalAlignment="Center"
          Data="M 0 0 L 4 4 L 8 0 Z"/>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter TargetName="Border" Property="Background" Value="LightGray" />
            <Setter TargetName="Border" Property="BorderBrush" Value="Gray" />
            <Setter Property="Foreground" Value="DarkGray"/>
            <Setter TargetName="Arrow" Property="Fill" Value="DarkGray" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

<!-- ComboBox TextBox -->
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">
    <Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
</ControlTemplate>

<!-- ComboBox style -->
<Style x:Key="{x:Type ComboBox}" TargetType="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="ComboBox">
                <Grid>
                    <ToggleButton 
                    Name="ToggleButton" 
                    Template="{StaticResource ComboBoxToggleButton}" 
                    Grid.Column="2" 
                    Focusable="false"
                    IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
                    ClickMode="Press">
                    </ToggleButton>
                    <ContentPresenter
                        Name="ContentSite"
                        IsHitTestVisible="False" 
                        Content="{TemplateBinding SelectionBoxItem}"
                        ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                        ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                        Margin="3,3,23,3"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Left" /> 
                    <TextBox x:Name="PART_EditableTextBox"
                        Style="{x:Null}" 
                        Template="{StaticResource ComboBoxTextBox}" 
                        HorizontalAlignment="Left" 
                        VerticalAlignment="Center" 
                        Text="{TemplateBinding Text}"
                        Margin="3,3,23,3"
                        Focusable="True" 
                        Background="Transparent"
                        Visibility="Visible"
                        Foreground="DarkBlue"
                        IsReadOnly="{TemplateBinding IsReadOnly}"/> 
                    <Popup 
                        Name="Popup"
                        Placement="Bottom"
                        IsOpen="{TemplateBinding IsDropDownOpen}"
                        AllowsTransparency="True" 
                        Focusable="False"
                        PopupAnimation="Slide">
                        <Grid 
                          Name="DropDown"
                          SnapsToDevicePixels="True"                
                          MinWidth="{TemplateBinding ActualWidth}"
                          MaxHeight="{TemplateBinding MaxDropDownHeight}">
                            <Border 
                                x:Name="DropDownBorder"
                                Background="{StaticResource TextBoxBrush}"
                                BorderThickness="1"
                                BorderBrush="{StaticResource SolidBorderBrush}"/>
                            <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
                                <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                            </ScrollViewer>
                        </Grid>
                    </Popup>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="HasItems" Value="false">
                        <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="LightGray"/>
                    </Trigger>
                    <Trigger Property="IsGrouping" Value="true">
                        <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                    </Trigger>
                    <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
                        <Setter TargetName="DropDownBorder" Property="CornerRadius" Value="0,0,4,4"/>
                        <Setter TargetName="DropDownBorder" Property="Margin" Value="0"/>
                    </Trigger>
                    <Trigger Property="IsEditable"
           Value="true">
                        <Setter Property="IsTabStop" Value="false"/>
                        <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/> 
                        <Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
    </Style.Triggers>
</Style>

If anyone can help to solve this, will be really appreciated!

如果有人可以帮助解决这个问题，将不胜感激！

EDIT:

编辑：

I could solve the problem of writing twice the value by changing this:

我可以通过改变这个来解决写两倍值的问题：

Text="{TemplateBinding SelectionBoxItem}"

And then adding to the ItemSourceselection sentence, and then setting it by default, but I still have the problem of being not able to change the Foregroundof the combo...

然后添加到ItemSource选择语句中，然后默认设置，但是我仍然有无法更改Foreground组合的问题...

EDIT2:

编辑2：

I discovered one thing: when I create the list, I do this:

我发现了一件事：当我创建列表时，我这样做：

listPrecissions = new List<Precisions>()

Where Precisionsis a class that I created with two strings. If I create it with a direct string:

Precisions我用两个字符串创建的类在哪里。如果我使用直接字符串创建它：

listPrecissions = new List<string>()

and add the items, it has a black foreground. But have no idea why...

并添加项目，它有一个黑色的前景。但是不知道为什么...

回答by ShadeOfGrey

Your question lacks the following styles TextBoxBrush, SolidBorderBrushand DarkGradient.

您的问题缺少以下样式TextBoxBrush,SolidBorderBrush和DarkGradient。

I don't know where to change the foreground of the expandable menu... Wherever I change it, it remains white!!

我不知道在哪里更改可扩展菜单的前景......无论我在哪里更改它，它都是白色的！

Setting the Foregroundproperty on the ComboBox seems to change it for me (with your styles applied).

Foreground在 ComboBox 上设置属性似乎为我改变了它（应用了你的样式）。

When I choose an option, the Text of the ComboBox appears twice, one in dark blue and one in white, as you can appreciate on the image. And I don't know how to change it...

当我选择一个选项时，组合框的文本会出现两次，一个是深蓝色，一个是白色，正如您在图像上所看到的。而且不知道怎么改。。。

<ContentPresenter Name="ContentSite"and <TextBox x:Name="PART_EditableTextBox"are responsible for displaying the current item for two different cases. First is the normal one, the second is when the ComboBoxis marked as editable (IsEditable="True"). In your style the default for PART_EditableTextBoxis Visible, so just set it to Hidden.

<ContentPresenter Name="ContentSite"并<TextBox x:Name="PART_EditableTextBox"负责显示两种不同情况下的当前项目。第一个是正常的，第二个ComboBox是标记为可编辑 ( IsEditable="True") 时。在您的样式中，默认为PART_EditableTextBoxVisible，因此只需将其设置为 Hidden。

<TextBox x:Name="PART_EditableTextBox"
    Style="{x:Null}" 
    Template="{StaticResource ComboBoxTextBox}" 
    HorizontalAlignment="Left" 
    VerticalAlignment="Center" 
    Text="{TemplateBinding Text}"
    Margin="3,3,23,3"
    Focusable="True" 
    Background="Transparent"
    Visibility="Hidden"
    Foreground="DarkBlue"
    IsReadOnly="{TemplateBinding IsReadOnly}"/>