如何在带有 4 个标签的 xamarin 中以 2 行和 2 列居中网格

问题描述

我有一个包含两列两行的网格。我在网格的开头和结尾都有堆栈布局,在布局中我有 4 个标签,带有 Grid.Row[0] Grid.Column[0]...1 等。

代码

                <Frame CornerRadius="30"
                       BackgroundColor="Transparent"
                       Margin="20,20,10"
                       HeightRequest="100"
                       BorderColor="Red">
                  <StackLayout HorizontalOptions="FillAndExpand"
                                 VerticalOptions="FillAndExpand">
                       <Grid BackgroundColor="Transparent"
                              Padding="0,0">
                                <Grid.RowDeFinitions>
                                    <RowDeFinition Height="*" />
                                    <RowDeFinition Height="*" />
                                </Grid.RowDeFinitions>
                                <Grid.ColumnDeFinitions>
                                    <ColumnDeFinition Width="*" />
                                    <ColumnDeFinition Width="*" />
                                </Grid.ColumnDeFinitions>
                                    <Label Text="Temp Now"
                                           VerticalOptions="Center"
                                           TextColor="White"
                                           VerticalTextAlignment="Center"
                                           FontAttributes="Bold" 
                                           FontSize="15"
                                           Grid.Row="0"
                                           Grid.Column="0"/>

                                    <Label x:Name="TempNowLbl"
                                           VerticalOptions="Center"
                                           TextColor="White"
                                           VerticalTextAlignment="Center"
                                           FontAttributes="Bold" 
                                           FontSize="25"
                                           Grid.Row="1"
                                           Grid.Column="0"/>
                                           
                                    <Label Text="Wind Speed"
                                           VerticalOptions="Center"
                                           TextColor="White"
                                           VerticalTextAlignment="Center"
                                           FontAttributes="Bold" 
                                           FontSize="15"
                                           Grid.Row="0"
                                           Grid.Column="1"/>

                                    <Label x:Name="WindSpeedNowLbl"
                                           VerticalOptions="Center"
                                           TextColor="White"
                                           VerticalTextAlignment="Center"
                                           FontAttributes="Bold" 
                                           FontSize="25"
                                           Grid.Row="1"
                                           Grid.Column="1"/>
                       </Grid>
                </StackLayout>
             </Frame>

结果是:

Here

如何将此标签居中?

解决方法

HorizontalTextAlignment="Center" 上使用 Label

<Frame CornerRadius="30"
       BackgroundColor="Transparent"
       Margin="20,20,10"
       HeightRequest="100"
       BorderColor="Red">
       <Grid BackgroundColor="Transparent"
              Padding="0,0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                    <Label Text="Temp Now"
                           VerticalOptions="Center"
                           TextColor="White"
                           VerticalTextAlignment="Center"
                           HorizontalTextAlignment="Center"
                           FontAttributes="Bold" 
                           FontSize="15"
                           Grid.Row="0"
                           Grid.Column="0"/>

                    <Label x:Name="TempNowLbl"
                           VerticalOptions="Center"
                           TextColor="White"
                           VerticalTextAlignment="Center"
                           HorizontalTextAlignment="Center"
                           FontAttributes="Bold" 
                           FontSize="25"
                           Grid.Row="1"
                           Grid.Column="0"/>
                           
                    <Label Text="Wind Speed"
                           VerticalOptions="Center"
                           TextColor="White"
                           VerticalTextAlignment="Center"
                           HorizontalTextAlignment="Center"
                           FontAttributes="Bold" 
                           FontSize="15"
                           Grid.Row="0"
                           Grid.Column="1"/>

                    <Label x:Name="WindSpeedNowLbl"
                           VerticalOptions="Center"
                           TextColor="White"
                           VerticalTextAlignment="Center"
                           HorizontalTextAlignment="Center"
                           FontAttributes="Bold" 
                           FontSize="25"
                           Grid.Row="1"
                           Grid.Column="1"/>
       </Grid>
</Frame>