组合框背景更改颜色

Question

我想知道如何更改组合框的背景。我知道您通常可以选择组合框，然后右键单击编辑副本和编辑模板，但是由于组合框是数据模板的一部分，我无法选择组合框来执行此操作，我想知道该怎么做呢？我也尝试复制并粘贴一个普通的组合框模板。但是，我在 aero 和 aero 2 主题中遇到错误，但我之前在我的项目的其他解决方案中使用过这个。任何人都可以帮助我吗？

XAML

<DataTemplate x:Key="TreeRootTemplate">
        <Border BorderBrush="Black" BorderThickness="1" VerticalAlignment="Center" Background="#F7F7F7" CornerRadius="3">
            <StackPanel Margin="2" Width="170" Orientation="Horizontal">
                <Image Source="{Binding Icon, Converter={StaticResource ImageToSourceConverter}}" Width="16" Height="16" Margin="5"/>
                <ComboBox Width="140" HorizontalContentAlignment="Left" VerticalContentAlignment="Center" ItemsSource="{Binding AvailableSources}" SelectedValuePath="Id" DisplayMemberPath="Name" SelectedItem = "{Binding Source, Mode=TwoWay}" BorderThickness="0">
                    <ComboBox.Resources>
                    </ComboBox.Resources>
                    <ComboBox.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding}" Padding="5" Foreground="Black" HorizontalAlignment="Left" VerticalAlignment="Center" FontFamily="{StaticResource FontStyle}"/>
                        </DataTemplate>
                    </ComboBox.ItemTemplate>
                </ComboBox>
            </StackPanel>
        </Border>
    </DataTemplate>

Answer 1

您需要确保覆盖default 模板和样式。您可以使用默认模板，只需更改适用的背景颜色即可。

这是一个很好的example。

编辑：

这是自定义 Combobox 的完整 XAML。你可以乱用不同的颜色来得到你想要的。 'PaleVioletRed' 的所有内容都将是背景颜色，而 'Cyan' 将是所选项目的背景颜色。

<Grid>
    <Grid.Resources>
        <Style TargetType="{x:Type ComboBoxItem}">
            <Setter Property="SnapsToDevicePixels" Value="true" />
            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="VerticalAlignment" Value="Stretch" />
            <Setter Property="FontSize" Value="16" />
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="Background" Value="PaleVioletRed"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ComboBoxItem">
                        <Border Name="Border"
                                Padding="5"
                                Margin="2"
                                BorderThickness="2"
                                CornerRadius="0"
                                Background="Transparent"
                                BorderBrush="Transparent" >
                            <TextBlock TextAlignment="Center">
                                    <ContentPresenter />
                            </TextBlock>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsHighlighted" Value="true">
                                <Setter TargetName="Border" Property="BorderBrush" Value="Gray"/>
                                <Setter TargetName="Border" Property="Background" Value="Cyan"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="ComboBoxToggleButton" TargetType="ToggleButton">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition Width="32" />
                            </Grid.ColumnDefinitions>
                            <Border x:Name="Border"
                                    Grid.ColumnSpan="2"
                                    CornerRadius="0"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                     BorderThickness="2" />
                            <Border Grid.Column="0"
                                    CornerRadius="0"
                                    Background="Transparent"
                                    BorderBrush="Transparent"
                                    BorderThickness="10" />
                             <Path x:Name="Arrow"
                                   Grid.Column="1"    
                                   Fill="{TemplateBinding Foreground}"
                                   Stroke="{TemplateBinding Foreground}"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"
                                   Data="M 0 0 L 8 12 L 16 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="Gray"/>
                                <Setter TargetName="Arrow" Property="Fill" Value="Gray" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">
            <Border x:Name="PART_ContentHost" Focusable="True" />
        </ControlTemplate>
        <Style TargetType="{x:Type ComboBox}">
            <Setter Property="Foreground" Value="Gray" />
            <Setter Property="BorderBrush" Value="PaleVioletRed" />
            <Setter Property="Background" Value="White" />
            <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="FontSize" Value="16" />
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="MinWidth" Value="50"/>
            <Setter Property="MinHeight" Value="32"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ComboBox">
                        <Grid>
                            <ToggleButton Name="ToggleButton"
                                          BorderBrush="{TemplateBinding BorderBrush}"
                                          Background="{TemplateBinding Background}"
                                          Foreground="{TemplateBinding Foreground}"
                                          Style="{StaticResource ComboBoxToggleButton}"
                                          Focusable="false"
                                          IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
                                          ClickMode="Press"/>
                            <ContentPresenter
                                Name="ContentSite"
                                IsHitTestVisible="False"
                                Content="{TemplateBinding SelectionBoxItem}"
                                ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                                ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                                Margin="10,3,30,3"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Center" />
                            <TextBox x:Name="PART_EditableTextBox"
                                    Style="{x:Null}"
                                    Template="{StaticResource ComboBoxTextBox}"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Margin="3,3,23,3"
                                    Focusable="True"                               
                                    Visibility="Hidden"
                                    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="PaleVioletRed"
                                        BorderThickness="2"
                                        BorderBrush="Gray"/>
                                    <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="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"/>
                                <Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,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>
    </Grid.Resources>
    <ComboBox Width="200" Height="75" Background="PaleVioletRed">
        <ComboBox.Items>
            <ComboBoxItem>test</ComboBoxItem>
            <ComboBoxItem>test</ComboBoxItem>
            <ComboBoxItem>test</ComboBoxItem>
            <ComboBoxItem>test</ComboBoxItem>
        </ComboBox.Items>
    </ComboBox>
</Grid>