使用Image和Text为可观察的自定义类集合创建DataGridRows

Question

我搜索了我的问题的解决方案的高低，但我找不到任何有效的方法。我现在完全失去了。

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

  

的ObservableCollection＆LT; BusinessCard []＆gt; CompanyCards = new ObservableCollection＆lt; BusinessCard []＆gt;（）;

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

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

实施例： 我有A公司，B公司和C公司。 假设我有三张A牌，四张B牌，两张C牌。 我希望我的输出看起来如下（不包括“行＃”部分）：

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

BusinessCard类

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

这有效但当然只适用于每行显示的每个公司的单个BusinessCard（正确的行数而不是列数）：

    <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>