目的:制作一个图片列表,单击图片触发对应事件。
![](https://i-blog.csdnimg.cn/blog_migrate/3cdfb1cb01615c3260b805ff82744a34.gif)
<Window x:Class="WPF_ImageList.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:WPF_ImageList"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Expander Margin="5" Header="Colorbar">
<ListView Name="lvColorbar" ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectionChanged="LvColorbar_SelectionChanged">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListViewItem Margin="3" ToolTip="parula">
<Image Source="skin\parula.png" Stretch="Fill" MouseLeftButtonDown="ListView_MouseLeftButtonDownClick"/>
</ListViewItem>
<ListViewItem Margin="3" ToolTip="jet">
<Image Source="skin\jet.png" Stretch="Fill" MouseLeftButtonDown="ListView_MouseLeftButtonDownClick"/>
</ListViewItem>
<ListViewItem Margin="3" ToolTip="bone">
<Image Source="skin\bone.png" Stretch="Fill" MouseLeftButtonDown="ListView_MouseLeftButtonDownClick"/>
</ListViewItem>
<ListViewItem Margin="3" ToolTip="gray">
<Image Source="skin\gray.png" Stretch="Fill" MouseLeftButtonDown="ListView_MouseLeftButtonDownClick"/>
</ListViewItem>
<ListViewItem Margin="3" ToolTip="cool">
<Image Source="skin\cool.png" Stretch="Fill" MouseLeftButtonDown="ListView_MouseLeftButtonDownClick"/>
</ListViewItem>
<ListViewItem Margin="3" ToolTip="copper">
<Image Source="skin\copper.png" Stretch="Fill" MouseLeftButtonDown="ListView_MouseLeftButtonDownClick"/>
</ListViewItem>
<ListViewItem Margin="3" ToolTip="hot">
<Image Source="skin\hot.png" Stretch="Fill" MouseLeftButtonDown="ListView_MouseLeftButtonDownClick"/>
</ListViewItem>
<ListViewItem Margin="3" ToolTip="hsv">
<Image Source="skin\hsv.png" Stretch="Fill" MouseLeftButtonDown="ListView_MouseLeftButtonDownClick"/>
</ListViewItem>
<ListViewItem Margin="3" ToolTip="pink">
<Image Source="skin\pink.png" Stretch="Fill" MouseLeftButtonDown="ListView_MouseLeftButtonDownClick"/>
</ListViewItem>
<ListViewItem Margin="3" ToolTip="spring">
<Image Source="skin\spring.png" Stretch="Fill" MouseLeftButtonDown="ListView_MouseLeftButtonDownClick"/>
</ListViewItem>
<ListViewItem Margin="3" ToolTip="summer">
<Image Source="skin\summer.png" Stretch="Fill" MouseLeftButtonDown="ListView_MouseLeftButtonDownClick"/>
</ListViewItem>
<ListViewItem Margin="3" ToolTip="autumn">
<Image Source="skin\autumn.png" Stretch="fill" MouseLeftButtonDown="ListView_MouseLeftButtonDownClick"/>
</ListViewItem>
<ListViewItem Margin="3" ToolTip="winter">
<Image Source="skin\winter.png" Stretch="Fill" MouseLeftButtonDown="ListView_MouseLeftButtonDownClick"/>
</ListViewItem>
</ListView>
</Expander>
<Label Grid.Row="1" Name="label" Height="30"/>
</Grid>
</Window>
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 WPF_ImageList
{
/// <summary>
/// MainWindow.xaml 的交互逻辑
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void ListView_MouseLeftButtonDownClick(object sender, MouseButtonEventArgs e)
{
int selIndex = lvColorbar.SelectedIndex;
lvColorbar.SelectedIndex = -1;
lvColorbar.SelectedIndex = selIndex;
}
private void LvColorbar_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
switch (lvColorbar.SelectedIndex)
{
case 0:
label.Content = "Parula";
break;
case 1:
label.Content = "Jet";
break;
case 2:
label.Content = "Bone";
break;
case 3:
label.Content = "Gray";
break;
case 4:
label.Content = "Cool";
break;
case 5:
label.Content = "Copper";
break;
case 6:
label.Content = "Hot";
break;
case 7:
label.Content = "Hsv";
break;
case 8:
label.Content = "Pink";
break;
case 9:
label.Content = "Spring";
break;
case 10:
label.Content = "Summer";
break;
case 11:
label.Content = "Autumn";
break;
case 12:
label.Content = "Winter";
break;
default:
label.Content = "Gray";
break;
}
}
}
}
补充说明:定制ListView模板,用WrapPanel来放置图片;将事件内容都写在ListView的SelectionChanged事件中,单击事件要写在Image里,写在ListView里是无效的,单击事件只改变ListView选中的序号来触发SelectionChanged事件。