WPF显示图片列表代码演示

    目的：制作一个图片列表，单击图片触发对应事件。

• 效果图

• xaml代码

<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事件。