自定义组合框样式答案

【问题标题】：A Custom ComboBox Style自定义组合框样式
【发布时间】：2011-08-01 23:56:43
【问题描述】：

我正在尝试为 WPF 组合框创建自定义样式，但无论何时，下拉菜单都不会打开，我想使用从我的按钮样式创建的以下 XAML 代码，但将其移植到与组合框控件一起使用，我该怎么做才能让下拉菜单显示出来，并让我能够更改鼠标悬停的颜色。

<ControlTemplate TargetType="Button">
    <Border Name="border" 
            BorderThickness="{TemplateBinding BorderThickness}"
            Padding="{TemplateBinding Padding}" 
            BorderBrush="{TemplateBinding BorderBrush}" 
            CornerRadius="1" 
            Background="{TemplateBinding Background}">
        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    </Border>
    <ControlTemplate.Triggers>
        <!--TODO: Set the right colors-->
        <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="border" Property="BorderBrush" Value="#FFC6C6C6" />
            <Setter Property="Foreground" Value="#FF333333" />
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="Foreground" Value="#FF666666" />
        </Trigger>
        <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Foreground" Value="#FFCCCCCC"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

【问题讨论】：

你的目标是什么？是让 ComboBox 切换按钮与应用程序中的其他按钮具有相同的样式，还是为每个 ComboBoxItem 添加鼠标悬停颜色？如果是后者，您可以通过设置项目本身的样式来做到这一点。
否则，我建议查看默认的 ComboBox 控件模板并修改您需要的内容，因为它是一个比按钮复杂得多的控件：msdn.microsoft.com/en-us/library/ms752094(v=vs.85).aspx
我希望将上面的样式控制模板重新编码以与组合框一起使用，包括边框等。如果有更简单的方法可以删除蓝色的鼠标悬停颜色，那么请成为我的客人
@crazyarabian：该页面上的模板是模板外观的示例，而不是默认模板。
@H.B.：感谢您澄清这一点；我想我没有足够关注

标签： c# wpf xaml combobox

【解决方案1】：

ComboBox 相当复杂，如果您更改 ControlTemplate 的一个方面，例如您需要提供所有其他功能的触发器，那么您最好的选择可能是复制默认模板并对其进行调整。可以在on MSDN 找到默认模板（参见Default WPF Themes 链接）。

【讨论】：

太好了，很有帮助，让我一路走好。谢谢

【解决方案2】：

如果你想改变整个 ComboBox 控件的外观，最简单的做法是从original template 开始并修改它以满足你的需要。要更改项目的突出显示方式，您需要重置 HighlightBrushKey 值。希望此资源对您有所帮助：http://bea.stollnitz.com/blog/?p=26

【讨论】：

【解决方案3】：

你可以试试这个模板并按照你想要的方式编辑它。

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
    <ControlTemplate x:Key="ComboBoxToggleButton" TargetType="ToggleButton">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="20" />
            </Grid.ColumnDefinitions>
            <Border
          x:Name="Border" 
          Grid.ColumnSpan="2"
          CornerRadius="0"
          Background="#FF535353"
          BorderBrush="#FF535353"
          BorderThickness="0" />
            <Border 
          Grid.Column="0"
          CornerRadius="0,0,0,0" 
          Margin="1" 
          Background="#FF323232" 
          BorderBrush="#FF535353"
          BorderThickness="3,0,0,0" />
            <Path 
          x:Name="Arrow"
          Grid.Column="1"     
          Fill="#3a3a3a"
          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>
    <ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">
        <Border x:Name="PART_ContentHost" Focusable="False" Height="30" BorderThickness="0" Background="Transparent" />
    </ControlTemplate>
    <Style x:Key="CmoboboxStyle" 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="8,0,0,0"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Left" />
                        <TextBox x:Name="PART_EditableTextBox"
                        Style="{x:Null}" 
                        Template="{StaticResource ComboBoxTextBox}" 
                        HorizontalAlignment="Left" 
                        VerticalAlignment="Center" 
                        Text="{TemplateBinding Text}"
                        Focusable="True" 
                        Background="Transparent"
                        Visibility="Hidden"
                        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="#FF323232"
                                BorderThickness="4,0,0,0"
                                BorderBrush="#FF535353"/>
                                <ScrollViewer Margin="4,0,0,0" 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,0,0"/>
                            <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>
</ResourceDictionary>

【讨论】：

我们如何设置组合框下拉菜单的样式？喜欢改变组合框项目的填充？

【解决方案4】：

您将不得不覆盖默认的 ComboBox 模板以使其正常工作（请参阅此 SO 帖子）。

您可以访问Expression Blend 吗？您可以使用它来提取和编辑控件模板。我觉得edit/create模板非常有用。

Show Me the Templates 是另一个查看控件模板的工具。

【讨论】：