'Center align stack content in xamarin foms xaml

I'm trying to align stack layout center to grid cell , but not able to achieve, Please look into this code and let me know if I have done any wrong alignment.

I want to place 2 labels center horizontally and vertically inside a stacklayout and the stack should be fill and expand in grid cell.

Please give some suggestions from your side. 

      <Grid>

          <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto" ></RowDefinition>

          </Grid.RowDefinitions>

          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
          </Grid.ColumnDefinitions>

          <StackLayout BackgroundColor="#f39c12" Grid.Row="0" Grid.Column="0" Margin="8,0,0,0" Orientation="Horizontal" VerticalOptions="Fill"  HorizontalOptions="FillAndExpand">

            <StackLayout.GestureRecognizers>

              <TapGestureRecognizer Command="{Binding LikeCommand}" CommandParameter="Yes"/>

            </StackLayout.GestureRecognizers>


            <StackLayout Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="Center" InputTransparent="True">
              <Label Text="{StaticResource SmileIcon}" FontFamily="{StaticResource FontAwesomeFont}" Margin="4,8,4,0" FontSize="32" TextColor="Red" 
                   HorizontalOptions="Center" 
                   VerticalOptions="Center" 
                   VerticalTextAlignment="Center" 
                   HorizontalTextAlignment="Center"></Label >
            <Label x:Name="lbl_like" Font="Medium" Text="Like" FontAttributes="Bold" Margin="0,4,0,4" 
                   HorizontalOptions="Center" 
                    VerticalOptions="Center" 
                    HorizontalTextAlignment="Center" 
                    VerticalTextAlignment="Center"></Label>
            </StackLayout>
          </StackLayout>

          <StackLayout BackgroundColor="#2ecc71"  Grid.Row="0" Grid.Column="1" Margin="0,0,8,0" Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

            <StackLayout.GestureRecognizers>

              <TapGestureRecognizer Command="{Binding Un_LikeCommand}" CommandParameter="No" />

            </StackLayout.GestureRecognizers>

            <StackLayout Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" InputTransparent="True">
            <!--<Image x:Name="img_dislike" HeightRequest="30" WidthRequest="30"  Source="sad.png" InputTransparent ="true" Margin="0,4,0,4"></Image>-->
            <Label Text="{StaticResource SadIcon}" HeightRequest ="40" FontFamily="{StaticResource FontAwesomeFont}" Margin="4,8,4,0" FontSize="32" TextColor="Red" HorizontalOptions="CenterAndExpand"></Label>

            <Label x:Name="lbl_dislike" Font="Medium" HeightRequest ="40" Text="Dislike" FontAttributes="Bold" 
            VerticalTextAlignment="Center"
            HorizontalTextAlignment="Center"
            VerticalOptions="Center" HorizontalOptions="Center" ></Label>
            </StackLayout>
          </StackLayout>

        </Grid>

Thanks,

xamlxamarin


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions