wpf combox样式自定义

wpf   combox原生的控件样式 非常的强大，而且支持自动完成、下拉单选、下拉方向、下拉框可定义大小等。

一个原生的combox的样式是这样子的：

 

 

 在某些时候，根据设计的需要，combox样式需要更改，以下是我根据自己理解所写的combox自定义的样式。这个样式是由ToggleButton和ComboBox组成，先展示一下我改变之后的combox的样式。

 

 

 

 

我这是为了区分所以设置了不同的颜色，颜色可以根据自己的喜欢改变，话不多说，先展示ToggleButton的代码。

 

<!--Combox右边button-->

        <Style x:Key="ComboBoxReadonlyToggleButton" TargetType="ToggleButton">
            <Setter Property="IsTabStop" Value="false" />
            <Setter Property="ClickMode" Value="Press" />
            <Setter Property="MinHeight" Value="22"></Setter>
            <Setter Property="MinWidth" Value="80"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Grid>
                            <Border x:Name="Background" BorderBrush="#787878"
                                BorderThickness="1"  Background="#198B53">
                                <Path x:Name="Path" Height="Auto" Margin="0,0.082,0,8.859" Width="Auto"
                                    Stretch="Fill" Stroke="{x:Null}" StrokeLineJoin="Round"
                                    StrokeThickness="1"
                                    Data="M0,3 C0,1.3431457 1.3431457,0 3,0 L129,0 C130.65686,0 132,1.3431457 132,3 L132,13.853975 C86.718803,0.055481441 26.160202,27.400364 0,11.585506 z">
                                    <Path.Fill>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <!--combox背景色#198B53-->
                                            <GradientStop Color="#198B53" Offset="0.113" />
                                            <GradientStop Color="#198B53" Offset="1" />
                                        </LinearGradientBrush>
                                    </Path.Fill>
                                </Path>
                            </Border>
                            <!--倒三角的颜色#0099ff-->
                            <Path Height="10" x:Name="Path1" HorizontalAlignment="Right"
                                VerticalAlignment="Center" Margin="5,0,7,0" Width="10"
                                Fill="#0099ff" Stretch="Fill" Stroke="#0099ff"
                                Data="M0.5,0.5 L9.5,0.5 L5.0625,9.5 L5.0625,9.5 z" />
                        </Grid>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <!--移入时按钮颜色 图案颜色 背景颜色 锯齿颜色-->
                                <Setter TargetName="Path1" Property="Fill" Value="#198B53"></Setter>
                                <Setter TargetName="Background" Property="Background" Value="#198B53"></Setter>
                                <Setter TargetName="Background" Property="BorderBrush" Value="#198B53"></Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

 

然后下面是ComboBox代码：

  <Style x:Key="DefaultComboBoxStyle" TargetType="ComboBox">
            <Setter Property="Foreground" Value="#FFFFFFFF" />
            <Setter Property="Width" Value="100"></Setter>
            <Setter Property="Height" Value="30"></Setter>
            <Setter Property="VerticalAlignment" Value="Center"></Setter>
            <Setter Property="HorizontalContentAlignment" Value="Left"></Setter>
            <Setter Property="BorderBrush" Value="#FFFFFFFF" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
            <Setter Property="Padding" Value="4,3" />
            <Setter Property="ItemContainerStyle">
                <Setter.Value>
                    <!--这个是下拉框的属性设置-->
                    <Style TargetType="ComboBoxItem">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="ComboBoxItem">
                                    <Border Name="Back"  Background="#525252"  BorderThickness="0,0,0,0" BorderBrush="#525252" >
                                        <ContentPresenter ContentSource="{Binding Source}"  VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10,0,0,0" ></ContentPresenter>
                                    </Border>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter TargetName="Back" Property="Background" Value="#484848"></Setter>
                                        </Trigger>
                                        <!--下拉框背景色-->
                                        <Trigger Property="IsHighlighted" Value="True">
                                            <Setter TargetName="Back" Property="Background" Value="#3A99FF"></Setter>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ComboBox">
                        <Grid x:Name="MainGrid">
                           <Popup x:Name="PART_Popup" Margin="1" Grid.Row="1" 
                                IsOpen="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}">
                                <Grid x:Name="Shdw" MaxHeight="{TemplateBinding MaxDropDownHeight}"
                                    MinWidth="{Binding Path=ActualWidth, ElementName=MainGrid}" >
                                    <!--下拉框的属性设置-->
                                        <!--Background -->
                                    <Border x:Name="Bordertop"   Width="100" CornerRadius="0" BorderThickness="0"  Background="#525252">
                                        <Border.Effect>
                                            <DropShadowEffect Color="Black"  BlurRadius="2" ShadowDepth="0" Opacity="1"/>
                                        </Border.Effect>
                                        <ScrollViewer Width="150">
                                            <ItemsPresenter />
                                        </ScrollViewer>
                                    </Border>
                                </Grid>
                            </Popup>
                            <ToggleButton Style="{StaticResource ComboBoxReadonlyToggleButton}"
                                BorderThickness="3" BorderBrush="#03ffea"   Background="{TemplateBinding Background}"
                                IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" />
                            <!--combox字体的间距-->
                            <TextBlock Margin="10 0 0 0" 
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                IsHitTestVisible="false"
                                Text="{TemplateBinding Text}"
                               />
                        </Grid>
                            
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

　

 

　最后在combox引用样式就大功告成啦：

<StackPanel Margin ="0 20 0 0">
            <ComboBox   Style="{StaticResource DefaultComboBoxStyle}"  VerticalContentAlignment="Center" HorizontalContentAlignment="Left">
                <ComboBoxItem>ComboBox1</ComboBoxItem>
                <ComboBoxItem IsSelected =" True" >ComboBox2</ComboBoxItem>
                <ComboBoxItem>ComboBox3</ComboBoxItem>
            </ComboBox>

        </StackPanel>