Question

我正在为WPF中的一些ComboBox控件做一个模板。但是我想在这个模板中设置ComboBoxItems的样式。我只找到了如何从创建控件的位置应用Style，而不是从ComboBox的模板中应用。

我正在使用的模板取自这里： http://msdn.microsoft.com/en-us/library/ms752094.aspx

但ComboBoxItem样式（位于底部）已应用于所有ComboBoxItems（由于x:Key="{x:Type ComboBoxItem}"。

Answer 1

您应该交换msdn示例的样式定义

<Style x:Key="{x:Type ComboBox}"
       TargetType="{x:Type ComboBox}">

以下一个

<Style x:Key="MyComboBox" TargetType="{x:Type ComboBox}">

然后以下列方式明确地将样式分配给组合框

<ComboBox Style="{StaticResource MyComboBox}" />

x:Key Directive

x：Key的属性值可以是XamlName中定义的任何字符串语法或可以是通过标记扩展评估的对象。

msdn示例中定义样式的方式说明了如何覆盖组合框的默认样式，显式指定样式使用字符串而不是标记扩展来指定ComboBox资源中的样式。

修改

对于ComboBoxItems样式应该这样做，所以交换代码

<Style x:Key="{x:Type ComboBoxItem}" TargetType="{x:Type ComboBoxItem}">

代码

<Style x:Key="MyComboBox" TargetType="{x:Type ComboBox}">

并且还在ComboBox样式的代码中添加以下指令

<Setter Property="ItemContainerStyle" Value="{StaticResource MyComboxItem}"/>

这是一个简短的示例，说明如何在同一窗口中设置样式化的组合框和另一个具有默认样式的组合框。

XAML

<Window x:Class="WpfComboTemplate.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:coll="clr-namespace:System.Collections.ObjectModel;assembly=System"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <!--Control colors.-->
        <Color x:Key="WindowColor">#FFE8EDF9</Color>
        <Color x:Key="ContentAreaColorLight">#FFC5CBF9</Color>
        <Color x:Key="ContentAreaColorDark">#FF7381F9</Color>

        <Color x:Key="DisabledControlLightColor">#FFE8EDF9</Color>
        <Color x:Key="DisabledControlDarkColor">#FFC5CBF9</Color>
        <Color x:Key="DisabledForegroundColor">#FF888888</Color>

        <Color x:Key="SelectedBackgroundColor">#FFC5CBF9</Color>
        <Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color>

        <Color x:Key="ControlLightColor">White</Color>
        <Color x:Key="ControlMediumColor">#FF7381F9</Color>
        <Color x:Key="ControlDarkColor">#FF211AA9</Color>

        <Color x:Key="ControlMouseOverColor">#FF3843C4</Color>
        <Color x:Key="ControlPressedColor">#FF211AA9</Color>


        <Color x:Key="GlyphColor">#FF444444</Color>
        <Color x:Key="GlyphMouseOver">sc#1, 0.004391443, 0.002428215, 0.242281124</Color>

        <!--Border colors-->
        <Color x:Key="BorderLightColor">#FFCCCCCC</Color>
        <Color x:Key="BorderMediumColor">#FF888888</Color>
        <Color x:Key="BorderDarkColor">#FF444444</Color>

        <Color x:Key="PressedBorderLightColor">#FF888888</Color>
        <Color x:Key="PressedBorderDarkColor">#FF444444</Color>

        <Color x:Key="DisabledBorderLightColor">#FFAAAAAA</Color>
        <Color x:Key="DisabledBorderDarkColor">#FF888888</Color>

        <Color x:Key="DefaultBorderBrushDarkColor">Black</Color>

        <!--Control-specific resources.-->
        <Color x:Key="HeaderTopColor">#FFC5CBF9</Color>
        <Color x:Key="DatagridCurrentCellBorderColor">Black</Color>
        <Color x:Key="SliderTrackDarkColor">#FFC5CBF9</Color>

        <Color x:Key="NavButtonFrameColor">#FF3843C4</Color>

        <LinearGradientBrush x:Key="MenuPopupBrush"
                     EndPoint="0.5,1"
                     StartPoint="0.5,0">
            <GradientStop Color="{DynamicResource ControlLightColor}"
                Offset="0" />
            <GradientStop Color="{DynamicResource ControlMediumColor}"
                Offset="0.5" />
            <GradientStop Color="{DynamicResource ControlLightColor}"
                Offset="1" />
        </LinearGradientBrush>

        <LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill"
                     StartPoint="0,0"
                     EndPoint="1,0">
            <LinearGradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Color="#000000FF"
                    Offset="0" />
                    <GradientStop Color="#600000FF"
                    Offset="0.4" />
                    <GradientStop Color="#600000FF"
                    Offset="0.6" />
                    <GradientStop Color="#000000FF"
                    Offset="1" />
                </GradientStopCollection>
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>


        <ControlTemplate x:Key="ComboBoxToggleButton"
                 TargetType="{x:Type ToggleButton}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition Width="20" />
                </Grid.ColumnDefinitions>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal" />
                        <VisualState x:Name="MouseOver">
                            <Storyboard>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
                (GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                          Storyboard.TargetName="Border">
                                    <EasingColorKeyFrame KeyTime="0"
                                   Value="{StaticResource ControlMouseOverColor}" />
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Pressed" />
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
                (GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                          Storyboard.TargetName="Border">
                                    <EasingColorKeyFrame KeyTime="0"
                                   Value="{StaticResource DisabledControlDarkColor}" />
                                </ColorAnimationUsingKeyFrames>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).
                (SolidColorBrush.Color)"
                                          Storyboard.TargetName="Arrow">
                                    <EasingColorKeyFrame KeyTime="0"
                                   Value="{StaticResource DisabledForegroundColor}" />
                                </ColorAnimationUsingKeyFrames>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).
                (GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                          Storyboard.TargetName="Border">
                                    <EasingColorKeyFrame KeyTime="0"
                                   Value="{StaticResource DisabledBorderDarkColor}" />
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="CheckStates">
                        <VisualState x:Name="Checked">
                            <Storyboard>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
                (GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                          Storyboard.TargetName="Border">
                                    <EasingColorKeyFrame KeyTime="0"
                                   Value="{StaticResource ControlPressedColor}" />
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Unchecked" />
                        <VisualState x:Name="Indeterminate" />
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Border x:Name="Border"
            Grid.ColumnSpan="2"
            CornerRadius="2"
            BorderThickness="1">
                    <Border.BorderBrush>
                        <LinearGradientBrush EndPoint="0,1"
                             StartPoint="0,0">
                            <GradientStop Color="{DynamicResource BorderLightColor}"
                        Offset="0" />
                            <GradientStop Color="{DynamicResource BorderDarkColor}"
                        Offset="1" />
                        </LinearGradientBrush>
                    </Border.BorderBrush>
                    <Border.Background>

                        <LinearGradientBrush StartPoint="0,0"
                             EndPoint="0,1">
                            <LinearGradientBrush.GradientStops>
                                <GradientStopCollection>
                                    <GradientStop Color="{DynamicResource ControlLightColor}" />
                                    <GradientStop Color="{DynamicResource ControlMediumColor}"
                            Offset="1.0" />
                                </GradientStopCollection>
                            </LinearGradientBrush.GradientStops>
                        </LinearGradientBrush>

                    </Border.Background>
                </Border>
                <Border Grid.Column="0"
            CornerRadius="2,0,0,2"
            Margin="1" >
                    <Border.Background>
                        <SolidColorBrush Color="{DynamicResource ControlLightColor}"/>
                    </Border.Background>
                </Border>
                <Path x:Name="Arrow"
          Grid.Column="1"
          HorizontalAlignment="Center"
          VerticalAlignment="Center"
          Data="M 0 0 L 4 4 L 8 0 Z" >
                    <Path.Fill>
                        <SolidColorBrush Color="{DynamicResource GlyphColor}"/>
                    </Path.Fill>
                </Path>
            </Grid>
        </ControlTemplate>

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



        <Style x:Key="MyComboxItem"
       TargetType="{x:Type ComboBoxItem}">
            <Setter Property="SnapsToDevicePixels"
          Value="true" />
            <Setter Property="OverridesDefaultStyle"
          Value="true" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                        <Border x:Name="Border"
                Padding="2"
                SnapsToDevicePixels="true"
                Background="Transparent">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected" />
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Panel.Background).
                    (SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource SelectedBackgroundColor}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedUnfocused">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Panel.Background).
                    (SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource SelectedUnfocusedColor}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentPresenter />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>


        <Style x:Key="MyComboBox"
       TargetType="{x:Type 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="ItemContainerStyle" Value="{StaticResource MyComboxItem}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ComboBox}">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="MouseOver" />
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="PART_EditableTextBox"
                                                Storyboard.TargetProperty="(TextElement.Foreground).
                      (SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource DisabledForegroundColor}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="EditStates">
                                    <VisualState x:Name="Editable">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                 Storyboard.TargetName="PART_EditableTextBox">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="{x:Static Visibility.Visible}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                      Storyboard.TargetProperty="(UIElement.Visibility)"
                                                 Storyboard.TargetName="ContentSite">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="{x:Static Visibility.Hidden}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Uneditable" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ToggleButton x:Name="ToggleButton"
                        Template="{StaticResource ComboBoxToggleButton}"
                        Grid.Column="2"
                        Focusable="false"
                        ClickMode="Press"
                        IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, 
              RelativeSource={RelativeSource TemplatedParent}}"/>
                            <ContentPresenter x:Name="ContentSite"
                            IsHitTestVisible="False"
                            Content="{TemplateBinding SelectionBoxItem}"
                            ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                            ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                            Margin="3,3,23,3"
                            VerticalAlignment="Stretch"
                            HorizontalAlignment="Left">
                            </ContentPresenter>
                            <TextBox x:Name="PART_EditableTextBox"
                   Style="{x:Null}"
                   Template="{StaticResource ComboBoxTextBox}"
                   HorizontalAlignment="Left"
                   VerticalAlignment="Bottom"
                   Margin="3,3,23,3"
                   Focusable="True"
                   Background="Transparent"
                   Visibility="Hidden"
                   IsReadOnly="{TemplateBinding IsReadOnly}" />
                            <Popup x:Name="Popup"
                 Placement="Bottom"
                 IsOpen="{TemplateBinding IsDropDownOpen}"
                 AllowsTransparency="True"
                 Focusable="False"
                 PopupAnimation="Slide">
                                <Grid x:Name="DropDown"
                  SnapsToDevicePixels="True"
                  MinWidth="{TemplateBinding ActualWidth}"
                  MaxHeight="{TemplateBinding MaxDropDownHeight}">
                                    <Border x:Name="DropDownBorder"
                      BorderThickness="1">
                                        <Border.BorderBrush>
                                            <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
                                        </Border.BorderBrush>
                                        <Border.Background>
                                            <SolidColorBrush Color="{DynamicResource ControlLightColor}" />
                                        </Border.Background>
                                    </Border>
                                    <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="AllowsTransparency"
                   Value="true">
                                <Setter TargetName="DropDownBorder"
                    Property="CornerRadius"
                    Value="4" />
                                <Setter TargetName="DropDownBorder"
                    Property="Margin"
                    Value="0,2,0,0" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <ComboBox VerticalAlignment="Top"
                  ItemsSource="{Binding}">

        </ComboBox>
        <ComboBox VerticalAlignment="Top" 
                  Grid.Row="1" 
                  Style="{StaticResource MyComboBox}" 
                  ItemsSource="{Binding}">

        </ComboBox>
    </Grid>
</Window>

C＃背后

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfComboTemplate
{
    /// <summary>
    /// Logica di interazione per MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = new ObservableCollection<string>() {"Hello", "ComboBox"};
        }
    }
}

使用默认样式的组合框进行的场景拍摄 Default ComboBox

带有风格组合框的sceenshot Styled ComboBox

从ComboBox的模板在ComboBoxItem上设置样式

1 个答案: