2017-03-01 208 views
2

我想對齊堆棧佈局中心到網格單元格,但無法實現,請查看此代碼,並讓我知道如果我做了任何錯誤的對齊。中心對齊堆棧內容在xamarin foms xaml

我想在一個堆棧佈局中水平和垂直放置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> 

感謝,

回答

2

嘗試使用此代碼。我沒有使用stacklayout,而是使用了Grid作爲兩種佈局。它會工作精細

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

謝謝哈里斯。它儘可能多的我想要的。 –