WPF开发者QQ群： 340500857 

有小伙伴需要实现ComboBox下拉框带水印，并且选择Item内容后水印默认从中间到顶部。Item需要展示图文，选择后的数据展示图文。

欢迎转发、分享、点赞，谢谢大家~。

效果如下：

一、Xaml代码如下

 <Window.Resources><Style TargetType="ToggleButton" x:Key="ComboxStyleBtn"><Setter Property="Template"><Setter.Value><ControlTemplate><Border x:Name="Back" Background="Transparent"><Path Name="PathFill" Fill="Black"  Width="10" Height="6" StrokeThickness="0" Data="M5,0 L10,10 L0,10 z" RenderTransformOrigin="0.5,0.5" Stretch="Fill"><Path.RenderTransform><TransformGroup><ScaleTransform/><SkewTransform/><RotateTransform Angle="180"/><TranslateTransform/></TransformGroup></Path.RenderTransform></Path></Border><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter TargetName="PathFill" Property="Fill" Value="gray"></Setter></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter>
</Style><Style TargetType="ComboBox" x:Key="ComboBoxStyle"><Setter Property="ItemContainerStyle"><Setter.Value><Style TargetType="ComboBoxItem"><Setter Property="MinHeight" Value="22"></Setter><Setter Property="MinWidth" Value="60"></Setter><Setter Property="Foreground" Value="Black"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="ComboBoxItem"><Border Name="Back" Background="White"  BorderThickness="0,0,0,0" BorderBrush="#81D779" ><ContentPresenter ContentSource="{Binding Source}" VerticalAlignment="Center" HorizontalAlignment="Left"></ContentPresenter></Border><ControlTemplate.Triggers><Trigger Property="IsHighlighted" Value="True"><Setter TargetName="Back" Property="Background" Value="Pink"></Setter></Trigger><Trigger Property="IsSelected" Value="True"><Setter Property="Background" Value="Red" /></Trigger><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="AliceBlue" /></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter>
</Style></Setter.Value></Setter><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="ComboBox"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="0.7*"/><ColumnDefinition Width="0.3*" MaxWidth="30"/></Grid.ColumnDefinitions><TextBlock x:Name="_watermark" Text="已选择emoji"  Margin="60,6,0,0" Foreground="Gray" Grid.Column="0" VerticalAlignment="Top"></TextBlock><ContentPresenter Grid.Column="0"ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" Content="{TemplateBinding SelectionBoxItem}"VerticalAlignment="Center" Margin="2,10,0,0"></ContentPresenter><Border Grid.ColumnSpan="2" BorderBrush="#abadb3"  BorderThickness="1"/><ToggleButton Grid.Column="1" Style="{StaticResource ComboxStyleBtn}" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"></ToggleButton><Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide" ><Border CornerRadius="1" BorderBrush="#5A5A5A" BorderThickness="1,0,1,1" Background="White" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True"><Border.Effect><DropShadowEffect Color="Gray" BlurRadius="2" ShadowDepth="0" Opacity="1"/></Border.Effect><ScrollViewer Margin="0,0,0,0"  SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"><VirtualizingStackPanel  IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained"  /></ScrollViewer></Border></Popup></Grid><ControlTemplate.Triggers><Trigger Property="Text" Value="{x:Null}"><Setter TargetName="_watermark" Property="VerticalAlignment" Value="Center"/><Setter TargetName="_watermark" Property="Margin" Value="10,0,0,0"/><Setter TargetName="_watermark" Property="Text" Value="请选择emoji"/></Trigger><Trigger Property="Text" Value=""><Setter TargetName="_watermark" Property="VerticalAlignment" Value="Center"/><Setter TargetName="_watermark" Property="Margin" Value="10,0,0,0"/><Setter TargetName="_watermark" Property="Text" Value="请选择emoji"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><DataTemplate x:Key="comboBoxItemDataTemplate"><WrapPanel><Image Source="{Binding ImagesPath}" Width="60" Height="60"/><TextBlock Text="{Binding Text}" VerticalAlignment="Center" Padding="4,0"/></WrapPanel></DataTemplate></Window.Resources><Grid><ComboBox Name="comboBoxArray"Width="200"Height="100"Style="{StaticResource  ComboBoxStyle}" ItemTemplate="{StaticResource comboBoxItemDataTemplate}"></ComboBox></Grid>

二、Xaml.cs代码如下

public partial class MainWindow : Window{public MainWindow(){InitializeComponent();var array = new List<ItemModel>();for (int i = 0; i < 11; i++){array.Add(new ItemModel { ImagesPath = new BitmapImage(new Uri(string.Format("pack://application:,,,/WpfComboBox;component/Images/{0}.png", i.ToString()))), Text = "Item" + i.ToString() });}this.comboBoxArray.ItemsSource = array;}}public class ItemModel{public ImageSource ImagesPath { get; set; }public string Text { get; set; }}

源码地址QQ群->“文件”->“开源项目”->" 【水印+图文】WpfComboBox.rar“

WPF开发者QQ群： 340500857 

blogs： https://www.cnblogs.com/yanjinhua

Github：https://github.com/yanjinhuagood

出处：https://www.cnblogs.com/yanjinhua

版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

转载请著名作者 出处 https://github.com/yanjinhuagood