使用C＃winforms创建和填充自定义列表外观

Question

考虑自定义列表元素的用例，它具有多行和其他数据元素，如图片。因此，如果我有一个数据实例列表，我如何使用数据源填充自定义列表。我还想将列表绑定到显示元素。

示例类

public class BeerData
{
    public string imageUrl { get; set; }
    public string name { get; set; }
    public string brewery { get; set; }
    public string beer { get; set; }
    public double reiting { get; set; }
    // ...
}

个人努力

目前，我正在使用datagridview

private BindingSource bs = new BindingSource();
// ...

bs.DataSource = typeof(BeerData);
foreach (BeerData entry in new BeerData[]{ new BeerData()
{
    reiting = 4.2,
    name = "Bell's Hopslam Ale",
    brewery = "Bell's Brewery, Inc",
    beer = "Imperiial IPA",
    image = "http://upload.wikimedia.org/wikipedia/" +
    "commons/6/60/Kriek_Beer_1.jpg"
}/* , ... */})
    bs.Add(entry);

grid.DataSource = bs;
grid.AutoGenerateColumns = true;

lName.DataBindings.Add(new Binding("Text", bs, "name"));
lImage.DataBindings.Add(new Binding("ImageLocation", bs, "image"));
// ...

个人努力2

public static class BeerLoader
{
    public static List<BeerData> result = new List<BeerData>();
    static BeerLoader() {
        add1BogusDataInstance();
    }
    public static void add1BogusDataInstance()
    {
        foreach (BeerData entry in new BeerData[]{ new BeerData()
        {
            reiting = 4.2,
            name = "Bell's Hopslam Ale",
            brewery = "Bell's Brewery, Inc",
            beer = "Imperiial IPA",
            imageUrl = "http://upload.wikimedia.org/wikipedia/" + 
            "commons/6/60/Kriek_Beer_1.jpg"
        }})
            result.Add(entry);
    }
    public static List<BeerData> LoadData()
    {
        return result;
    }
}

期望结果的样本

将替换datagridview的列表部分示例

图片source

问题

我假设我需要创建一个user control，然后创建该用户控件的列表或等效的东西。找不到使用谷歌的winform示例，所以我想知道如何做到这一点。

Answer 1

您显示“列表”的方式让我觉得您可能会尝试使用ListBox，而DrawMode = OwnerDrawFixed和ItemHeight = 64（或其他）。然后在ListBox的DrawItem事件中，您可以根据需要绘制输出。

如果你需要使用DataGridView，那么我会调查CellPaint事件并做同样的事情。

Answer 2

好吧，如果我使用wpf DataTemplate：

<Border HorizontalAlignment="Left" BorderThickness="2" Margin="3" 
    Padding="2" CornerRadius="2" BorderBrush="Black" >
    <StackPanel Orientation="Horizontal" >
        <Border HorizontalAlignment="Left" BorderThickness="1" Margin="3"
            CornerRadius="1" BorderBrush="Gray" VerticalAlignment="Top">
            <Image  Width="128" 
                Source="{Binding Path=imageUrl}" ></Image>
        </Border>
        <StackPanel Width="120">
            <Label Content="{Binding Path=name}"/>
            <Label Content="{Binding Path=brewery}"/>
            <Label Content="{Binding Path=beer}"/>
            <StackPanel Width="120" Orientation="Horizontal" >
                <Label Content="AVG Rating: "/>
                <Label Content="{Binding Path=reiting}"/>
            </StackPanel>
        </StackPanel>
    </StackPanel>
</Border>

使用静态数据提供程序和gui：

<Window.DataContext>
    <ObjectDataProvider 
        ObjectType="{x:Type local:BeerLoader}" MethodName="LoadData" />
</Window.DataContext>

<StackPanel>
    <Button Content="Add" Click="Button_Click" />
    <ListBox Name="data" ItemsSource="{Binding}" />
</StackPanel>

我可以得到：

更好更清楚。

但是数据不是静态的，我还没有找到解决方法。

在C＃代码中，我只需要将集合从List更改为ObservableCollection。