ControlTemplate in WPF —— ComboBox

最新推荐文章于 2023-12-28 14:28:33 发布
最新推荐文章于 2023-12-28 14:28:33 发布
阅读量157 收藏
点赞数 
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                    mc:Ignorable="d">

  <ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="Shared.xaml" />
  </ResourceDictionary.MergedDictionaries>

  <!-- SimpleStyles: ComboBox -->
  <ControlTemplate x:Key="ComboBoxToggleButton"
                   TargetType="{x:Type ToggleButton}">
    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="20" />
      </Grid.ColumnDefinitions>
      <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
          <VisualState x:Name="Normal" />
          <VisualState x:Name="MouseOver">
            <Storyboard>
              <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
                  (GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                            Storyboard.TargetName="Border">
                <EasingColorKeyFrame KeyTime="0"
                                     Value="{StaticResource ControlMouseOverColor}" />
              </ColorAnimationUsingKeyFrames>
            </Storyboard>
          </VisualState>
          <VisualState x:Name="Pressed" />
          <VisualState x:Name="Disabled">
            <Storyboard>
              <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
                  (GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                            Storyboard.TargetName="Border">
                <EasingColorKeyFrame KeyTime="0"
                                     Value="{StaticResource DisabledControlDarkColor}" />
              </ColorAnimationUsingKeyFrames>
              <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).
                  (SolidColorBrush.Color)"
                                            Storyboard.TargetName="Arrow">
                <EasingColorKeyFrame KeyTime="0"
                                     Value="{StaticResource DisabledForegroundColor}" />
              </ColorAnimationUsingKeyFrames>
              <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).
                  (GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                            Storyboard.TargetName="Border">
                <EasingColorKeyFrame KeyTime="0"
                                     Value="{StaticResource DisabledBorderDarkColor}" />
              </ColorAnimationUsingKeyFrames>
            </Storyboard>
          </VisualState>
        </VisualStateGroup>
        <VisualStateGroup x:Name="CheckStates">
          <VisualState x:Name="Checked">
            <Storyboard>
              <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
                  (GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                            Storyboard.TargetName="Border">
                <EasingColorKeyFrame KeyTime="0"
                                     Value="{StaticResource ControlPressedColor}" />
              </ColorAnimationUsingKeyFrames>
            </Storyboard>
          </VisualState>
          <VisualState x:Name="Unchecked" />
          <VisualState x:Name="Indeterminate" />
        </VisualStateGroup>
      </VisualStateManager.VisualStateGroups>
      <Border x:Name="Border"
              Grid.ColumnSpan="2"
              CornerRadius="2"
              BorderThickness="1">
        <Border.BorderBrush>
          <LinearGradientBrush EndPoint="0,1"
                               StartPoint="0,0">
            <GradientStop Color="{DynamicResource BorderLightColor}"
                          Offset="0" />
            <GradientStop Color="{DynamicResource BorderDarkColor}"
                          Offset="1" />
          </LinearGradientBrush>
        </Border.BorderBrush>
        <Border.Background>

          <LinearGradientBrush StartPoint="0,0"
                               EndPoint="0,1">
            <LinearGradientBrush.GradientStops>
              <GradientStopCollection>
                <GradientStop Color="{DynamicResource ControlLightColor}" />
                <GradientStop Color="{DynamicResource ControlMediumColor}"
                              Offset="1.0" />
              </GradientStopCollection>
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>

        </Border.Background>
      </Border>
      <Border Grid.Column="0"
              CornerRadius="2,0,0,2"
              Margin="1" >
          <Border.Background>
              <SolidColorBrush Color="{DynamicResource ControlLightColor}"/>
          </Border.Background>
      </Border>
      <Path x:Name="Arrow"
            Grid.Column="1"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Data="M 0 0 L 4 4 L 8 0 Z" >
          <Path.Fill>
              <SolidColorBrush Color="{DynamicResource GlyphColor}"/>
          </Path.Fill>
      </Path>
    </Grid>
  </ControlTemplate>

  <ControlTemplate x:Key="ComboBoxTextBox"
                   TargetType="{x:Type TextBox}">
    <Border x:Name="PART_ContentHost"
            Focusable="False"
            Background="{TemplateBinding Background}" />
  </ControlTemplate>

  <Style x:Key="{x:Type ComboBox}"
         TargetType="{x:Type ComboBox}">
    <Setter Property="SnapsToDevicePixels"
            Value="true" />
    <Setter Property="OverridesDefaultStyle"
            Value="true" />
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
            Value="Auto" />
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility"
            Value="Auto" />
    <Setter Property="ScrollViewer.CanContentScroll"
            Value="true" />
    <Setter Property="MinWidth"
            Value="120" />
    <Setter Property="MinHeight"
            Value="20" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ComboBox}">
          <Grid>
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="MouseOver" />
                <VisualState x:Name="Disabled">
                  <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="PART_EditableTextBox"
                                                  Storyboard.TargetProperty="(TextElement.Foreground).
                        (SolidColorBrush.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource DisabledForegroundColor}" />
                    </ColorAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
              </VisualStateGroup>
              <VisualStateGroup x:Name="EditStates">
                <VisualState x:Name="Editable">
                  <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                   Storyboard.TargetName="PART_EditableTextBox">
                      <DiscreteObjectKeyFrame KeyTime="0"
                                              Value="{x:Static Visibility.Visible}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames
                        Storyboard.TargetProperty="(UIElement.Visibility)"
                                                   Storyboard.TargetName="ContentSite">
                      <DiscreteObjectKeyFrame KeyTime="0"
                                              Value="{x:Static Visibility.Hidden}" />
                    </ObjectAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="Uneditable" />
              </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <ToggleButton x:Name="ToggleButton"
                          Template="{StaticResource ComboBoxToggleButton}"
                          Grid.Column="2"
                          Focusable="false"
                          ClickMode="Press"
                          IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, 
                RelativeSource={RelativeSource TemplatedParent}}"/>
            <ContentPresenter x:Name="ContentSite"
                              IsHitTestVisible="False"
                              Content="{TemplateBinding SelectionBoxItem}"
                              ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                              ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                              Margin="3,3,23,3"
                              VerticalAlignment="Stretch"
                              HorizontalAlignment="Left">
            </ContentPresenter>
            <TextBox x:Name="PART_EditableTextBox"
                     Style="{x:Null}"
                     Template="{StaticResource ComboBoxTextBox}"
                     HorizontalAlignment="Left"
                     VerticalAlignment="Bottom"
                     Margin="3,3,23,3"
                     Focusable="True"
                     Background="Transparent"
                     Visibility="Hidden"
                     IsReadOnly="{TemplateBinding IsReadOnly}" />
            <Popup x:Name="Popup"
                   Placement="Bottom"
                   IsOpen="{TemplateBinding IsDropDownOpen}"
                   AllowsTransparency="True"
                   Focusable="False"
                   PopupAnimation="Slide">
              <Grid x:Name="DropDown"
                    SnapsToDevicePixels="True"
                    MinWidth="{TemplateBinding ActualWidth}"
                    MaxHeight="{TemplateBinding MaxDropDownHeight}">
                <Border x:Name="DropDownBorder"
                        BorderThickness="1">
                  <Border.BorderBrush>
                    <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
                  </Border.BorderBrush>
                  <Border.Background>
                    <SolidColorBrush Color="{DynamicResource ControlLightColor}" />
                  </Border.Background>
                </Border>
                <ScrollViewer Margin="4,6,4,6"
                              SnapsToDevicePixels="True">
                  <StackPanel IsItemsHost="True"
                              KeyboardNavigation.DirectionalNavigation="Contained" />
                </ScrollViewer>
              </Grid>
            </Popup>
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger Property="HasItems"
                     Value="false">
              <Setter TargetName="DropDownBorder"
                      Property="MinHeight"
                      Value="95" />
            </Trigger>
            <Trigger Property="IsGrouping"
                     Value="true">
              <Setter Property="ScrollViewer.CanContentScroll"
                      Value="false" />
            </Trigger>
            <Trigger SourceName="Popup"
                     Property="AllowsTransparency"
                     Value="true">
              <Setter TargetName="DropDownBorder"
                      Property="CornerRadius"
                      Value="4" />
              <Setter TargetName="DropDownBorder"
                      Property="Margin"
                      Value="0,2,0,0" />
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <Style x:Key="{x:Type ComboBoxItem}"
         TargetType="{x:Type ComboBoxItem}">
    <Setter Property="SnapsToDevicePixels"
            Value="true" />
    <Setter Property="OverridesDefaultStyle"
            Value="true" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ComboBoxItem}">
          <Border x:Name="Border"
                  Padding="2"
                  SnapsToDevicePixels="true"
                  Background="Transparent">
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="SelectionStates">
                <VisualState x:Name="Unselected" />
                <VisualState x:Name="Selected">
                  <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                  Storyboard.TargetProperty="(Panel.Background).
                      (SolidColorBrush.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource SelectedBackgroundColor}" />
                    </ColorAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="SelectedUnfocused">
                  <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                  Storyboard.TargetProperty="(Panel.Background).
                      (SolidColorBrush.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource SelectedUnfocusedColor}" />
                    </ColorAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
              </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <ContentPresenter />
          </Border>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>


</ResourceDictionary>

 

weixin_34395205
关注
【WPF】Combobox默认样式学习笔记（Presenter和Trigger）
weixin_56814032的博客
08-02 863
Combobox学习笔记
WPF的ComboBox 数据模板自定义
weixin_33709219的博客
09-09 351
WPF的ComboBox 有些时候不能满足用户需求，需要对数据内容和样式进行自定义，下面就简要介绍一下用数据模板（DataTemplate）的方式对ComboBox 内容进行定制： 原型设计如下： 步骤： 1、新建一个WPF应用程序WpfAppDemo（VS2012)，并新建一个images文件夹（上传图片素材）; 2、在主界面MainWindow.xaml文件中添加一个Label、...
WPF中ComboBox控件显示的样式设置
Fourier的博客
11-03 9900
1、首先需要给ComboBox绑定一个集合 2、集合中的每一项是一个对象，比如是一个Student对象,需要在该类中添加一个静态DataTemplateKey类型的属性（必须是静态的）。如下：public class Student { private static DataTemplateKey _resourceKey string Name{get;set;} Int
wpf_combobox_tree下拉树形控件
02-05
1. **控件模板**：在WPF中，我们可以使用ControlTemplate来定义控件的外观。对于树形ComboBox，我们需要创建一个模板，包含一个TextBox（显示当前选择）和一个Popup（作为下拉树形列表）。这个模板需要使用...
WPF combobox button 漂亮样式
12-30
总结起来，WPF中的ComboBox按钮样式定制是通过Style和ControlTemplate结合VisualStateManager来实现的。通过这种方法，开发者可以自由地设计出符合应用风格的精美ComboBox，提升用户体验。在实际开发中，不断尝试和...
ComboBox.rar_WPF控件样式 _wpf combobox_wpf combobox style_wpf combo
07-13
在Windows Presentation Foundation (WPF) 中，ComboBox是一个常用的控件，它结合了下拉列表和文本框的功能，用户可以输入文本或从下拉列表中选择一个项。本资源"ComboBox.rar"显然关注的是如何自定义WPF中的...
WPF 简单的ComboBox自定义样式。
chulijun3107的博客
09-28 5671
ComboBox样式显示效果
WPF自定义下拉框ComboBox样式
van的博客
07-28 3849
很多时候不知道控件样式的构成，可以上msdn查看控件的模板与样式。 ComboBox下拉框主要放内容的是Popup控件，有三种显示items的方式： ① 默认的ItemsPresenter 相当于占位符作用，竖向显示 ② ItemsPanel 竖向/横向显示： 使用StackPanel/WrapPanel ③ ItemContainerStyle items样式可自定义（包括鼠标滑过等的效果） （...
wpf treeView数据模板 menu数据模板 Listbox和ComboBox数据模板
11-19
本项目包含treeview中的层级嵌套的数据模板，Listbox的数据模板，ComboBox的数据模板等。能给初学者学习模板起到引导作用。
ComboBox下拉模板自定义样式
09-24
使用Blend 对ComboBox控件进行模板样式重写
WPF-简单自定义ComboBox 控件
hisxiwu的博客
04-12 1134
Wpf-简单自定义ComboBox控件
WPF ComboBox学习4--数据模板的使用
flysh05的专栏
09-07 890
效果图如下: 1. 将ComboBox绑定到系统Colors cmbColors.ItemsSource = typeof(Colors).GetProperties(); 2. 使用数据模板创建Item，创建一个正方形用当前颜色填充，后加一个文本框显示颜色名称 <ComboBox Name="cmbColors" SelectionChanged="cmbColors_SelectionChanged"> <...
修改ComboBox控件模板实例
happmaoo的专栏
12-28 287
&lt;iframe align="top" marginwidth="0" marginheight="0" src="http://www.zealware.com/46860.html" frameborder="0" width="468" scrolling="no" height="60"&gt;&lt;/ifra
WPF自定义ComboBox
dengjieming5263的博客
12-11 641
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}"> <Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" /> </Contr...
浅谈WPF各种模板 控件模板ControlTemplate，指定控件的呈现样式 数据模板DataTemplate，指定子项数据的呈现样式 子控件模板ItemPanelTempla指定子项控件布局
weijia3624的专栏
12-28 2196
控件模板，是指整个控件的展示和布局。如ComboBox，可分为文本区域，下拉按钮区域，Items的Popup区域。Template就是管理这些位置的布局。
WPF下拉框ComboBox样式
十步一杀
02-11 6861
显示效果下图： 1、静态显示如图1，悬浮如图2 2、下拉的Popup带阴影（无Border）；下拉三角图标用的是自己的png图片，可任意替换（其他或Path数据等自己处理）；宽高等可直接在样式代码里修改。 3、实际项目里，对下拉的滚动条做了美化处理，此处没附带上相关代码。有需求的可自己添加或用第三方控件库帮助类实现（如Panuon，其ScrollViewerHelper类可方便的修改宽度和圆角） 样式代码如下： <ResourceDictionary x
WPF中ComboBox如何倒角
最新发布
09-29
在Windows Presentation Foundation (WPF)中，如果想让ComboBox（组合框）呈现出倒角效果，你可以通过设置其边框样式和控制模板来实现。以下是步骤： 1. **修改边框样式**: 使用`Border`控件，可以设置`CornerRadius`属性来指定所有四个角落的圆角半径。例如： ```xml <ComboBox> <ComboBox.Template> <ControlTemplate TargetType="ComboBox"> <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="5" <!-- 设置合适的圆角值 --> Background="{TemplateBinding Background}"> ...其他内容... </Border> </ControlTemplate> </ComboBox.Template> </ComboBox> ``` 2. **自定义模板**: 如果你想更精细地控制外观，可以创建一个自定义模板，包括一个带圆角的`Popup`（弹出窗口）： ```xml <Style TargetType="ComboBox"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ComboBox"> <Border x:Name="border" SnapsToDevicePixels="True" CornerRadius="5" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <ScrollViewer Margin="2"> <Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom"> <ItemsPresenter/> </Popup> </ScrollViewer> </Border> <Popup.IsOpen> <MultiTrigger> <MultiTrigger.Conditions> <Condition Binding="{TemplateBinding HasItems}" Value="true"/> <Condition Binding="{TemplateBinding IsReadOnly}" Value="false"/> </MultiTrigger.Conditions> <Setter Property="IsOpen" Value="True"/> </MultiTrigger> </Popup.IsOpen> </ControlTemplate> </Setter.Value> </Setter> </Style> ``` 注意：`CornerRadius`的单位通常是像素，确保它与UI设计风格一致。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值