xaml - 在 xamarin foms xaml 中居中对齐堆栈内容

Question

我正在尝试将堆栈布局中心与网格单元对齐，但无法实现，请查看这段代码，如果我做错了对齐，请告诉我。

我想在堆栈布局中水平和垂直居中放置 2 个标签，堆栈应该在网格单元格中填充和展开。

请从您的角度提出一些建议。

      <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>

谢谢，

Answer 1

尝试使用此代码:我为这两个布局使用了 Grid 而不是 StackLayout。它会正常工作。

 <StackLayout Orientation="Vertical" BackgroundColor="#FFFFFF" Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="2" >

        <BoxView Color="#C0C0C0" HeightRequest="1" Margin="16,8,16,8" />

        <Grid>

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

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


          <Grid BackgroundColor="#f39c12" Grid.Row="0" Grid.Column="0" Margin="8,0,0,8">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width=".60*"></ColumnDefinition>
              <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>

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

            </Grid.GestureRecognizers>                


            <Label Grid.Column="0" Text="{StaticResource SmileIcon}" HeightRequest="45" FontFamily="{StaticResource FontAwesomeFont}"  
                   FontSize="24" 
                   TextColor="White"
                   HorizontalOptions="End"
                   VerticalOptions="Center"
                 
                   VerticalTextAlignment="Center"
                   HorizontalTextAlignment="End"/>
            
            <Label Grid.Column="1" x:Name="lbl_like" HeightRequest="45" Font="Medium" Text="SUPPORT" 
                    FontAttributes="Bold"
                    HorizontalOptions="Start"
                    VerticalOptions="Center"
                    HorizontalTextAlignment="Center"
                    VerticalTextAlignment="Center"/>

          </Grid>


          <Grid BackgroundColor="#2ecc71" Grid.Row="0" Grid.Column="1" Margin="0,0,8,8">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width=".55*"></ColumnDefinition>
              <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            
            <Grid.GestureRecognizers>
            
            <TapGestureRecognizer Command="{Binding Un_LikeCommand}" CommandParameter="No"/>                

            </Grid.GestureRecognizers>      
          

            <Label Text="{StaticResource SadIcon}" HeightRequest="45" Grid.Column="0"  FontFamily="{StaticResource FontAwesomeFont}" 
                 FontSize="24" 
                   TextColor="White"
                   HorizontalOptions="End"
                   VerticalOptions="Center"
                   VerticalTextAlignment="Center"
                   HorizontalTextAlignment="End"></Label>

            <Label x:Name="lbl_dislike" Grid.Column="1" HeightRequest="45" Font="Medium" Text="OPPOSE" 
              FontAttributes="Bold"
              HorizontalOptions="Start"
              VerticalOptions="Center"
              HorizontalTextAlignment="Center"
              VerticalTextAlignment="Center"/>

          </Grid>

        </Grid>

      </StackLayout>