UWP (xaml) - 将动态列和行加载到 GridView答案

【问题标题】：UWP (xaml) - load dynamic columns and rows to GridViewUWP (xaml) - 将动态列和行加载到 GridView
【发布时间】：2023-03-17 16:47:02
【问题描述】：

我正在尝试将带有行和列的动态数据加载到 GridView 或 ListView 控件，使其看起来像带有标题和行的表格。我的目标是做这样的事情：

我在这个网站上找到了布局解释：ListView，但问题是我已经尝试过动态列但没有任何效果......

到目前为止，我的代码如下所示：

<ListView ItemsSource="{Binding Source={StaticResource CollectionViewSource}}" 
              Name="GridViewList" Margin="0,20,0,0" HorizontalAlignment="Stretch" IsHitTestVisible="False" SelectedIndex="-1">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="localVM:GridViewRow">
                <Grid>
                    <ItemsControl ItemsSource="{x:Bind Columns}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate x:DataType="localVM:GridViewColumn">
                                <Grid x:Name="ColumnsViewGrid">
                                    <TextBlock Grid.Row="0" Text="{x:Bind Title}" TextWrapping="WrapWholeWords" FontWeight="Bold" TextTrimming="CharacterEllipsis"
                                               Visibility="{Binding IsHeader, Converter={StaticResource BoolToVisibilityConverter}}"/>
                                    <TextBlock Grid.Row="1" Text="{x:Bind Value}" TextWrapping="WrapWholeWords" TextTrimming="CharacterEllipsis"/>
                                </Grid>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

列是动态填充的，并且每次都有不同的计数。

列存储在 GridViewRow 类中：

public int RowIndex { get; private set; }

    public List<GridViewColumn> Columns { get; }

    /// <summary>
    /// Initialized a new instance of <see cref="GridViewRow"/> class
    /// </summary>
    /// <param name="rowIndex">Row index</param>
    /// <param name="isHeader">If row is header it's true</param>
    /// <param name="columns">Columns </param>
    /// <param name="headers">Table headers </param>
    public GridViewRow(int rowIndex, List<GridViewColumn> columns)
    {
        this.RowIndex = rowIndex;

        this.Columns = columns;
    }

GridViewColumn 类看起来像这样：

public string Value { get; private set; }

    public string Title { get; private set; }

    public bool IsHeader { get; private set; }

    public GridViewColumn(string title, string value, bool isHeader)
    {
        this.Title = title;
        this.Value = value;
        this.IsHeader = IsHeader;
    }

非常感谢您的帮助！

【问题讨论】：

如果这是纯 UWP，也许这会是一个更好的解决方案？ docs.microsoft.com/en-us/windows/uwpcommunitytoolkit/controls/…
你的意思是什么“动态列”？能否请您详细说明一下？因为我无法从上图中看出“动态”。
动态列是指始终具有不同计数的列数，因此我无法直接指定 xaml 中有多少列。我有具有 List 作为列的 GridViewRow 类。并且 GridViewColumn 类具有 Title、Value 和 IsHeader 属性。
Depechie - 感谢您的回复，但由于客户 Windows 版本的原因，我无法使用 DataGrid 控件，在某些时候必须对其进行更新，而对于某些客户来说，这不是一个选项.. SO我必须找出相反的方法。

标签： xaml listview uwp dynamic-columns

【解决方案1】：

全部，

我设法通过以下示例解决了这个问题：

<ListView Grid.Row="2" ItemsSource="{Binding Source={StaticResource CollectionViewSource}}" ItemContainerStyle="{StaticResource ListViewItemStyle}"
              Name="ListViewTemp" Margin="0,20,0,0" HorizontalAlignment="Stretch" IsHitTestVisible="False" BorderBrush="DimGray" BorderThickness="0,0,0,1">>
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="localVM:Row">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <ItemsControl Grid.Row="0" ItemsSource="{x:Bind Columns}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate x:DataType="localVM:Column">
                                <ScrollViewer>
                                    <Grid Padding="10" Background="{x:Bind IsHeader, Converter={StaticResource BoolToBackgroundConverter}}"
                                            BorderBrush="DimGray" BorderThickness="0,0,1,0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="{x:Bind Size}"/>
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="{x:Bind Title}" TextWrapping="WrapWholeWords" FontWeight="Bold" TextTrimming="CharacterEllipsis"
                                               Visibility="{Binding IsHeader, Converter={StaticResource BoolToVisibilityConverter}}" Foreground="White"/>
                                        <TextBlock Text="{x:Bind Value}" TextWrapping="WrapWholeWords" TextTrimming="CharacterEllipsis"/>
                                    </Grid>
                                </ScrollViewer>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel Orientation="Horizontal"/>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                    </ItemsControl>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

我正在计算这样的列的大小：

double listViewWidth = ListViewTemp.ActualWidth;

        double columnWidth = listViewWidth / (rows[0].Columns.Count);

        foreach (var row in rows)
        {
            foreach (var column in row.Columns)
            {
                column.Size = new GridLength(columnWidth);
            }
        }

感谢您的帮助！

【讨论】：