微信公众号：Dotnet9，网站：Dotnet9，问题或建议：请网站留言，如果对您有所帮助：欢迎赞赏。

C# WPF 响应式水平列表视图

内容目录

实现效果
业务场景
编码实现
本文参考
源码下载

1.实现效果

效果

2.业务场景

常规业务

3.编码实现

3.1 工程结构

3个文件变动：下面是具体代码

3.2 Product.cs

public class Product
{
    public string Name { get; set; }
    public double Value { get; set; }
    public string Image { get; set; }

    public Product(string name, double value, string image)
    {
        Name = name;
        Value = value;
        Image = image;
    }
}

3.3 主窗体 MainWindow.xaml

全部代码，窗口布局

<Window x:Class="HorizontalList.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Height="600" Width="1080"
        FontFamily="The Medic Demo"
        WindowStartupLocation="CenterScreen">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="170"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid Grid.RowSpan="2">
            <TextBlock Text="Shoes Store" HorizontalAlignment="Center" Margin="10" FontSize="28"/>
        </Grid>
        <ScrollViewer Grid.Column="1" Grid.Row="1" Background="#FFF1F1F1">
            <StackPanel>
                <TextBlock Text="Items" Margin="10" FontSize="22" FontWeight="Medium"/>
                <StackPanel Margin="20 0">
                    <ItemsControl x:Name="ListViewProducts" ItemsSource="{Binding Product}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Border Margin="10" Width="110" Height="160">
                                    <StackPanel>
                                        <Border Width="100" Height="100" CornerRadius="5" Margin="5">
                                            <Border.Effect>
                                                <DropShadowEffect ShadowDepth="1"/>
                                            </Border.Effect>
                                            <Border.Background>
                                                <ImageBrush ImageSource="{Binding Image}"/>
                                            </Border.Background>
                                        </Border>
                                        <TextBlock Margin="5" Text="{Binding Value, StringFormat={}{0:C}}" FontSize="17" FontFamily="Franklin Gothic Medium"/>
                                        <TextBlock Margin="5 0" Text="{Binding Name}" FontSize="15"/>
                                    </StackPanel>
                                </Border>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapPanel/>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                    </ItemsControl>
                </StackPanel>
            </StackPanel>
        </ScrollViewer>
    </Grid>
</Window>

3.3 主窗体 MainWindow.xaml.cs

全部代码，后台数据绑定

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

namespace HorizontalList
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            var products = GetProducts();
            if (products.Count > 0)
                ListViewProducts.ItemsSource = products;
        }

        private List<Product> GetProducts()
        {
            return new List<Product>()
            {
                new Product("Product 1", 205.46, "/Assets/1.jpg"),
                new Product("Product 2", 102.50, "/Assets/2.jpg"),
                new Product("Product 3", 400.99, "/Assets/3.jpg"),
                new Product("Product 4", 350.26, "/Assets/4.jpg"),
                new Product("Product 5", 150.10, "/Assets/5.jpg"),
                new Product("Product 6", 100.02, "/Assets/6.jpg"),
                new Product("Product 7", 295.25, "/Assets/7.jpg"),
                new Product("Product 8", 700.00, "/Assets/8.jpg")
            };
        }
    }
}