WPF - 样式组合框答案

【问题标题】：WPF - styling comboboxesWPF - 样式组合框
【发布时间】：2011-01-28 13:06:51
【问题描述】：

我正在尝试在 WPF 中设置组合框的样式，使它们为白色，并具有与文本框相同的边框。到目前为止我有以下样式，但不知道如何设置边框：

<Style TargetType="ComboBox">
    <Setter Property="Margin" Value="0,2,0,2" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="Background" Value="White" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ComboBox}">
                 ???
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

【问题讨论】：

标签： wpf combobox styles

【解决方案1】：

在您的控制模板之间，请实现以下内容：

<Grid SnapsToDevicePixels="true">
    <Border
    x:Name="Bd"
    Background="Transparent"
    BorderBrush="#FF888888"
    Padding="1"
    CornerRadius="5" BorderThickness="2,2,2,2">
        <Grid
        Grid.IsSharedSizeScope="true">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" 
                   SharedSizeGroup="ComboBoxButton" />
            </Grid.ColumnDefinitions>
            <Border x:Name="SelectedItemBorder" Grid.ColumnSpan="2" />
            <ContentPresenter
              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
              Grid.Column="1"
              Content="{TemplateBinding SelectionBoxItem}"
              ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
              ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" 
              TextBlock.Foreground="White"
              Height="Auto"
              Margin="2,2,7,2"
              VerticalAlignment="Center" />
            <ToggleButton
              Style="{StaticResource ComboBoxTransparentButtonStyle}"
              Grid.ColumnSpan="3"
              IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, 
                          RelativeSource={RelativeSource TemplatedParent}}"
              Opacity="0.25" />
        </Grid>
    </Border>
    <Popup Focusable="false" AllowsTransparency="true"
      IsOpen="{Binding Path=IsDropDownOpen, 
               RelativeSource={RelativeSource TemplatedParent}}"
      Placement="Bottom" 
      PopupAnimation="{DynamicResource 
                      {x:Static SystemParameters.ComboBoxPopupAnimationKey}}"
      x:Name="PART_Popup">
        <Border CornerRadius="5" x:Name="DropDownBorder"
          MaxHeight="{TemplateBinding MaxDropDownHeight}"
          MinWidth="{TemplateBinding ActualWidth}"
          Background="#FF7E7E7E"
          BorderThickness="1">
            <ScrollViewer Foreground="#FFFFFFFF">
                <ItemsPresenter
                   SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                   KeyboardNavigation.DirectionalNavigation="Contained"
                   TextBlock.Foreground="White"
                   VerticalAlignment="Stretch" />
            </ScrollViewer>
        </Border>
    </Popup>
</Grid>
<ControlTemplate.Triggers>
    <Trigger Property="IsFocused" Value="True">
        <Setter Property="BorderBrush" TargetName="Bd" Value="#FFFFFFFF"/>
    </Trigger>
    <Trigger Property="IsMouseOver" Value="True">
    <Setter Property="BorderBrush" TargetName="Bd" Value="#FFD2ECCF"/>
    </Trigger>
    <MultiTrigger>
        <MultiTrigger.Conditions>
            <Condition Property="IsSelectionBoxHighlighted" Value="true" />
            <Condition Property="IsDropDownOpen" Value="false" />
        </MultiTrigger.Conditions>
        <Setter Property="Foreground" Value="white" />
        <Setter Property="BorderBrush" Value="{x:Null}" />
    </MultiTrigger>
    <Trigger Property="IsSelectionBoxHighlighted" Value="true">
        <Setter Property="Background" TargetName="SelectedItemBorder"
           Value="Transparent" />
    </Trigger>
    <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true">
    </Trigger>
    <Trigger Property="HasItems" Value="false">
        <Setter Property="MinHeight" TargetName="DropDownBorder" Value="95" />
    </Trigger>
    <Trigger Property="IsEnabled" Value="false">
        <Setter Property="Foreground" 
           Value="{DynamicResource 
                  {x:Static SystemColors.GrayTextBrushKey}}" />
    <Setter Property="Background" TargetName="Bd" 
       Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
    </Trigger>
    <Trigger Property="IsGrouping" Value="true">
        <Setter Property="ScrollViewer.CanContentScroll" Value="false" />
    </Trigger>
</ControlTemplate.Triggers>

【讨论】：

【解决方案2】：

使用表达式混合。如果您希望ComboBox 看起来与TextBox 相似，请通过右键单击TextBlock 并选择Edit Template > Edit a Copy 来查看TextBox 模板，然后使用它来修改您的ComboBox 模板！

【讨论】：