如何在WPF中自定义组合框按钮外观

Question

想知道是否有人知道如何改变wpf组合框上按钮的外观？ 如果你想知道我只是想改变它的形状和背景。

谢谢。

Answer 1

您可以使用Expression Blend轻松修改ControlTemplate或控件样式。

下面是一个将使用ComboBox的简单样式的示例，我已将“切换”按钮颜色修改为红色。

<LinearGradientBrush x:Key="NormalBrush" EndPoint="0,1" StartPoint="0,0"> 
     <GradientStop Color="#EEE" Offset="0.0"/> 
     <GradientStop Color="#CCC" Offset="1.0"/> 
    </LinearGradientBrush> 
    <LinearGradientBrush x:Key="NormalBorderBrush" EndPoint="0,1" StartPoint="0,0"> 
     <GradientStop Color="#CCC" Offset="0.0"/> 
     <GradientStop Color="#444" Offset="1.0"/> 
    </LinearGradientBrush> 

    <!-- LightBrush is used for content areas such as Menu, Tab Control background --> 
    <LinearGradientBrush x:Key="LightBrush" EndPoint="0,1" StartPoint="0,0"> 
     <GradientStop Color="#FFF" Offset="0.0"/> 
     <GradientStop Color="#EEE" Offset="1.0"/> 
    </LinearGradientBrush> 

    <!-- MouseOverBrush is used for MouseOver in Button, Radio Button, CheckBox --> 
    <LinearGradientBrush x:Key="MouseOverBrush" EndPoint="0,1" StartPoint="0,0"> 
     <GradientStop Color="#FFF" Offset="0.0"/> 
     <GradientStop Color="#AAA" Offset="1.0"/> 
    </LinearGradientBrush> 

    <!-- PressedBrush is used for Pressed in Button, Radio Button, CheckBox --> 
    <LinearGradientBrush x:Key="PressedBrush" EndPoint="0,1" StartPoint="0,0"> 
     <GradientStop Color="#BBB" Offset="0.0"/> 
     <GradientStop Color="#EEE" Offset="0.1"/> 
     <GradientStop Color="#EEE" Offset="0.9"/> 
     <GradientStop Color="#FFF" Offset="1.0"/> 
    </LinearGradientBrush> 
    <LinearGradientBrush x:Key="PressedBorderBrush" EndPoint="0,1" StartPoint="0,0"> 
     <GradientStop Color="#444" Offset="0.0"/> 
     <GradientStop Color="#888" Offset="1.0"/> 
    </LinearGradientBrush> 

    <!-- SelectedBackgroundBrush is used for the Selected item in ListBoxItem, ComboBoxItem--> 
    <SolidColorBrush x:Key="SelectedBackgroundBrush" Color="#DDD"/> 

    <!-- Disabled Brushes are used for the Disabled look of each control --> 
    <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888"/> 
    <SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE"/> 
    <SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA"/> 

    <!-- Used for background of ScrollViewer, TreeView, ListBox, Expander, TextBox, Tab Control --> 
    <SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF"/> 

    <!-- DefaultedBorderBrush is used to show KeyBoardFocus --> 
    <LinearGradientBrush x:Key="DefaultedBorderBrush" EndPoint="0,1" StartPoint="0,0"> 
     <GradientStop Color="#777" Offset="0.0"/> 
     <GradientStop Color="#000" Offset="1.0"/> 
    </LinearGradientBrush> 

    <SolidColorBrush x:Key="SolidBorderBrush" Color="#888"/> 
    <SolidColorBrush x:Key="LightBorderBrush" Color="#AAA"/> 
    <SolidColorBrush x:Key="LightColorBrush" Color="#DDD"/> 

    <!-- Used for Checkmark, Radio button, TreeViewItem, Expander ToggleButton glyphs --> 
    <SolidColorBrush x:Key="GlyphBrush" Color="#444"/> 

    <Style x:Key="test" TargetType="{x:Type ComboBox}"> 
    <Setter Property="SnapsToDevicePixels" Value="true"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type ComboBox}"> 
       <Grid> 
        <!-- The ToggleButton is databound to the ComboBox itself to toggle IsDropDownOpen --> 
        <ToggleButton Grid.Column="2" Template="{DynamicResource ToggleButtonControlTemplate1}" x:Name="ToggleButton" Focusable="false" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"/> 
        <ContentPresenter HorizontalAlignment="Left" Margin="3,3,23,3" x:Name="ContentSite" VerticalAlignment="Center" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" IsHitTestVisible="False"/> 

        <!-- The TextBox must be named PART_EditableTextBox or ComboBox will not recognize it --> 
        <TextBox Visibility="Hidden" Template="{DynamicResource ComboBoxTextBox}" HorizontalAlignment="Left" Margin="3,3,23,3" x:Name="PART_EditableTextBox" Style="{x:Null}" VerticalAlignment="Center" Focusable="True" Background="Transparent" IsReadOnly="{TemplateBinding IsReadOnly}"/> 

        <!-- The Popup shows the list of items in the ComboBox. IsOpen is databound to IsDropDownOpen which is toggled via the ComboBoxToggleButton --> 
        <Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide"> 
         <Grid MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True"> 
          <Border x:Name="DropDownBorder" Background="{DynamicResource WindowBackgroundBrush}" BorderBrush="{DynamicResource SolidBorderBrush}" BorderThickness="1"/> 
          <ScrollViewer Margin="4,6,4,6" Style="{DynamicResource SimpleScrollViewer}" SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True"> 

           <!-- The StackPanel is used to display the children by setting IsItemsHost to be True --> 
           <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained"/> 

          </ScrollViewer> 
         </Grid> 
        </Popup> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <!-- This forces the DropDown to have a minimum size if it is empty --> 
        <Trigger Property="HasItems" Value="false"> 
         <Setter Property="MinHeight" Value="95" TargetName="DropDownBorder"/> 
        </Trigger> 
        <Trigger Property="IsEnabled" Value="false"> 
         <Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}"/> 
        </Trigger> 
        <Trigger Property="IsGrouping" Value="true"> 
         <Setter Property="ScrollViewer.CanContentScroll" Value="false"/> 
        </Trigger> 
        <Trigger Property="AllowsTransparency" SourceName="Popup" Value="true"> 
         <Setter Property="CornerRadius" Value="4" TargetName="DropDownBorder"/> 
         <Setter Property="Margin" Value="0,2,0,0" TargetName="DropDownBorder"/> 
        </Trigger> 
        <Trigger Property="IsEditable" Value="true"> 
         <Setter Property="IsTabStop" Value="false"/> 
         <Setter Property="Visibility" Value="Visible" TargetName="PART_EditableTextBox"/> 
         <Setter Property="Visibility" Value="Hidden" TargetName="ContentSite"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 
<ControlTemplate x:Key="ToggleButtonControlTemplate1" TargetType="{x:Type ToggleButton}"> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition/> 
      <ColumnDefinition Width="20"/> 
     </Grid.ColumnDefinitions> 
     <Rectangle Grid.ColumnSpan="2" HorizontalAlignment="Stretch" x:Name="Rectangle" VerticalAlignment="Stretch" Width="Auto" Height="Auto" RadiusX="5" RadiusY="5" Fill="{DynamicResource NormalBrush}" Stroke="{DynamicResource NormalBorderBrush}"/> 
     <Rectangle Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" RadiusX="5" RadiusY="5" Fill="{DynamicResource WindowBackgroundBrush}" Stroke="{DynamicResource NormalBorderBrush}"/> 
     <Path Grid.Column="1" HorizontalAlignment="Center" x:Name="Arrow" VerticalAlignment="Center" Fill="Red" Data="M 0 0 L 4 4 L 8 0 Z"/> 
    </Grid> 
    <ControlTemplate.Triggers> 
     <Trigger Property="IsMouseOver" Value="true"> 
      <Setter Property="Fill" Value="{DynamicResource MouseOverBrush}" TargetName="Rectangle"/> 
     </Trigger> 
     <Trigger Property="IsChecked" Value="true"> 
      <Setter Property="Fill" Value="{DynamicResource PressedBrush}" TargetName="Rectangle"/> 
     </Trigger> 
     <Trigger Property="IsEnabled" Value="False"> 
      <Setter Property="Fill" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Rectangle"/> 
      <Setter Property="Stroke" Value="{DynamicResource DisabledBorderBrush}" TargetName="Rectangle"/> 
      <Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}"/> 
      <Setter Property="Fill" Value="{DynamicResource DisabledForegroundBrush}" TargetName="Arrow"/> 
     </Trigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 

要更改切换按钮的形状或背景，你必须修改ControlsTemplate“ToggleButtonControlTemplate1”的例子。

Answer 2

为此使用控制模板。