WPF实现下拉框带图文和水印

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