如何定义 WPF ListView 的每个项目，该视图看起来类似于 Windows 7 中的超大图标视图？

Question

基本上我正在尝试做类似 this http://www .crunchgear.com/wp-content/uploads/2010/07/popbox.jpg。

仅以固定尺寸显示图像，图像下方没有文字。图像之间的水平和垂直距离也应该是固定的。

另外，如果有人可以添加鼠标悬停发光效果来模拟相同的效果，那就太酷了。

我现在对 xaml 更熟悉了，但我对为 ListView 控件定义每个项目感到困惑。我之前只使用过 WPF ListView 和 GridViewColumns，所以这是新的。

另外，我尝试绑定具有图像的 ListView 的对象是这样的：

class Film
{
    Image Image {get;set;}
}

但是如果我应该将它们存储在 Image 之外的不同类型中，那也很酷。

Answer 1

这是一个快速而肮脏的示例，它提供了与您想要的效果类似的效果：

XAML

<Window x:Class="WpfListViewDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:WpfListViewDemo"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <ListView ItemsSource="{Binding Films}"
                  Background="Black">

            <!-- Panel that will contains the items -->
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel IsItemsHost="True"
                               ItemWidth="150" ItemHeight="220"
                               Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType=ScrollContentPresenter}}"/>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>

            <!-- Template for each item -->
            <ListView.ItemTemplate>
                <DataTemplate DataType="{x:Type my:Film}">
                    <Grid>
                        <!-- Halo that will be shown when the mouse is over the image -->
                        <Ellipse Name="mouseOverHalo" Visibility="Hidden"
                                 Width="180" Height="250"
                                 VerticalAlignment="Center"
                                 HorizontalAlignment="Center"
                                 ClipToBounds="False">
                            <Ellipse.Fill>
                                <RadialGradientBrush Center="0.5, 0.5">
                                    <GradientStop Offset="0.0" Color="Blue" />
                                    <GradientStop Offset="0.8" Color="Blue" />
                                    <GradientStop Offset="1.0" Color="Black" />
                                </RadialGradientBrush>
                            </Ellipse.Fill>
                        </Ellipse>
                        <Image Name="img"
                               Source="{Binding ImagePath}"
                               ToolTip="{Binding Title}"
                               Margin="10" />
                    </Grid>
                    <DataTemplate.Triggers>
                        <!-- Trigger to display the halo when the mouse is over the image -->
                        <Trigger SourceName="img" Property="IsMouseOver" Value="True">
                            <Setter TargetName="mouseOverHalo"
                                    Property="Visibility"
                                    Value="Visible">
                            </Setter>
                        </Trigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Window>

Film class

public class Film
{
    public string Title { get; set; }
    public string ImagePath { get; set; }
}

Code-behind

（您也可以使用 ViewModel类作为 DataContext，为了简单起见，我在这里使用了代码隐藏）

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        Films = new ObservableCollection<Film>(LoadFilms());
        this.DataContext = this;
    }

    private static IEnumerable<Film> LoadFilms()
    {
        string imagesDirectory = @"D:\Docs\DVD\covers";
        return
            from file in Directory.EnumerateFiles(imagesDirectory)
            select new Film
                {
                    Title = Path.GetFileNameWithoutExtension(file),
                    ImagePath = file
                };

    }

    public ObservableCollection<Film> Films { get; private set; }
}

光环现在很丑陋，但是嘿，我不是设计师；）

Answer 2

我会使用 ItemsControl。

作为 ItemsPanel，我将使用 WrapPanel。作为 ItemTemplate，您可以提供绑定到胶片图像的 DataTemplate，最好将图像提供为 ImageSource，然后您可以立即将其用作 Image 元素的源。

为您的图像定义一个样式，在其中为每个 FrameworkElement 都有的 IsMouseOver = true 定义一个触发器，无论您想要什么当鼠标悬停在图像上时的视觉效果。

Answer 3

啊，正忙着模拟一个例子:) 无论如何我都会发布它：我添加了一个投影，但你可以轻松地将其更改为发光。，C# 部分只是从旁边的文件夹填充文件名列表。EXE文件。

XAML：

<Window x:Class="pic_viewer.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:pic_viewer"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <DataTemplate x:Key="item_template" DataType="Item">
        <Image Source="{Binding}"  Width="64" Height="64"/>
        <DataTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="BitmapEffect">
                <Setter.Value>
                    <DropShadowBitmapEffect ShadowDepth="3" Color="Black"/>
                </Setter.Value>
            </Setter>
            </Trigger>
        </DataTemplate.Triggers>
    </DataTemplate>
    <ObjectDataProvider x:Key="pic_list" ObjectType="{x:Type local:Pic}" MethodName="get_pics"/>
</Window.Resources>

<ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled" x:Name="item_listbox"
             ItemsSource="{Binding Source={StaticResource pic_list}}" ItemTemplate="{StaticResource item_template}">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>
</Window>

C#：

using System.Collections.Generic;
using System.Windows;
using System.Windows.Documents;

namespace pic_viewer
{
    public partial class MainWindow : Window
   {
        public MainWindow()
        {
           InitializeComponent();
        }
    }

    public class Pic
    {
        public List<string> get_pics()
        {            
            List<string> p = new List<string>();
            p.Add(@"pack://siteoforigin:,,,/Images/black.png");
            p.Add(@"pack://siteoforigin:,,,/Images/blu.png");
            p.Add(@"pack://siteoforigin:,,,/Images/empty.png");
            p.Add(@"pack://siteoforigin:,,,/Images/red.png");
            return p;
        }
    }
}