目的: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; }
}
}