<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:NemoVideoWindow">
<Style TargetType="ToggleButton" x:Key="ComboxStyleBtn">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<!--下拉按钮内部背景色-->
<Grid x:Name="Back">
<Border Background="White" Opacity="0" Cursor="Hand"/>
<Image x:Name="toggleBtn" HorizontalAlignment="Right" Margin="0,0,12,0" Cursor="Hand" Source="pack://application:,,,/image\controlBar\hideBtnHover.png" Width="14" Height="14"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--Combox-->
<Style TargetType="ComboBox" x:Key="ComboBoxStyle">
<Setter Property="ItemContainerStyle">
<Setter.Value>
<!--ComBoxItem-->
<Style TargetType="ComboBoxItem">
<Setter Property="MinHeight" Value="32"></Setter>
<Setter Property="MinWidth" Value="260"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
<Border x:Name="_borderbg" Background="Transparent"/>
<TextBlock Margin="3 0 3 0" VerticalAlignment="Center" x:Name="_txt" Foreground="#333" Text="{Binding Name}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="_borderbg" Property="Background" Value="#F5F7FA"></Setter>
</Trigger>
<Trigger Property="IsHighlighted" Value="True">
<Setter TargetName="_txt" Property="Foreground" Value="#409EFF"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Border BorderBrush="Black" BorderThickness="1" CornerRadius="2">
<Grid Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.7*"/>
<ColumnDefinition Width="0.3*" MaxWidth="30"/>
</Grid.ColumnDefinitions>
<!--文字区域背景和边线样式-->
<TextBlock VerticalAlignment="Center" Margin="12,0,0,0" Grid.Column="0" Foreground="Black" Text="{TemplateBinding Text}"/>
<!--右侧下拉button设置-->
<ToggleButton Grid.Column="0" Grid.ColumnSpan="2" Style="{StaticResource ComboxStyleBtn}" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"/>
<!--弹出popup整体设置-->
<Popup IsOpen="{TemplateBinding IsDropDownOpen}" HorizontalAlignment="Center" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide">
<Border CornerRadius="1" MaxHeight="{TemplateBinding MaxDropDownHeight}" Width="260" x:Name="DropDown" SnapsToDevicePixels="True">
<Border.Effect>
<DropShadowEffect Color="Black" BlurRadius="2" ShadowDepth="0" Opacity="0.5"/>
</Border.Effect>
<ScrollViewer Margin="4,6,4,6" Style="{DynamicResource ScrollViewerStyle}" MaxHeight="{TemplateBinding MaxDropDownHeight}" SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
<!-- StackPanel 用于显示子级,方法是将 IsItemsHost 设置为 True -->
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" Background="White"/>
</ScrollViewer>
</Border>
</Popup>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
特别注意:
<ToggleButton Grid.Column="0" Grid.ColumnSpan="2" Style="{StaticResource ComboxStyleBtn}" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"/>
此处的Grid.ColumnSpan一定得是2,及前面定义的Grid列数,使ToggleButton占满整个ComboBox,不然ComboBox点击前面的文字显示部分不会弹出下拉框,因为此处ToggleButton占满了控件,所以前面的ToggleButton样式按钮前面的部分就得是透明的,但是不能是Transparent。