如何在Xamarin Forms的ContentPage中绘制指定样式的布局？

嘿，我来帮你搞定这个布局问题！你之前尝试嵌套Grid的思路其实方向是对的，大概率是细节没调整到位——比如行列尺寸没设好、元素对齐或间距没把控好，才导致效果不理想。结合你说的需求（1行2列外层Grid，左列是带3行2列Grid的BoxView，右列放Label），我给你整理了一个靠谱的实现方案，不管是单独布局还是结合ListView使用都适用：

核心思路 #

• 简化Grid嵌套逻辑，明确设置每行每列的尺寸（比如用Auto、*比例）
• 给BoxView和内部元素添加合适的Padding、Margin，避免布局挤压
• 如果是结合ListView使用，一定要在ItemTemplate里实现布局，确保列表项样式统一且自适应

结合ListView的完整XAML示例 #

这是最常用的场景——把你要的布局作为ListView的列表项：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourNamespace.YourPage">
    <ListView ItemsSource="{Binding YourDataList}"
              HasUnevenRows="True"> <!-- *这个属性一定要开！* 让列表项自动适配内容高度 -->
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <!-- 外层1行2列Grid：左列占满剩余空间，右列仅适配内容 -->
                    <Grid ColumnDefinitions="*, Auto"
                          Padding="10"
                          RowSpacing="0"
                          ColumnSpacing="10">
                        <!-- 左列：BoxView作为背景，嵌套3行2列的Grid放标签 -->
                        <BoxView Grid.Column="0"
                                 BackgroundColor="#f0f0f0"
                                 CornerRadius="8"
                                 Padding="8"/>
                        <Grid Grid.Column="0"
                              RowDefinitions="Auto,Auto,Auto"
                              ColumnDefinitions="Auto,*"
                              RowSpacing="6"
                              ColumnSpacing="8">
                            <!-- 第一行标签组 -->
                            <Label Grid.Row="0" Grid.Column="0"
                                   Text="标签1:"
                                   FontAttributes="Bold"
                                   TextColor="#333"/>
                            <Label Grid.Row="0" Grid.Column="1"
                                   Text="{Binding Property1}"
                                   TextColor="#666"/>
                            <!-- 第二行标签组 -->
                            <Label Grid.Row="1" Grid.Column="0"
                                   Text="标签2:"
                                   FontAttributes="Bold"
                                   TextColor="#333"/>
                            <Label Grid.Row="1" Grid.Column="1"
                                   Text="{Binding Property2}"
                                   TextColor="#666"/>
                            <!-- 第三行标签组 -->
                            <Label Grid.Row="2" Grid.Column="0"
                                   Text="标签3:"
                                   FontAttributes="Bold"
                                   TextColor="#333"/>
                            <Label Grid.Row="2" Grid.Column="1"
                                   Text="{Binding Property3}"
                                   TextColor="#666"/>
                        </Grid>
                        <!-- 右列：单独的Label，垂直居中对齐 -->
                        <Label Grid.Column="1"
                               Text="{Binding RightSideText}"
                               FontSize="Large"
                               FontAttributes="Bold"
                               VerticalOptions="Center"
                               TextColor="#007AFF"/>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>

关键优化点说明 #

• HasUnevenRows="True"：这是ListView布局的关键，开启后每个列表项会根据内部内容自动调整高度，不会出现内容截断或多余空白的问题
• 外层Grid列定义：ColumnDefinitions="*, Auto"让左列占满屏幕剩余空间，右列仅占用自身内容宽度，布局更紧凑合理
• BoxView与内部Grid的层级：两者都放在外层Grid的第0列，内部Grid会覆盖在BoxView上方，既保留了BoxView的背景样式，又不会挤压标签内容
• 间距控制：通过Grid的Padding、RowSpacing、ColumnSpacing属性，让元素之间的间距更舒适，避免布局显得拥挤

如果是单独布局（非ListView项） #

如果只是在ContentPage里单独放置这个布局，去掉ListView相关代码即可：

<ContentPage.Content>
    <Grid ColumnDefinitions="*, Auto"
          Padding="20"
          RowSpacing="0"
          ColumnSpacing="10">
        <!-- 左列内容和上面一致 -->
        <BoxView Grid.Column="0"
                 BackgroundColor="#f0f0f0"
                 CornerRadius="8"
                 Padding="8"/>
        <Grid Grid.Column="0"
              RowDefinitions="Auto,Auto,Auto"
              ColumnDefinitions="Auto,*"
              RowSpacing="6"
              ColumnSpacing="8">
            <!-- 这里填入你的3行2列Label内容 -->
            <Label Grid.Row="0" Grid.Column="0" Text="标签1:" FontAttributes="Bold"/>
            <Label Grid.Row="0" Grid.Column="1" Text="内容1"/>
            <Label Grid.Row="1" Grid.Column="0" Text="标签2:" FontAttributes="Bold"/>
            <Label Grid.Row="1" Grid.Column="1" Text="内容2"/>
            <Label Grid.Row="2" Grid.Column="0" Text="标签3:" FontAttributes="Bold"/>
            <Label Grid.Row="2" Grid.Column="1" Text="内容3"/>
        </Grid>
        <!-- 右列Label -->
        <Label Grid.Column="1"
               Text="右侧文本"
               VerticalOptions="Center"/>
    </Grid>
</ContentPage.Content>

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