WPF中的ComboBox样式

时间:2013-01-28 09:04:43

标签: wpf wpf-controls

我遇到ComboBox的问题。我想通过改变它的风格来改变它的外观,但我有一些外观问题,我找不到它们在哪里。

我的ComboBox有这样的表现:

enter image description here

我有两个问题:

  1. 我不知道在哪里可以更改可扩展菜单的前景......无论我在哪里更改它,它都会保持白色!!

  2. 当我选择一个选项时,Text的{​​{1}}会出现两次,一个是深蓝色,一个是白色,您可以在图像上欣赏。我不知道如何改变它......

  3. 我的风格如下:

    ComboBox

    如果有人可以帮忙解决这个问题,我们将非常感激!

    修改

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

    <!-- 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>
    

    然后添加到Text="{TemplateBinding SelectionBoxItem}" 选择语句,然后默认设置它,但我仍然有问题无法更改组合的ItemSource ...

    EDIT2:

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

    Foreground

    listPrecissions = new List<Precisions>() 是我用两个字符串创建的类。如果我用直接字符串创建它:

    Precisions

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

1 个答案:

答案 0 :(得分:2)

您的问题缺少以下格式TextBoxBrushSolidBorderBrushDarkGradient

  

我不知道在哪里可以更改可扩展菜单的前景......无论我在哪里更改它,它都会保持白色!!

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

  

当我选择一个选项时,ComboBox的文本会出现两次,一个是深蓝色,另一个是白色,您可以在图像上欣赏。我不知道如何改变它......

<ContentPresenter Name="ContentSite"<TextBox x:Name="PART_EditableTextBox"负责显示两种不同情况的当前项目。第一个是正常的,第二个是ComboBox被标记为可编辑的(IsEditable="True")。在您的风格中,PART_EditableTextBox的默认值是可见的,因此只需将其设置为隐藏。

<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}"/>