组合框背景改变颜色

时间:2016-03-22 11:45:25

标签: c# wpf colors combobox background

我想知道如何改变组合框的背景。我知道您通常可以选择组合框,然后右键单击编辑副本并编辑模板,但由于组合框是数据模板的一部分,我无法选择组合框来执行此操作,我想知道如何做这个?我还尝试复制并粘贴一个普通的组合框模板。但是我接着出现了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>

1 个答案:

答案 0 :(得分:1)

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

这是一个很好的example

修改

以下是自定义Combobox的完整XAML。您可以随意使用不同的颜色来获得您想要的效果。所有的东西都是PaleVioletRed&#39;将是一种背景颜色,而青色&#39;将是所选项目的背景颜色。

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