Question

我知道UWP中没有DataGrid或DataGridView控件。我还阅读了重新思考设计的建议，以避免在UWP应用程序中使用表视图，但我仍然需要它。我能够使用ListView控件和Microsoft.Toolkit.Uwp.UI.Controls中的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：

  IO.Stream st1

 ///Set MultiSelect property to true
  openfiledialog1.MultiSelect = true;



  ///Now get the filenames
  if (openfiledialog1.ShowDialog() == DialogResult.OK)
  {
    foreach (String file in openfiledialog1.FileNames) 

    {
      try
      {
        if ((st1 = openfiledialog1.OpenFile()) != null)
        {
          using (st1)
          {
           List.Add(file);
          }
       }
    }

CSS：

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

JS：

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

UWP - 使用可调整大小的列创建表视图

2 个答案: