WPF ComboBox自定义样式

<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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

砖农L

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值