【WPF学习手记】WPF带有ToggleButton的ComboBox的样式设计

最新推荐文章于 2025-06-29 21:22:23 发布

程序猿老王。

最新推荐文章于 2025-06-29 21:22:23 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： WPF控件学习 WPF学习手记文章标签： WPF ComboBox样式 WPF ComboBox显示选中项指定内容

本文链接：https://blog.youkuaiyun.com/u012366767/article/details/90315491

WPF学习手记同时被 2 个专栏收录

48 篇文章

订阅专栏

WPF控件学习

5 篇文章

订阅专栏

博客旨在实现WPF ComboBox显示选中项的图标。选中某项时，ComboBox会显示对应图标，同时设置了选中和未选中两种状态，还给出了xaml代码和后台代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目的：ComboBox显示选中项的图标。

选中某项，ComboBox显示对应图标，并且ComboBox设置为选中和未选中两种状态。

xaml代码

<Window x:Class="ComboBoxStyle.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:ComboBoxStyle"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid Margin="5" Width="88" Height="68">
            <ComboBox Name="comboBox" ItemsSource="{Binding ComboBoxItems}">
                <ComboBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="{Binding Image}" Margin="0,0,5,0" Height="30" Width="30"/>
                            <Label Content="{Binding Name}" HorizontalContentAlignment="Left" VerticalContentAlignment="Center"/>
                        </StackPanel>
                    </DataTemplate>
                </ComboBox.ItemTemplate>
            </ComboBox>
            <ToggleButton Name="tgButton" BorderBrush="Transparent" Margin="0,0,20,0">
                <ToggleButton.Content>
                    <StackPanel>
                        <Image Height="32" Width="32" DataContext="{Binding ElementName=comboBox, Path=SelectedItem}" Source="{Binding Image}"/>
                        <Label HorizontalContentAlignment="Center" VerticalContentAlignment="Bottom"
                                   DataContext="{Binding ElementName=comboBox, Path=SelectedItem}" Content="{Binding Name}"/>
                    </StackPanel>
                </ToggleButton.Content>
            </ToggleButton>
        </Grid>
    </Grid>
</Window>

后台代码

using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Windows;

namespace ComboBoxStyle
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public ObservableCollection<CDrawingFlag> ComboBoxItems { set; get; }
        public MainWindow()
        {
            InitializeComponent();
            LoadOperations();
        }

        private void LoadOperations()
        {
            List<string> imagePath = new List<string>
            {
                @"images\Ellipse_blue.png",
                @"images\Line_blue.png",
                @"images\Rectangle_blue.png",
                @"images\Text_blue.png",
                @"images\Angle_blue.png",
                @"images\Edit_blue.png",
            };

            List<string> flag = new List<string>
            {
                "Ellipse",
                "Line",
                "Rectangle",
                "Text",
                "Angle",
                "Edit"
            };

            ComboBoxItems = new ObservableCollection<CDrawingFlag>();
            for (int i = 0; i < imagePath.Count; i++)
            {
                ComboBoxItems.Add(new CDrawingFlag() { Image = imagePath[i], Name = flag[i] });
            }
            comboBox.ItemsSource = ComboBoxItems;
            comboBox.SelectedIndex = 0;
        }
    }

    public class CDrawingFlag
    {
        public string Image { set; get; }
        public string Name { set; get; }
    }
}