【WPF】 一个好看的ComBox样式
先上图
话不多说，直接上代码
1 <!--Combox--> 2 <Style TargetType="{x:Type ComboBox}" x:Key="cmbstyle"> 3 <Setter Property="Background" Value="White"/> 4 <Setter Property="ItemContainerStyle"> 5 <Setter.Value> 6 <!--ComBoxItem--> 7 <Style TargetType="ComboBoxItem"> 8 <Setter Property="MinHeight" Value="22"></Setter> 9 <Setter Property="MinWidth" Value="60"></Setter> 10 <Setter Property="Template"> 11 <Setter.Value> 12 <ControlTemplate TargetType="ComboBoxItem"> 13 <Border Name="Back" Background="Transparent" BorderThickness="0,0,0,0" BorderBrush="#81D779" > 14 <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,0,0,0"></ContentPresenter> 15 </Border> 16 <ControlTemplate.Triggers> 17 <Trigger Property="IsMouseOver" Value="True"> 18 <Setter TargetName="Back" Property="Background" Value="LightGray"></Setter> 19 </Trigger> 20 <Trigger Property="IsHighlighted" Value="True"> 21 <Setter TargetName="Back" Property="Background" Value="LightGray"></Setter> 22 </Trigger> 23 </ControlTemplate.Triggers> 24 </ControlTemplate> 25 </Setter.Value> 26 </Setter> 27 </Style> 28 </Setter.Value> 29 </Setter> 30 <Setter Property="Template"> 31 <Setter.Value> 32 <ControlTemplate TargetType="{x:Type ComboBox}"> 33 <Border BorderThickness="0" CornerRadius="3" Width="100" Height="30" Background="{TemplateBinding Background}" > 34 <Grid > 35 <Grid.ColumnDefinitions> 36 <ColumnDefinition Width="3*"/> 37 <ColumnDefinition Width="*"/> 38 </Grid.ColumnDefinitions> 39 <Grid Grid.Column="0" x:Name="grid"> 40 <ToggleButton 41 Width="{Binding ElementName=grid,Path=ActualWidth}" 42 Height="{Binding ElementName=grid, Path=ActualHeight}" 43 Content="{TemplateBinding Text}" VerticalAlignment="Center" 44 HorizontalAlignment="Left" Margin="5,0,0,0" 45 BorderThickness="0" 46 Foreground="{TemplateBinding Foreground}" 47 Background="{TemplateBinding Background}" 48 IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press" 49 > 50 <ToggleButton.Style > 51 <Style TargetType="ToggleButton"> 52 <Setter Property="Background" Value="White"/> 53 <Setter Property="Template"> 54 <Setter.Value> 55 <ControlTemplate TargetType="ToggleButton"> 56 <Border Background="{TemplateBinding Background}" BorderThickness="0" > 57 <TextBlock Foreground="{TemplateBinding Foreground}" Text="{TemplateBinding Content}" Margin="4 0 0 0" HorizontalAlignment="Left" VerticalAlignment="Center"/> 58 </Border> 59 </ControlTemplate> 60 </Setter.Value> 61 </Setter> 62 <Style.Triggers> 63 <Trigger Property="IsMouseOver" Value="True"> 64 <Setter Property="Background" Value="White"/> 65 </Trigger> 66 <Trigger Property="IsMouseOver" Value="False"> 67 <Setter Property="Background" Value="White"/> 68 </Trigger> 69 </Style.Triggers> 70 </Style> 71 </ToggleButton.Style> 72 </ToggleButton> 73 </Grid> 74 75 <Grid Grid.Column="1" > 76 <ToggleButton IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" 77 Foreground="{TemplateBinding Foreground}" 78 ClickMode="Press"> 79 <ToggleButton.Style> 80 <Style TargetType="ToggleButton"> 81 <Setter Property="Background" Value="White"/> 82 <Setter Property="Template"> 83 <Setter.Value> 84 <ControlTemplate TargetType="ToggleButton"> 85 <Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}"> 86 <Grid> 87 <TextBlock Foreground="{TemplateBinding Foreground}" x:Name="arrow_tb" Text="" Style="{StaticResource iconTb_style}" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5"> 88 <TextBlock.RenderTransform> 89 <TransformGroup> 90 <ScaleTransform/> 91 <SkewTransform/> 92 <RotateTransform/> 93 <TranslateTransform/> 94 </TransformGroup> 95 </TextBlock.RenderTransform> 96 </TextBlock> 97 </Grid> 98 </Border> 99 <ControlTemplate.Triggers> 100 <Trigger Property="IsChecked" Value="True"> 101 102 </Trigger> 103 <EventTrigger RoutedEvent="Checked"> 104 <BeginStoryboard> 105 <Storyboard > 106 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="arrow_tb" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"> 107 <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/> 108 <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="180"/> 109 </DoubleAnimationUsingKeyFrames> 110 </Storyboard> 111 </BeginStoryboard> 112 </EventTrigger> 113 114 <EventTrigger RoutedEvent="Unchecked"> 115 <BeginStoryboard> 116 <Storyboard > 117 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="arrow_tb" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"> 118 <EasingDoubleKeyFrame KeyTime="00:00:00" Value="180"/> 119 <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/> 120 </DoubleAnimationUsingKeyFrames> 121 </Storyboard> 122 </BeginStoryboard> 123 </EventTrigger> 124 </ControlTemplate.Triggers> 125 </ControlTemplate> 126 </Setter.Value> 127 </Setter> 128 </Style> 129 </ToggleButton.Style> 130 </ToggleButton> 131 </Grid> 132 <Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide"> 133 <Border CornerRadius="1" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True"> 134 <Border.Effect> 135 <DropShadowEffect Color="Black" BlurRadius="2" ShadowDepth="0" Opacity="0.5"/> 136 </Border.Effect> 137 <ScrollViewer Margin="4,6,4,6" Style="{DynamicResource ScrollViewerStyle}" MaxHeight="{TemplateBinding MaxDropDownHeight}" SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True"> 138 <!-- StackPanel 用于显示子级，方法是将 IsItemsHost 设置为 True --> 139 <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" Background="White"/> 140 </ScrollViewer> 141 </Border> 142 </Popup> 143 </Grid> 144 145 146 <Border.Effect> 147 <DropShadowEffect ShadowDepth="-1" Opacity="0.3" Color="#FF969696" BlurRadius="5"/> 148 </Border.Effect> 149 </Border> 150 </ControlTemplate> 151 </Setter.Value> 152 </Setter> 153 154 155 </Style>
中间有个地方用到了字体，跑步起来报错直接去掉就行了。
