devbox
小桥流水78
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

WPF 简单的ComboBox自定义样式。_wpf combox

作者：小桥流水78 | 2024-08-04 15:49:28

赞

踩

wpf combox

先看下效果图，是不是自己想要的效果，点击之前：

点击下拉框之后：

好，如果满足自己的需求就继续往下看。如何制作一个简单的ComboBox样式。 先分解一下ComboBox的构成。由三部分组成，1 TextBlock，2 ToggleButton，3 Popup组成。如下图：

 那么分别作出三个控件的样式，组合在一起，就是一个简单的Combobx样式了。首先看一下ToggleButton的样式：

  1.  <ControlTemplate x:Key="MyToggleBtnStyle" 
  2.                          TargetType="ToggleButton">
  3.             <Border Name="MyBorder"
  4.                     Background="AliceBlue"
  5.                     BorderThickness="1" 
  6.                     BorderBrush="LightGray">
  7.                 <Path Name="MyPath"
  8.                       Fill="LightGray"
  9.                       Height="10"
  10.                       Width="10"
  11.                       Data="M29.917 8.6c-0.158-0.356-0.509-0.6-0.917-0.6h-26c-0.552 0-1 0.448-1 1 0 0.263 0.102 0.502 0.268 0.681l-0.001-0.001 13 14c0.183 0.197 0.444 0.32 0.733 0.32s0.55-0.123 0.732-0.319l0.001-0.001 13-14c0.166-0.178 0.267-0.417 0.267-0.68 0-0.145-0.031-0.282-0.086-0.406l0.003 0.006z"
  12.                       Stretch="Fill">
  13.                 </Path>
  14.             </Border>
  15.             <ControlTemplate.Triggers>
  16.                 <Trigger Property="IsMouseOver" Value="True">
  17.                     <Setter TargetName="MyPath" Property="Fill" Value="#FF22A0E2"></Setter>
  18.                     <Setter TargetName="MyBorder" Property="Background" Value="White"></Setter>
  19.                 </Trigger>
  20.             </ControlTemplate.Triggers>
  21.         </ControlTemplate>

主要就是定义2个地方。

1：一个方向向下的一个三角形。

2：鼠标滑过是的显示颜色。

TextBlock的显示样式：它被定义在了ComboBox样式中了。Combobox左边是TextBlock，右边是ToggleButton。

  1. <ControlTemplate TargetType="ComboBox">
  2.                         <Grid>
  3.                             <Grid.ColumnDefinitions>
  4.                                 <ColumnDefinition Width="7*"/>
  5.                                 <ColumnDefinition Width="3*" MaxWidth="20"/>
  6.                             </Grid.ColumnDefinitions>
  7.                             <Border Grid.Column="0"
  8.                                     BorderBrush="LightGray"
  9.                                     BorderThickness="1,1,0,1"
  10.                                     Background="AliceBlue" CornerRadius="3 0 0 3">
  11.                                 <TextBox x:Name="myTxt"
  12.                                          Text="{TemplateBinding Text}"
  13.                                          Background="Transparent"
  14.                                          BorderThickness="0"
  15.                                          VerticalContentAlignment="Center"
  16.                                          FontSize="14"
  17.                                          FontWeight="Bold"
  18.                                          Foreground="Blue"/>
  19.                             </Border>
  20.                             <Border Grid.Column="1"
  21.                                     BorderBrush="LightGray"
  22.                                     BorderThickness="1" CornerRadius="0 3 3 0">
  23.                                 <ToggleButton Content="&#xeda2;" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
  24.                                               ClickMode="Press"
  25.                                               Template="{StaticResource MyToggleBtnStyle}"></ToggleButton>
  26.                             </Border>
  27.                         </Grid>
  28.                     </ControlTemplate>

它是定义在ComboBox样式资源中的。对它的显示修改有几个地方。

1：CornerRadius。定义了左上，左下的圆角。CornerRadius="3 0 0 3" 它代表的意思是左上，右上，右下，左下。顺时针顺序的圆角角度。在把右边的ToggleButton 的CornerRadius="0 3 3 0" 右上，右下定义下圆角。这样整个ComboBox都是角度为3的圆角了。

Popup显示样式：基本没有改动，用原始的显示。

  1.  <Popup Name="MyPopup"
  2.                                    IsOpen="{TemplateBinding IsDropDownOpen}"
  3.                                    Placement="Bottom">
  4.                                 <Border MinWidth="{TemplateBinding ActualWidth}"
  5.                                         MaxHeight="{TemplateBinding MaxDropDownHeight}">
  6.                                     <ScrollViewer MaxHeight="{TemplateBinding MaxDropDownHeight}"
  7.                                                   HorizontalScrollBarVisibility="Auto"
  8.                                                   VerticalScrollBarVisibility="Auto">
  9.                                         <StackPanel Background="AliceBlue"
  10.                                                     IsItemsHost="True"/>
  11.                                     </ScrollViewer>
  12.                                 </Border>
  13.                             </Popup>

好了。贴一下总的代码。总共两个页，一个xaml文件，一个.cs文件。

xmal：

  1. <Window x:Class="ComboboxTest.MainWindow"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.         xmlns:local="clr-namespace:ComboboxTest"
  7.         mc:Ignorable="d"
  8.         Title="ComboBoxStyle" Height="450" Width="800" Background="Green">
  9.     <Window.Resources>
  10.         <ControlTemplate x:Key="MyToggleBtnStyle" 
  11.                          TargetType="ToggleButton">
  12.             <Border Name="MyBorder"
  13.                     Background="AliceBlue"
  14.                     BorderThickness="1" 
  15.                     BorderBrush="LightGray">
  16.                 <Path Name="MyPath"
  17.                       Fill="LightGray"
  18.                       Height="10"
  19.                       Width="10"
  20.                       Data="M29.917 8.6c-0.158-0.356-0.509-0.6-0.917-0.6h-26c-0.552 0-1 0.448-1 1 0 0.263 0.102 0.502 0.268 0.681l-0.001-0.001 13 14c0.183 0.197 0.444 0.32 0.733 0.32s0.55-0.123 0.732-0.319l0.001-0.001 13-14c0.166-0.178 0.267-0.417 0.267-0.68 0-0.145-0.031-0.282-0.086-0.406l0.003 0.006z"
  21.                       Stretch="Fill">
  22.                 </Path>
  23.             </Border>
  24.             <ControlTemplate.Triggers>
  25.                 <Trigger Property="IsMouseOver" Value="True">
  26.                     <Setter TargetName="MyPath" Property="Fill" Value="#FF22A0E2"></Setter>
  27.                     <Setter TargetName="MyBorder" Property="Background" Value="White"></Setter>
  28.                 </Trigger>
  29.             </ControlTemplate.Triggers>
  30.         </ControlTemplate>
  31.  
  32.         <Style x:Key="MyCbbStyle" TargetType="ComboBox">
  33.             <Setter Property="BorderBrush" Value="#0e66fa"/>
  34.             <Setter Property="Template">
  35.                 <Setter.Value>
  36.                     <ControlTemplate TargetType="ComboBox">
  37.                         <Grid>
  38.                             <Grid.ColumnDefinitions>
  39.                                 <ColumnDefinition Width="7*"/>
  40.                                 <ColumnDefinition Width="3*" MaxWidth="20"/>
  41.                             </Grid.ColumnDefinitions>
  42.                             <Border Grid.Column="0"
  43.                                     BorderBrush="LightGray"
  44.                                     BorderThickness="1,1,0,1"
  45.                                     Background="AliceBlue" CornerRadius="3 0 0 3">
  46.                                 <TextBox x:Name="myTxt"
  47.                                          Text="{TemplateBinding Text}"
  48.                                          Background="Transparent"
  49.                                          BorderThickness="0"
  50.                                          VerticalContentAlignment="Center"
  51.                                          FontSize="14"
  52.                                          FontWeight="Bold"
  53.                                          Foreground="Blue"/>
  54.                             </Border>
  55.                             <Border Grid.Column="1"
  56.                                     BorderBrush="LightGray"
  57.                                     BorderThickness="1" CornerRadius="0 3 3 0">
  58.                                 <ToggleButton Content="&#xeda2;" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
  59.                                               ClickMode="Press"
  60.                                               Template="{StaticResource MyToggleBtnStyle}"></ToggleButton>
  61.                             </Border>
  62.                             <Popup Name="MyPopup"
  63.                                    IsOpen="{TemplateBinding IsDropDownOpen}"
  64.                                    Placement="Bottom">
  65.                                 <Border MinWidth="{TemplateBinding ActualWidth}"
  66.                                         MaxHeight="{TemplateBinding MaxDropDownHeight}">
  67.                                     <ScrollViewer MaxHeight="{TemplateBinding MaxDropDownHeight}"
  68.                                                   HorizontalScrollBarVisibility="Auto"
  69.                                                   VerticalScrollBarVisibility="Auto">
  70.                                         <StackPanel Background="AliceBlue"
  71.                                                     IsItemsHost="True"/>
  72.                                     </ScrollViewer>
  73.                                 </Border>
  74.                             </Popup>
  75.                         </Grid>
  76.                     </ControlTemplate>
  77.                 </Setter.Value>
  78.             </Setter>
  79.         </Style>
  80.     </Window.Resources>
  81.     <Grid>
  82.         <StackPanel Orientation="Vertical"
  83.                     HorizontalAlignment="Center"
  84.                     VerticalAlignment="Center">
  85.             <Grid>
  86.                 <StackPanel Orientation="Vertical"
  87.                     HorizontalAlignment="Center"
  88.                     VerticalAlignment="Center">
  89.                     <ComboBox Name="myCbb"
  90.                       Height="25"
  91.                       Width="250"
  92.                       DisplayMemberPath="Name"
  93.                       SelectedValuePath="ID"
  94.                       SelectedIndex="0"
  95.                       Style="{StaticResource MyCbbStyle}"/>
  96.                 </StackPanel>
  97.             </Grid>
  98.         </StackPanel>
  99.     </Grid>
  100.  
  101. </Window>

.cs

  1. using System.Windows;
  2.  
  3. namespace FontTest
  4. {
  5.     /// <summary>
  6.     /// MainWindow.xaml 的交互逻辑
  7.     /// </summary>
  8.     public partial class MainWindow : Window
  9.     {
  10.         public MainWindow()
  11.         {
  12.             InitializeComponent();
  13.         }
  14.     }
  15.  
  16.     public class CbbData
  17.     {
  18.         public string ID { get; set; }
  19.  
  20.         public string Name { get; set; }
  21.     }
  22. }

好了。一个ComboBox样式制作就介绍到这里，以后再介绍Button的自定义样式。

资源下载地址：https://download.csdn.net/download/chulijun3107/88414656

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小桥流水78/article/detail/928495
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号