本文只是简单的响应式列表视图界面布局。
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")
};
}
}
}
4.本文参考
Design com WPF 大神的学习视频:Responsive Horizontal ListView
5.代码下载
Github源码下载:HorizontalList
除非注明,文章均由 Dotnet9 整理发布,欢迎转载。
转载请注明:
作者:Dotnet9
链接:https://dotnet9.com/6848.html
来源:Dotnet9
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
评论列表(2条)
从博客园来的,博主在WPF区很是活跃啊!
@🌝大头:嗯,就是为了把你们引流过来,哈哈,谢谢支持!