【WPF】Combox 下拉選項增加圖片顯示 ItemTemplate
阿新 • • 發佈:2020-06-12
效果圖如上所示:
前端Xmal程式碼:
<Window x:Class="WpfTest.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:WpfTest" mc:Ignorable="d" Title="MainWindow" Height="350" Width="525"> <Grid> <StackPanel> <Button Content="www.wikibt.com" Click="Button_Click"></Button> <ComboBox ItemsSource="{Binding Items}"SelectedItem="{Binding CurrentItem}"> <ComboBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <Image Source="/images/www.wikibt.com.png"></Image>//此處圖片路徑寫死了,可以用繫結實現不一樣的圖片{Binding ItemImage}<TextBlock Text="{Binding ItemName}" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock> </StackPanel> </DataTemplate> </ComboBox.ItemTemplate> </ComboBox> </StackPanel> </Grid> </Window>
後端程式碼:
using RevitTask; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace WpfTest { /// <summary> /// MainWindow.xaml 的互動邏輯 /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); Items = new List<ImageItem>() { new ImageItem("一",1),new ImageItem("二",2),new ImageItem("三",3) }; this.DataContext = this; } public List<ImageItem> Items { get; set; } public ImageItem CurrentItem { get; set; } private void Button_Click(object sender,RoutedEventArgs e) { MessageBox.Show(CurrentItem == null ? "null" : CurrentItem.ItemValue.ToString()); } } public class ImageItem { public ImageItem(string name,object value) { ItemName = name; ItemValue = value; } public ImageItem(string name,object value,ImageSource img) : this(name,value) { ItemImage = img; } public string ItemName { get; set; } public object ItemValue { get; set; } public ImageSource ItemImage { get; set; } } }
PS.喜歡動漫的,可以關注下我的BT網站(下載動漫):維基BTwww.wikibt.com