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

本文关键字：观察 集合 创建 DataGridRows 自定义 Image Text | 更新日期: 2023-09-27 18:27:55

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

我有一个自定义类，它有一个BitmapImage属性和一个String属性。让我们将此类称为"名片"。我还有：

ObservableCollection<BusinessCard[]>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;

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

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

由于网格中的每一列都代表一个数组，因此应该更改单元格的模板以使用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>
相关文章：