Question

我在Microsoft / Windows Store中有一些UWP应用程序，我想开发一个新的UWP应用程序。它是一个简单而静态的应用程序，我想放一个表（总是相等的数据 - 静态），但我已经在搜索并没有发现如何在UWP应用程序（XAML和C＃）中创建表。

是否可以在UWP应用程序中创建表？

Answer 1

如评论中所述，您可以使用Telerik Grid。但是，如果您想自己构建表，Grid控件就足够了。

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <style>
    #scrollContainer {
      width: 400px;
      height: 200px;
      border: 1px solid grey;
      border-radius: 4px;
    }
    
    #scrollBar {
      width: 200px;
      height: 5px;
      background-color: grey;
      border: 1px solid grey;
      border-radius: 4px;
      margin-top: 24%;
      margin-left: 24%;
    }
    
    #toddler {
      width: 10px;
      height: 25px;
      position: absolute;
      margin-top: -11px;
      background-color: blue;
      border: 1px solid grey;
      border-radius: 2px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="scrollContainer">
    <div id="scrollBar">
      <div id="toddler"></div>
    </div>
  </div>

</body>

</html>

以上将创建一个包含3行和3列的网格。如果要自动调整列：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="50"/>
        <RowDefinition Height="50"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="50"/>
    </Grid.ColumnDefinitions>
</Grid>

这将分别创建一个根据可用空间量自行调整大小的列和一个根据其内容调整自身大小的行。

要使网格看起来像一个表格（即每个单元格之间的边框），请使用边框控件：

<ColumnDefinition Width="*"/>
<RowDefinition Width="Auto"/>

您可以将边框控件放在每个单元格中。通过调整Grid.Row和Grid.Column属性。

Answer 2

Windows Community Toolkit的最新版本具有DataGrid https://docs.microsoft.com/en-us/windows/communitytoolkit/controls/datagrid。我自己没有使用过它，所以我不知道它是多么容易或困难的数据绑定，但是它看起来非常强大。

Answer 3

Grid nad ListView可以，但是DataGrid控件将是最佳选择。
在链接下，您会找到相应的MS文档：
Windows Community Toolkit DataGrid XAML control documentation
最好使用本机解决方案，而不是从头开始重新发明轮子。

以下示例：

<controls:DataGrid x:Name="dataGrid1" 
Height="600" Margin="12"
AutoGenerateColumns="False"
ItemsSource="{x:Bind MyViewModel.Customers}">
<controls:DataGrid.Columns>
    <!-- Name Column -->
    <controls:DataGridTemplateColumn Header="Name">
        <controls:DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                    <TextBlock Padding="5,0,5,0"
                        Text="{x:Bind FirstName}"/>
                    <TextBlock Text="{x:Bind LastName}"/>
                </StackPanel>
            </DataTemplate>
        </controls:DataGridTemplateColumn.CellTemplate> 
        <controls:DataGridTemplateColumn.CellEditingTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBox Text="{x:Bind FirstName}" BorderThickness="0"/>
                    <TextBox Text="{x:Bind LastName}" BorderThickness="0"/>
                </StackPanel>
            </DataTemplate>
        </controls:DataGridTemplateColumn.CellEditingTemplate> 
    </controls:DataGridTemplateColumn>              
    <!-- other columns below -->
</controls:DataGrid>

UWP App中的表格

3 个答案: