.NET MAUI中ListView内Grid列无法均匀对齐问题

架构老林

2026-6-21

.NET MAUI ListView列表项列均匀对齐（替代WPF SharedSizeGroup）

问题

需要实现ListView中所有列表项的多列Label对齐，要求列宽按可用宽度比例分配。当前设置Grid列宽为*后未达到预期效果，需要类似WPF SharedSizeGroup的功能，让所有项的对应列宽度一致。

当前代码

ListView片段

<ListView ItemsSource="{Binding TransactionViewmodels}" Grid.Row="1">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid ColumnSpacing="24" Margin="24">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    
                    <Label Grid.Column="0"                                   
                           Grid.Row="0"
                           FontSize="Medium"
                           Text="{Binding Date}"/>
                        
                    <Label Grid.Column="0"
                           Grid.Row="1"
                           FontSize="Small"
                           Text="{Binding Time}"/>
                        
                    <Label Grid.Column="1"
                           Grid.Row="0"
                           FontSize="Medium"
                           Text="{Binding StockName}"/>
                        
                    <Label Grid.Column="1"
                           Grid.Row="1"
                           FontSize="Small"
                           Text="{Binding Isin}"/>
                        
                    <Label Grid.Column="2"
                           Grid.Row="0"
                           Grid.RowSpan="2"
                           FontSize="Small"
                           VerticalTextAlignment="Center"
                           Text="{Binding Description}"/>
                        
                    <Label Grid.Column="3"
                           Grid.Row="0"
                           Grid.RowSpan="2"
                           FontSize="Medium"
                           VerticalTextAlignment="Center"
                           Text="{Binding Value}"/>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

完整页面XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:PortfolioOverview.View.Desktop"
             x:Class="PortfolioOverview.View.Desktop.DesktopTransactionsPage"
             Title="DesktopTransactionsPage"
             NavigationPage.HasNavigationBar="False">
    <HorizontalStackLayout>
        <local:DesktopMenuView/>
        <Grid ColumnDefinitions="*" RowDefinitions="auto, *">
            <!--Add transaction UI goes here Grid.Row 0-->
            
            <ListView ItemsSource="{Binding TransactionViewmodels}" Grid.Row="1">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid ColumnSpacing="24" Margin="24">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                
                                <Label Grid.Column="0"                                   
                                       Grid.Row="0"
                                       FontSize="Medium"
                                       Text="{Binding Date}"/>
                                    
                                <Label Grid.Column="0"
                                       Grid.Row="1"
                                       FontSize="Small"
                                       Text="{Binding Time}"/>
                                    
                                <Label Grid.Column="1"
                                       Grid.Row="0"
                                       FontSize="Medium"
                                       Text="{Binding StockName}"/>
                                    
                                <Label Grid.Column="1"
                                       Grid.Row="1"
                                       FontSize="Small"
                                       Text="{Binding Isin}"/>
                                    
                                <Label Grid.Column="2"
                                       Grid.Row="0"
                                       Grid.RowSpan="2"
                                       FontSize="Small"
                                       VerticalTextAlignment="Center"
                                       Text="{Binding Description}"/>
                                    
                                <Label Grid.Column="3"
                                       Grid.Row="0"
                                       Grid.RowSpan="2"
                                       FontSize="Medium"
                                       VerticalTextAlignment="Center"
                                       Text="{Binding Value}"/>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Grid>
    </HorizontalStackLayout>
</ContentPage>

解决方案

方案1：改用CollectionView（推荐）

ListView的每个ViewCell是独立渲染的，内部Grid的*仅作用于当前项的可用空间，无法同步列宽。CollectionView的布局系统会统一管理所有项的可用宽度，改用它可以轻松实现需求：

<CollectionView ItemsSource="{Binding TransactionViewmodels}" Grid.Row="1">
    <CollectionView.ItemsLayout>
        <!-- 设置每行1个项，确保所有项宽度一致 -->
        <GridItemsLayout Orientation="Vertical" Span="1"/>
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Margin="24" ColumnSpacing="24">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <!-- 按比例分配列宽 -->
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                </Grid.ColumnDefinitions>
                
                <Label Grid.Column="0" Grid.Row="0" FontSize="Medium" Text="{Binding Date}"/>
                <Label Grid.Column="0" Grid.Row="1" FontSize="Small" Text="{Binding Time}"/>
                <Label Grid.Column="1" Grid.Row="0" FontSize="Medium" Text="{Binding StockName}"/>
                <Label Grid.Column="1" Grid.Row="1" FontSize="Small" Text="{Binding Isin}"/>
                <Label Grid.Column="2" Grid.Row="0" Grid.RowSpan="2" FontSize="Small" VerticalTextAlignment="Center" Text="{Binding Description}"/>
                <Label Grid.Column="3" Grid.Row="0" Grid.RowSpan="2" FontSize="Medium" VerticalTextAlignment="Center" Text="{Binding Value}"/>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

CollectionView会确保所有项的可用宽度相同，内部Grid的*比例设置就能让对应列宽度统一，实现完美对齐。

方案2：自定义共享列宽（适配ListView）

如果必须保留ListView，可以通过绑定全局列宽属性实现同步：

在页面ViewModel中添加四个可绑定的列宽属性：

public double Column0Width { get; set; }
public double Column1Width { get; set; }
public double Column2Width { get; set; }
public double Column3Width { get; set; }

在页面加载时，遍历所有TransactionViewmodels数据，计算每个字段的文本最大宽度（需使用FontManager获取文本尺寸），然后赋值给上述属性。
修改ListView中Grid的列定义：

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="{Binding Source={RelativeSource AncestorType={x:Type local:DesktopTransactionsPage}}, Path=BindingContext.Column0Width}"/>
    <ColumnDefinition Width="{Binding Source={RelativeSource AncestorType={x:Type local:DesktopTransactionsPage}}, Path=BindingContext.Column1Width}"/>
    <ColumnDefinition Width="{Binding Source={RelativeSource AncestorType={x:Type local:DesktopTransactionsPage}}, Path=BindingContext.Column2Width}"/>
    <ColumnDefinition Width="{Binding Source={RelativeSource AncestorType={x:Type local:DesktopTransactionsPage}}, Path=BindingContext.Column3Width}"/>
</Grid.ColumnDefinitions>

这种方式需要手动计算文本宽度，适合无法替换ListView的场景。

原因分析

ListView的每个ViewCell是独立的可视化容器，内部Grid的*宽度仅基于当前项的内容计算，不同项的可用宽度可能不一致，导致列无法对齐。CollectionView则会为所有项分配相同的可用宽度，因此内部Grid的比例设置能生效。

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

.NET MAUI中ListView内Grid列无法均匀对齐问题

问题 #

当前代码 #

ListView片段 #

完整页面XAML #

解决方案 #

方案1：改用CollectionView（推荐） #

方案2：自定义共享列宽（适配ListView） #

原因分析 #

问题