更改自定义 WPF ComboBox 的背景

Changing background of custom WPF ComboBox

提问by Daniel

I've got a custom ComboBox which should react to the value of some dependency properties. (e.g. validation). Now, I just can't find out how to change the background of the combobox control in the triggers of the controltemplate... I can change the dropdown menu, but haven't yet found out how to change the background of the whole control. The dependency properties are set correctly, here's the XAML:

我有一个自定义 ComboBox，它应该对某些依赖属性的值做出反应。（例如验证）。现在，我只是找不到如何在controltemplate的触发器中更改组合框控件的背景...我可以更改下拉菜单，但还没有找到如何更改整个控件的背景. 依赖属性设置正确，这里是 XAML：

  <ControlTemplate x:Key="ComboBoxToggleButton" TargetType="ToggleButton">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="20" />
        </Grid.ColumnDefinitions>
        <Border
              x:Name="Border" 
              Grid.ColumnSpan="2"
              CornerRadius="2"
              Background="{StaticResource NormalBrush}"
              BorderBrush="{StaticResource NormalBorderBrush}"
              BorderThickness="1" />
        <Border 
              Grid.Column="0"
              CornerRadius="2,0,0,2" 
              Margin="1" 
              Background="{StaticResource WindowBackgroundBrush}" 
              BorderBrush="{StaticResource NormalBorderBrush}"
              BorderThickness="0,0,1,0" />
        <Path 
              x:Name="Arrow"
              Grid.Column="1"     
              Fill="{StaticResource GlyphBrush}"
              HorizontalAlignment="Center"
              VerticalAlignment="Center"
              Data="M 0 0 L 4 4 L 8 0 Z"/>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="ToggleButton.IsMouseOver" Value="true">
            <Setter TargetName="Border" Property="Background" Value="{StaticResource DarkBrush}" />
        </Trigger>
        <Trigger Property="ToggleButton.IsChecked" Value="true">
            <Setter TargetName="Border" Property="Background" Value="{StaticResource PressedBrush}" />
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
            <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
            <Setter TargetName="Arrow" Property="Fill" Value="{StaticResource DisabledForegroundBrush}" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

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

</ControlTemplate>

<Style x:Key="{x:Type local:ErgoDentComboBox}" TargetType="ComboBox" BasedOn="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="{x:Type local:ErgoDentComboBox}">
                <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" 
                            Margin="3,3,23,3"
                            Focusable="True" 
                          Background="Transparent"
                            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="{StaticResource WindowBackgroundBrush}"
                                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="{StaticResource DisabledForegroundBrush}"/>
                    </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="4"/>
                        <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>
                    <!-- THIS ISN'T WORKING -->
                    <Trigger Property="IsValidationError" Value="False">
                        <Setter Property="BorderBrush" Value="DarkGreen" />
                        <Setter Property="Background" Value="Green" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
    </Style.Triggers>
</Style>

In the code of the control I can easily set the background, how would I do this in the triggers?

在控件的代码中我可以轻松设置背景，我将如何在触发器中执行此操作？

Thanks

谢谢

Danny

丹尼

采纳答案by Mike Fuchs

I'm still slightly confused as to what you really want to change. I'll assume it's the ToggleButton background.

对于您真正想要改变的内容，我仍然有些困惑。我假设它是 ToggleButton 背景。

Since you have a separate ControlTemplate for the ToggleButton, I suggest you work with TemplateBinding, if you want to pass the color from your ComboBox template trigger to the ToggleButton template. The same method would apply for changing the border color.

由于 ToggleButton 有一个单独的 ControlTemplate TemplateBinding，如果要将颜色从 ComboBox 模板触发器传递到 ToggleButton 模板，我建议您使用。相同的方法适用于更改边框颜色。

In your ComboBox Template:

在您的组合框模板中：

<ToggleButton Name="ToggleButton" Template="{StaticResource ComboBoxToggleButton}" 
              Grid.Column="2" Focusable="false" ClickMode="Press"
              IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
              Background="{StaticResource WindowBackgroundBrush}"/> <!-- notice this line -->


 <Trigger Property="IsValidationError" Value="False">
     <Setter TargetName="DropDownBorder" Property="Background" Value="Yellow" /> <!-- changing dropdown background -->
     <Setter TargetName="ToggleButton" Property="Background" Value="Yellow" /> <!-- changing togglebutton background -->
 </Trigger>

In your ToggleButton Template:

在您的 ToggleButton 模板中：

 <Border Grid.Column="0" CornerRadius="2,0,0,2" Margin="1" 
         BorderBrush="{StaticResource NormalBorderBrush}" BorderThickness="0,0,1,0"
         Background="{TemplateBinding Background}" /> <!-- notice this line -->

回答by Vidas Vasiliauskas

I think you should try setting Background property for your ContentSite (content presenter as it is the one who shows combobox content). Otherwise a workaround idea - wrap the content presenter with a border and set is bacground.

我认为您应该尝试为您的 ContentSite 设置 Background 属性（内容展示者，因为它是显示组合框内容的人）。否则，一个解决方法的想法 - 用边框包裹内容演示者并设置是免费的。

回答by Wael hamada

The Background property will just change the edit and drop arrow area of a WPF Combobox. To change other colors like popup background and highlight color, you have to add some brushes to the resource dictionary, mapping to the system colors:

Background 属性只会更改 WPF 组合框的编辑和下拉箭头区域。要更改弹出背景和突出显示颜色等其他颜色，您必须向资源字典添加一些画笔，映射到系统颜色：

var combo = new Combobox(); 
combo.Background = Brushes.Yellow;
combo.Foreground = Brushes.Blue;
combo.Resources.Add(SystemColors.WindowBrushKey, Brushes.Yellow);
combo.Resources.Add(SystemColors.HighlightBrushKey, Brushes.Red);

<Combobox Background="Yellow" Foreground="Blue">
   <Combobox.Resources>
      <SolidColorBrush x:Key="{x:Static SystemColors.WindowBrushKey}" Color="Yellow" />
      <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red" />
   </Combobox.Resources>
</Combobox>

resource :[a link] http://www.codeproject.com/Tips/84637/TIP-Change-background-of-WPF-Combobox

资源：[链接] http://www.codeproject.com/Tips/84637/TIP-Change-background-of-WPF-Combobox

回答by DRapp

Here's what I did... Where you have your "ContentPresenter", I wrapped mine with a "border" and assigned IT a "name" value such as

这就是我所做的......在您拥有“ContentPresenter”的地方，我用“边框”包裹了我的并为它分配了一个“名称”值，例如

<Border Name="presenterBorder"
    Background="White"
    BorderThickness="0"
    BorderBrush="Transparent"
    Margin="0"
    Grid.Column="0" >

    <ContentPresenter
        Name="ContentSite"
        IsHitTestVisible="False" 
        Content="{TemplateBinding SelectionBoxItem}"
        ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
        ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
        Margin="3,3,23,3"
        VerticalAlignment="Center"
        HorizontalAlignment="Left" />
</Border>

Then, change your trigger... In my case, since I dont have the same property you had, I just simulated via "IsMouseOver". I changed colors, but critical thing is "TargetName". You want to change the background and border of the control named "presenterBorder" which is the border you've wrapped the text content presenter with.

然后，更改您的触发器...就我而言，由于我没有您拥有的相同属性，我只是通过“IsMouseOver”进行模拟。我改变了颜色，但关键是“TargetName”。您想更改名为“presenterBorder”的控件的背景和边框，该控件是您用来包装文本内容演示器的边框。

<Trigger Property="IsMouseOver" Value="True" >
    <Setter Property="BorderBrush" Value="Red" TargetName="presenterBorder" />
    <Setter Property="Background" Value="Maroon" TargetName="presenterBorder" />
</Trigger>