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

我知道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>

名字
中间名
姓氏

---

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

您应该查看。它是Apache许可证下的开源软件，包含一个完全满足您需要的功能，包括可调整大小的列。

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

HTML:

JS:

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

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

$(function() {

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