UWP - 创建具有可调整大小列的表视图

Question

我知道 UWP 中没有 DataGrid 或 DataGridView 控件。我还阅读了重新考虑设计以避免在 UWP 应用程序中使用表格视图的建议，但我仍然需要它。我能够使用 Microsoft.Toolkit.Uwp.UI.Controls 中的 ListView 控件和 GridSplitter 部分模拟 DataGrid。这是我的代码：

<Page.Resources>

    <Style x:Name="ItemBorder" TargetType="Border">
        <Setter Property="BorderBrush" Value="LightGray" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Background" Value="White" />
    </Style>
    <Style x:Name="ColumnItemBorder" TargetType="Border">
        <Setter Property="BorderBrush" Value="LightGray" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Background" Value="Silver" />
    </Style>

</Page.Resources>

            <ListView x:Name="PersonsTableView"
             ItemsSource="{Binding Path=Persons, Mode=TwoWay}" 
             SelectedItem="{Binding Path=SelectedPerson, Mode=TwoWay}">

                <ListView.HeaderTemplate>
                    <DataTemplate>
                        <Grid Background="LightGray" Height="48">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.3*" />
                                <ColumnDefinition Width="2" />
                                <ColumnDefinition Width="0.3*" />
                                <ColumnDefinition Width="2" />
                                <ColumnDefinition Width="0.3*" />
                            </Grid.ColumnDefinitions>
                            <Border Style="{StaticResource ColumnItemBorder}" Grid.Column="0">
                                <TextBlock>FirstName</TextBlock>
                            </Border>
                            <UWPToolKit:GridSplitter Grid.Column="1" Grid.RowSpan="4" ResizeBehavior="BasedOnAlignment"
                               ResizeDirection="Columns" VerticalAlignment="Stretch" Background="Gray"/>
                            <Border Style="{StaticResource ColumnItemBorder}" Grid.Column="2">
                                <TextBlock>MiddleName</TextBlock>
                            </Border>
                            <UWPToolKit:GridSplitter Grid.Column="3" Grid.RowSpan="4" ResizeBehavior="BasedOnAlignment"
                               ResizeDirection="Columns"  VerticalAlignment="Stretch" Background="Gray"/>
                            <Border Style="{StaticResource ColumnItemBorder}" Grid.Column="4">
                                <TextBlock>LastName</TextBlock>
                            </Border>
                        </Grid>
                    </DataTemplate>
                </ListView.HeaderTemplate>

                <ListView.ItemTemplate>
                    <DataTemplate x:Name="TableDataTemplate" x:DataType="local:PersonEntity">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.3*" />
                                <ColumnDefinition Width="2" />
                                <ColumnDefinition Width="0.3*" />
                                <ColumnDefinition Width="2" />
                                <ColumnDefinition Width="0.3*" />
                            </Grid.ColumnDefinitions>
                            <!-- ItemTemplate: ItemData is linked to the DataMembers of the ListView ItemsSource. -->
                            <Border Style="{StaticResource ItemBorder}" Grid.Column="0" >
                                <TextBlock  Text="{x:Bind Person.FirstName}" />
                            </Border>
                            <UWPToolKit:GridSplitter Grid.Column="1" Grid.RowSpan="4" ResizeBehavior="BasedOnAlignment"
                               ResizeDirection="Columns" VerticalAlignment="Stretch" Background="Gray"/>
                            <Border Style="{StaticResource ItemBorder}" Grid.Column="2" >
                                <TextBlock Text="{x:Bind Person.MiddleName}" />
                            </Border>
                            <UWPToolKit:GridSplitter Grid.Column="3" Grid.RowSpan="4" ResizeBehavior="BasedOnAlignment"
                               ResizeDirection="Columns" VerticalAlignment="Stretch" Background="Gray"/>
                            <Border Style="{StaticResource ItemBorder}" Grid.Column="4" >
                                <TextBlock  Text="{x:Bind Person.LastName}" />
                            </Border>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>

                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="ListViewItem">
                                    <ListViewItemPresenter ContentMargin="0" Padding="0" />
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ListView.ItemContainerStyle>
            </ListView>

问题是这样我只能调整当前行中的列大小，而我的要求是 - 调整整个列的大小。我还需要能够在代码中动态添加列。

Answer 1

您应该查看Telerik UI for UWP toolkit。它在 Apache 许可下是开源的，它包含一个 RadDataGrid control，它完全可以满足您的需求，包括可调整大小的列。

Answer 2

插入一个 WebView 控件，然后改用 HTML 表格？

HTML example of table with resizeable columns

HTML：

<div class="container">
  <h2>Resizable Columns</h2>
  <table class="table table-bordered" 
      data-resizable-columns-id="demo-table-v2">
    <thead>
      <tr>
        <th data-resizable-column-id="nr">#</th>
        <th data-resizable-column-id="first_name">First Name</th>
        <th data-resizable-column-id="nickname">Nickname</th>
        <th data-resizable-column-id="last_name">Last Name</th>
        <th data-resizable-column-id="username" id="username-column">Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Dude Meister</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Barney von Matterhorn</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td colspan="2">Larry the Bird</td>
        <td>What</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
  </diu>

CSS：

table{
  table-layout: fixed;
  td, th{
    overflow: hidden;
    white-space: nowrap;
    -moz-text-overflow: ellipsis;        
       -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
           text-overflow: ellipsis;
  }
}

JS：

$(function() {

  $("table").resizableColumns({
    store: window.store
  });
});