求助：如何在UWP应用中用ListView/GridView设计指定样式表格

核心实现思路 #

• 利用控件的Header属性定义表格表头，通过Grid布局确保表头列与数据列对齐
• 自定义ItemTemplate渲染每行数据，同样使用Grid匹配表头的列结构
• 通过边框属性实现表格分隔线效果

完整XAML示例 #

<!-- ListView 实现竖向表格 -->
<ListView x:Name="DataTableListView"
          HorizontalContentAlignment="Stretch"
          ScrollViewer.VerticalScrollBarVisibility="Auto">
    <!-- 表头区域 -->
    <ListView.Header>
        <Grid Background="#F5F5F5">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="1*"/>
            </Grid.ColumnDefinitions>
            <TextBlock Text="ID" Margin="12,8" FontWeight="SemiBold" FontSize="14"/>
            <TextBlock Text="产品名称" Grid.Column="1" Margin="12,8" FontWeight="SemiBold" FontSize="14"/>
            <TextBlock Text="库存数量" Grid.Column="2" Margin="12,8" FontWeight="SemiBold" FontSize="14"/>
            <TextBlock Text="状态" Grid.Column="3" Margin="12,8" FontWeight="SemiBold" FontSize="14"/>
        </Grid>
    </ListView.Header>
    <!-- 数据行模板 -->
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid BorderThickness="0,0,0,1" BorderBrush="#E0E0E0" Padding="0,8">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="2*"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding Id}" Margin="12,0"/>
                <TextBlock Text="{Binding ProductName}" Grid.Column="1" Margin="12,0"/>
                <TextBlock Text="{Binding StockCount}" Grid.Column="2" Margin="12,0"/>
                <TextBlock Text="{Binding Status}" Grid.Column="3" Margin="12,0"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
    <!-- 可选：自定义行选中样式 -->
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Background" Value="Transparent"/>
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Background" Value="#E3F2FD"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </ListView.ItemContainerStyle>
</ListView>

数据绑定示例（C#） #

// 定义数据模型
public class ProductInfo
{
    public int Id { get; set; }
    public string ProductName { get; set; }
    public int StockCount { get; set; }
    public string Status { get; set; }
}

// 在页面构造函数或Loaded事件中绑定数据
private void Page_Loaded(object sender, RoutedEventArgs e)
{
    var productList = new List<ProductInfo>
    {
        new ProductInfo { Id = 1, ProductName = "无线耳机", StockCount = 45, Status = "在售" },
        new ProductInfo { Id = 2, ProductName = "智能手表", StockCount = 12, Status = "缺货" },
        new ProductInfo { Id = 3, ProductName = "平板电脑", StockCount = 78, Status = "在售" }
    };
    DataTableListView.ItemsSource = productList;
}

扩展说明 #

• 如果需要横向滚动的表格，直接将ListView替换为GridView，并设置ScrollViewer.HorizontalScrollBarVisibility="Auto"
• 列宽支持固定值（如Width="120"）、比例值（1*）或自适应（Auto），只需保证表头和数据行的ColumnDefinitions完全一致即可
• 如需更复杂的单元格样式（如按钮、图标），直接在DataTemplate的对应列中添加控件即可

内容的提问来源于stack exchange，提问作者Krishna Katamneni