CODEWITHSUNDEEP
c#iosvisual-studioxamarin
RositsaV
RositsaV

Reputation: 101

How to center Grid with 2 rows and 2 columns in xamarin with 4 Labels

I have one grid with two columns and two rows. I have stack layout in the begin and the end of the grid and there into the layout I have 4 labels with Grid.Row[0] Grid.Column[0]...1 and etc.

The code:

                <Frame CornerRadius="30"
                       BackgroundColor="Transparent"
                       Margin="20,0,20,10"
                       HeightRequest="100"
                       BorderColor="Red">
                  <StackLayout HorizontalOptions="FillAndExpand"
                                 VerticalOptions="FillAndExpand">
                       <Grid BackgroundColor="Transparent"
                              Padding="0,0,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>

The result is:

Here

How to center this Labels ?

Upvotes: 0

Views: 602

Answers (1)

eakgul
eakgul

Reputation: 3698

use HorizontalTextAlignment="Center" on Label.

<Frame CornerRadius="30"
       BackgroundColor="Transparent"
       Margin="20,0,20,10"
       HeightRequest="100"
       BorderColor="Red">
       <Grid BackgroundColor="Transparent"
              Padding="0,0,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>

Upvotes: 2

Related Questions