为带有图像和文本的自定义类的可观察集合创建 DataGridRows

Question

我到处寻找解决问题的方法，但找不到任何可行的方法。在这一点上，我完全不知所措。

我有一个自定义类，它有一个 BitmapImage 属性和一个 String 属性。让我们称这个类为“BusinessCard”。 我也有：

ObservableCollection CompanyCards = new ObservableCollection();

每个 BusinessCard[] 数组包含每个员工名片的图像以及他们的姓名（前面提到的 BitmapImage 和 String 属性）

我想要完成的是让每一行代表每家公司，每一列代表一张名片。

示例： 我有A公司、B公司和C公司。 假设我有三张 A 牌，四张 B 牌，两张 C 牌。 我希望我的输出如下所示（不包括“Row #”部分）：

Row [Card] | [Card] | [Card]
 1   Name  |  Name  |  Name
----------------------------------
Row [Card] | [Card] | [Card] | [Card]
 2   Name  |  Name  |  Name  |  Name
----------------------------------
Row [Card] | [Card]
 3   Name  |  Name

名片类

public class BusinessCard: INotifyPropertyChanged
{
    private BitmapImage _image;
    private string _personName;
public BusinessCard() { }
public BusinessCard(BitmapImage image, string personName)
    {
        this.CardImage = image;
        this.Name = personName;
    }
public BitmapImage CardImage 
    {
    get { return _image; }
    set
        {
            _image = value;
            NotifyPropertyChanged();
        }
    }
public string Name
    {
    get { return _personName; }
    set
        {
            _personName = value;
        }
    }

public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

我的尝试

XAML

这行得通，但当然只适用于每行显示的每家公司的一张名片（行数正确，但列数不正确）：

    <DataGrid x:Name="CardViewer" AutoGenerateColumns="False" CanUserResizeColumns="False" CanUserResizeRows="False" CanUserSortColumns="False" CanUserAddRows="False" Grid.Column="0" ItemsSource="{Binding CompanyCards}">
        <DataGrid.Columns>
                <DataGridTemplateColumn Header="Cards" Width="*">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
                                <Image Source="{Binding CardImage}"/>
                                <Label Content="{Binding Name}"/>
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>

我也尝试过，但这创建了行，但其中显然没有内容，因为它们大约 10 像素高，即使将 UserResize 选项设置为 true，我也无法调整它们的大小：

XAML

<DataGrid x:Name="CardViewer" AutoGenerateColumns="False" CanUserResizeColumns="True" CanUserResizeRows="True" CanUserSortColumns="False" CanUserAddRows="False" Grid.Column="0"/>

代码隐藏

    public ObservableCollection<DataGridRow> spList = new ObservableCollection<DataGridRow>();

    foreach(BusinessCard[] bca in CompanyCards)
        {
            StackPanel sp = new StackPanel();
            sp.Orientation = Orientation.Horizontal;
            sp.MinHeight = 32;
            DataGridRow dgr = new DataGridRow();
        foreach(BusinessCard bcb in bca)
            {
                Image img = new Image();
                img.Stretch = Stretch.Uniform;
                img.Source = bcb.CardImage;

                Label lbl = new Label();
                lbl.Content = rcb.Name;

                sp.Children.Add(img);
                sp.Children.Add(lbl);
            }
            dgr.Item = sp;
            spList.Add(dgr);
        }

        CardViewer.DataContext = spList;
        CardViewer.ItemsSource = spList;

我想我尝试了两者的其他变体，但结果都相同。请帮忙？我觉得我缺少一些非常简单的东西......

Answer 1

由于网格中的每一列都代表一个数组，因此您应该更改单元格的模板以使用 ItemsControl：

   <DataGrid x:Name="CardViewer" AutoGenerateColumns="False" CanUserResizeColumns="False" 
          CanUserResizeRows="False" CanUserSortColumns="False" CanUserAddRows="False" Grid.Column="0" 
          ItemsSource="{Binding}">
    <DataGrid.Columns>
        <DataGridTemplateColumn Header="Cards" Width="*">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <ItemsControl ItemsSource="{Binding}" >
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                   <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
                        <Image Source="{Binding CardImage}" Height="50" Width="50"/>
                        <Label Content="{Binding Name}"/>
                    </StackPanel> 
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <VirtualizingStackPanel Orientation="Horizontal"/>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                    </ItemsControl>

                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>