如何在UWP中利用Microsoft Graph数据创建美观多表格

针对你用XAML ListView展示多表格样式不佳的问题，我整理了几个实用的优化方向，结合具体代码示例分享给你：

• 替换ListView为ItemsControl：如果不需要选择、编辑等ListView特有的交互逻辑，ItemsControl是更轻量的选择，专注于数据呈现即可
• 用WrapPanel/UniformGrid做容器布局：默认ListView是垂直单列表堆叠，改用WrapPanel可以让表格在空间充足时横向排列，小屏幕自动换行；UniformGrid则能让表格保持统一尺寸，适合规整的展示场景
• 给每个表格加卡片式容器：用Border包裹表格，添加圆角、浅阴影、内边距，让每个表格看起来是独立的视觉单元，避免页面显得杂乱

表格核心用DataGrid实现（比手动用ListView模拟表格高效得多），重点优化这些细节：

• 醒目表头样式：设置深色背景、白色文字、加粗字体，让表头和内容区明确区分
• 交替行颜色：开启AlternatingRowBackground，设置浅灰色交替行，减少用户阅读时的视觉疲劳
• 优化单元格间距：给单元格增加Padding，边框用浅灰色细线条，避免表格显得拥挤
• 数据格式化处理：通过Binding的StringFormat统一日期、数字的显示格式，用TargetNullValue处理空值，比如显示“-”代替空白

• 启用表头排序：设置CanUserSortColumns="True"，用户点击表头即可对列数据排序，无需额外逻辑
• 添加鼠标悬停反馈：给DataGrid的行或单元格添加Hover样式，比如改变背景色，让用户感知交互状态
• 限制表格高度：给DataGrid设置MaxHeight并开启垂直滚动，避免单个表格过长撑满整个页面
• 加载状态提示：在数据加载过程中显示ProgressRing，避免用户误以为页面无响应

把通用样式（比如DataGrid的表头、单元格、行样式）放到ResourceDictionary中，所有表格复用同一套样式，既能保持视觉一致性，也方便后续统一修改。

示例代码片段 #

<!-- 用ItemsControl承载多表格 -->
<ItemsControl ItemsSource="{Binding GraphTables}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <!-- 横向排列，自动换行 -->
            <WrapPanel Orientation="Horizontal" Margin="12" HorizontalAlignment="Left"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <!-- 卡片式容器 -->
            <Border BorderThickness="1" 
                    BorderBrush="#E5E7EB" 
                    CornerRadius="6" 
                    Margin="8" 
                    Padding="10"
                    Background="White"
                    Effect="{StaticResource DropShadowEffect}">
                <StackPanel>
                    <!-- 表格标题 -->
                    <TextBlock Text="{Binding TableTitle}" 
                               FontSize="16" 
                               FontWeight="Bold" 
                               Margin="0 0 0 8"
                               Foreground="#1F2937"/>
                    <!-- 数据表格 -->
                    <DataGrid ItemsSource="{Binding TableData}" 
                              AutoGenerateColumns="False"
                              CanUserSortColumns="True"
                              MaxHeight="450"
                              VerticalScrollBarVisibility="Auto"
                              AlternatingRowBackground="#F9FAFB"
                              RowHeaderWidth="0">
                        <!-- 自定义列（根据你的Graph数据调整） -->
                        <DataGrid.Columns>
                            <DataGridTextColumn Header="名称" 
                                               Binding="{Binding DisplayName}" 
                                               Width="180"/>
                            <DataGridTextColumn Header="创建时间" 
                                               Binding="{Binding CreatedDateTime, StringFormat='yyyy-MM-dd HH:mm'}" 
                                               Width="180"/>
                            <DataGridTextColumn Header="状态" 
                                               Binding="{Binding Status, TargetNullValue='未设置'}" 
                                               Width="120"/>
                        </DataGrid.Columns>
                        
                        <!-- 表头样式 -->
                        <DataGrid.ColumnHeaderStyle>
                            <Style TargetType="DataGridColumnHeader">
                                <Setter Property="Background" Value="#1F2937"/>
                                <Setter Property="Foreground" Value="White"/>
                                <Setter Property="Padding" Value="10"/>
                                <Setter Property="FontWeight" Value="Bold"/>
                                <Setter Property="BorderThickness" Value="0 0 0 1"/>
                                <Setter Property="BorderBrush" Value="#374151"/>
                            </Style>
                        </DataGrid.ColumnHeaderStyle>
                        
                        <!-- 单元格样式 -->
                        <DataGrid.CellStyle>
                            <Style TargetType="DataGridCell">
                                <Setter Property="Padding" Value="10"/>
                                <Setter Property="BorderBrush" Value="#E5E7EB"/>
                                <Style.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="Background" Value="#F3F4F6"/>
                                    </Trigger>
                                </Style.Triggers>
                            </Style>
                        </DataGrid.CellStyle>
                    </DataGrid>
                </StackPanel>
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

这些调整应该能让你的多表格展示效果提升不少，你可以根据实际数据和设计需求调整颜色、尺寸、列配置等参数。

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