问居中对齐xamarin foms中的堆栈内容
EN

Stack Overflow用户

提问于 2017-03-01 10:48:47

回答 1查看 4.7K关注 0票数 3

我正在尝试将堆栈布局中心与网格单元对齐，但无法实现，请查看此代码，并告诉我是否进行了错误的对齐。

我想要放置两个标签的中心水平和垂直堆栈布局和堆栈应该填充和扩展网格单元。

请从你方给出一些建议。

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

谢谢,

xaml

xamarin

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-03-02 05:01:18

试着使用下面的代码。在这两个布局中，我使用了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>