xamarin 中的多个标签对齐形式 xaml答案

【问题标题】：Multiple label alignment in xamarin forms xamlxamarin 中的多个标签对齐形式 xaml
【发布时间】：2018-01-04 05:31:26
【问题描述】：

我正在研究 xaml 部分，其中我使用列表视图进行堆栈布局。我是 xamarin 的新手，但不知道如何在他们的主要类别下对齐标签。我想正确对齐标签

我的 xaml 代码如下。

<ContentPage.Content>
    <StackLayout VerticalOptions="FillAndExpand" Margin="0,30,0,0" HorizontalOptions="FillAndExpand">
        <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
            <Label Text="Branch" FontSize="11" TextColor="#0A7475" HorizontalOptions="Start" Margin="10,0,0,0" />
            <Label Text="Restock Reason" TextColor="#0A7475" FontSize="11" HorizontalOptions="Start" Margin="20,0,0,0" />
            <Label Text="Qty" TextColor="#0A7475" FontSize="11" HorizontalOptions="Start" Margin="20,0,0,0" />
            <Label Text="Vendor" TextColor="#0A7475" FontSize="11" HorizontalOptions="Start" Margin="20,0,0,0" />
            <Label Text="Created On" TextColor="#0A7475" FontSize="11" HorizontalOptions="Start" Margin="20,0,0,0" />
        </StackLayout>
        <ListView x:Name="listViewn" BackgroundColor="White">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Horizontal" HorizontalOptions="StartAndExpand">
                            <Label x:Name="Branchh" TextColor="Gray" FontSize="11" HorizontalOptions="Start" Text="{Binding Branch}" Margin="10,5,0,10" />
                            <Label x:Name="reason" TextColor="#325772" FontSize="11" Text="{Binding Reason}" Margin="20,5,0,10" />
                            <Label x:Name="Qtty" TextColor="Gray" FontSize="11" HorizontalOptions="Center" Text="{Binding Qty}" Margin="0,5,0,0" />
                            <Label x:Name="vendor" TextColor="Gray" FontSize="11" Text="{Binding Vendor}" Margin="20,5,0,10" />
                            <Label x:Name="schedDate" TextColor="Gray" HorizontalOptions="End" FontSize="11" Text="{Binding SchedDate}" Margin="0,5,10,10" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage.Content>

【问题讨论】：

在 ViewCell 中使用 Grid 而不是 StackLayout

标签： xaml xamarin xamarin.forms

【解决方案1】：

正如 SushiHangover 建议的那样，使用网格来对齐列。

这样

<ContentPage.Content>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height"Auto"/>
            <RowDefinition Height"*"/>
        </Grid.RowDefinitions>

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Label Grid.Column="0" Text="Branch" FontSize="11" TextColor="#0A7475" HorizontalOptions="Start" Margin="10,0,0,0" />
            <Label Grid.Column="1" Text="Restock Reason" TextColor="#0A7475" FontSize="11" HorizontalOptions="Start" Margin="20,0,0,0" />
            <Label Grid.Column="2" Text="Qty" TextColor="#0A7475" FontSize="11" HorizontalOptions="Start" Margin="20,0,0,0" />
            <Label Grid.Column="3" Text="Vendor" TextColor="#0A7475" FontSize="11" HorizontalOptions="Start" Margin="20,0,0,0" />
            <Label Grid.Column="4" Text="Created On" TextColor="#0A7475" FontSize="11" HorizontalOptions="Start" Margin="20,0,0,0" />
        </Grid>

        <ListView Grid.Row="1" x:Name="listViewn" BackgroundColor="White">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Label Grid.Column="0" TextColor="Gray" FontSize="11" HorizontalOptions="Start" Text="{Binding Branch}" Margin="10,5,0,10" />
                            <Label Grid.Column="1" TextColor="#325772" FontSize="11" Text="{Binding Reason}" Margin="20,5,0,10" />
                            <Label Grid.Column="2" TextColor="Gray" FontSize="11" HorizontalOptions="Center" Text="{Binding Qty}" Margin="0,5,0,0" />
                            <Label Grid.Column="3" TextColor="Gray" FontSize="11" Text="{Binding Vendor}" Margin="20,5,0,10" />
                            <Label Grid.Column="4" TextColor="Gray" HorizontalOptions="End" FontSize="11" Text="{Binding SchedDate}" Margin="0,5,10,10" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

    </Grid>
</ContentPage.Content>

您也可以将标题放入列表视图标题中，但这将使用列表视图向上滚动页面。

【讨论】：