WPF Combobox Style

最新推荐文章于 2024-08-29 16:25:48 发布

奔跑吧牛宝宝

最新推荐文章于 2024-08-29 16:25:48 发布

阅读量692

点赞数

分类专栏： WPF 文章标签： wpf

本文链接：https://blog.csdn.net/linbing1988/article/details/119461091

版权

WPF 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了如何自定义WPF ComboBox控件的外观和交互，包括使用模板、触发器和状态切换。通过组合TextBox和ToggleButton，展示了如何实现下拉菜单效果，并提供了相关样式和触发条件的设置。

摘要由CSDN通过智能技术生成

 <ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">
            <Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
        </ControlTemplate>
        <ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
            <Grid Cursor="Hand">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition Width="40" />
                </Grid.ColumnDefinitions>
                <Border x:Name="bd" Grid.Column="0" Grid.ColumnSpan="2" BorderThickness="1" CornerRadius="3" Background="White" BorderBrush="#e8e8e8" />
                <Border Grid.Column="1"  CornerRadius="3" Margin="2" Background="White" Cursor="Hand" >
                </Border>
                <Path x:Name="Arrow" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Data="M286.165333 353.834667a42.666667 42.666667 0 1 0-60.330666 60.330666l256 256a42.666667 42.666667 0 0 0 60.330666 0l256-256a42.666667 42.666667 0 1 0-60.330666-60.330666L512 579.669333 286.165333 353.834667z" Margin="16,12,10,10" Stretch="Fill" Fill="Gray" >
                    <Path.RenderTransform>
                        <RotateTransform x:Name="trans" Angle="0"/>
                    </Path.RenderTransform>
                </Path>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="bd" Property="BorderBrush" Value="#008aec"/>
                </Trigger>
                <DataTrigger Binding="{Binding Path=IsDropDownOpen,RelativeSource={RelativeSource TemplatedParent}}" Value="True">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard >
                                <DoubleAnimation  Storyboard.TargetName="trans" Storyboard.TargetProperty="Angle" To="180" Duration="0:0:0.3"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="trans" Storyboard.TargetProperty="Angle"  To="0" Duration="0:0:0.3"></DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.ExitActions>
                </DataTrigger>

            </ControlTemplate.Triggers>
        </ControlTemplate>
        <Style TargetType="{x:Type ComboBoxItem}" x:Key="MyComboBoxItemStyle">
            <Setter Property="Cursor" Value="Hand"></Setter>
            <Setter Property="Height" Value="30"></Setter>

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                        <Border x:Name="Bd">
                            <ContentPresenter  Margin="10,0,0,0" VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter Property="Foreground" Value="#008aec"/>
                                <Setter Property="FontWeight" Value="Bold"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter TargetName="Bd" Property="Background" Value="#F1F3F3"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="{x:Type ComboBox}">
            <Setter Property="ItemContainerStyle" Value="{StaticResource MyComboBoxItemStyle}"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ComboBox}">
                        <Grid>
                            <!-- ToggleButton 已数据绑定到 ComboBox 本身以切换 IsDropDownOpen -->
                            <ToggleButton Grid.Column="2" Template="{DynamicResource ComboBoxToggleButton}" x:Name="ToggleButton" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"/>
                            <ContentPresenter  Margin="10,3,23,3" x:Name="ContentSite" VerticalAlignment="Center" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" IsHitTestVisible="False"/>
                            <!-- 必须将 TextBox 命名为 PART_EditableTextBox，否则 ComboBox 将无法识别它 -->
                            <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}"/>
                            <!-- Popup 可显示 ComboBox 中的项列表。IsOpen 已数据绑定到通过 ComboBoxToggleButton 来切换的 IsDropDownOpen -->
                            <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="Gray"  BorderThickness="1"/>
                                    <ScrollViewer Margin="4,6,4,6" Style="{DynamicResource SimpleScrollViewer}" SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
                                        <!-- StackPanel 用于显示子级，方法是将 IsItemsHost 设置为 True -->
                                        <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" Background="White" HorizontalAlignment="Stretch"/>
                                    </ScrollViewer>
                                </Grid>
                            </Popup>
                        </Grid>
              
                    </ControlTemplate>
             
                </Setter.Value>
            </Setter>
        </Style>