如何在WPF中创建点击弹出下拉选单的图片控件

Got it！我完全懂你想要的效果——就是要一张干干净净的纯图片当触发按钮，点击它弹出下拉选项，而且选中的项得显示勾选标记对吧？之前尝试用图片加下拉控件没搞成，大概率是没搞定控件样式的自定义和选中状态的绑定问题，我给你两套亲测可行的XAML实现方案，你随便挑：

这套方案完全自主控制每个元素，能确保图片纯干净无额外元素，同时完美实现选中项勾选效果。

先上完整XAML代码，你可以直接复制到窗口里测试：

<Window x:Class="ImageDropdownDemo.MainWindow"
        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"
        xmlns:local="clr-namespace:ImageDropdownDemo"
        mc:Ignorable="d"
        Title="纯图片下拉菜单" Height="450" Width="800">
    <Window.DataContext>
        <local:MainViewModel/>
    </Window.DataContext>
    <Window.Resources>
        <!-- 透明ToggleButton样式，去掉默认边框背景，只显示图片 -->
        <Style x:Key="TransparentToggleBtnStyle" TargetType="ToggleButton">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Padding" Value="0"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#1F000000"/> <!-- 鼠标悬停轻微变暗 -->
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="Background" Value="#3F000000"/> <!-- 按下时加深反馈 -->
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <!-- 纯图片触发按钮 -->
        <ToggleButton x:Name="ImageTriggerBtn" Width="50" Height="50"
                      Style="{StaticResource TransparentToggleBtnStyle}">
            <!-- 替换成你的图片路径 -->
            <Image Source="/Images/your-icon.png" Stretch="Uniform"/>
        </ToggleButton>

        <!-- 下拉弹出菜单 -->
        <Popup IsOpen="{Binding IsChecked, ElementName=ImageTriggerBtn}"
               Placement="Bottom" PlacementTarget="{Binding ElementName=ImageTriggerBtn}"
               StaysOpen="False">
            <ListBox Width="150"
                     SelectedItem="{Binding SelectedOption, Mode=TwoWay}"
                     ItemsSource="{Binding Options}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Margin="5">
                            <!-- 勾选标记绑定选中状态 -->
                            <CheckBox IsChecked="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListBoxItem}}"
                                      VerticalAlignment="Center" Margin="0 0 5 0"/>
                            <TextBlock Text="{Binding}" VerticalAlignment="Center"/>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Popup>
    </Grid>
</Window>

配套的ViewModel代码（C#），实现数据绑定和选中状态跟踪：

using System.Collections.Generic;
using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace ImageDropdownDemo
{
    public class MainViewModel : INotifyPropertyChanged
    {
        private string _selectedOption;
        public string SelectedOption
        {
            get => _selectedOption;
            set
            {
                _selectedOption = value;
                OnPropertyChanged();
            }
        }

        // 下拉选项列表，可根据需求修改
        public List<string> Options { get; } = new List<string>
        {
            "选项A", "选项B", "选项C", "选项D"
        };

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

关键细节说明 #

• 纯图片按钮：用ToggleButton承载图片，通过自定义样式去掉默认边框、背景，确保只有图片显示，无任何多余元素。
• 下拉菜单控制：Popup的显示状态绑定到ToggleButton的IsChecked属性，点击图片自动弹出/收起；StaysOpen="False"保证点击菜单外区域自动关闭，符合常规交互逻辑。
• 选中项勾选：CheckBox的IsChecked绑定到父级ListBoxItem的IsSelected属性，选中项自动显示勾选标记，取消选中则隐藏，完全无需额外逻辑。

如果你更习惯用ComboBox的原生逻辑，也可以通过自定义模板隐藏默认箭头，替换成图片，同样实现需求：

<ComboBox SelectedItem="{Binding SelectedOption}" ItemsSource="{Binding Options}"
          Width="50" Height="50">
    <ComboBox.Template>
        <ControlTemplate TargetType="ComboBox">
            <Grid>
                <!-- 替换默认箭头为图片 -->
                <ToggleButton x:Name="ToggleBtn"
                              Style="{StaticResource TransparentToggleBtnStyle}"
                              IsChecked="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
                    <Image Source="/Images/your-icon.png" Stretch="Uniform"/>
                </ToggleButton>
                <!-- 原生下拉菜单容器 -->
                <Popup x:Name="PART_Popup"
                       IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}"
                       Placement="Bottom" StaysOpen="False">
                    <Border Background="White" BorderBrush="#E0E0E0" BorderThickness="1">
                        <ScrollViewer x:Name="PART_ScrollViewer">
                            <ItemsPresenter/>
                        </ScrollViewer>
                    </Border>
                </Popup>
            </Grid>
        </ControlTemplate>
    </ComboBox.Template>
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" Margin="5">
                <CheckBox IsChecked="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ComboBoxItem}}"
                          VerticalAlignment="Center" Margin="0 0 5 0"/>
                <TextBlock Text="{Binding}" VerticalAlignment="Center"/>
            </StackPanel>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

这套方案复用了ComboBox的原生下拉逻辑，同样能实现纯图片触发+选中项勾选的效果，你可以根据自己的开发习惯选择。

内容的提问来源于stack exchange，提问作者babbelut