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

Question

我正在尝试将包含行和列的动态数据加载到 GridView 或 ListView 控件，因此它看起来像带有 headers 和行的 table。我的目标是做这样的事情：

我在这个网站上找到了布局解释：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 中 class:

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 class 看起来像这样：

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

非常感谢您的帮助！

Answer 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);
            }
        }

感谢您的帮助！

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

UWP (xaml) - load dynamic columns and rows to GridView

xaml

listview

dynamic-columns

uwp