如何使用XAML和Xamarin进行此布局？

Question

我想问一下如何使用XAML和Xamarin制作类似于下图的设计？

我的意思是一个主要的图像图像和一个配置文件图像的顶部只有一半..新闻标题是在主要图像，然后在右上角有新闻时间。

Answer 1

试试这个到ContentPage：

<Grid RowSpacing="0"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="*"/> 
     </Grid.RowDefinitions> 

     <!-- header content --> 
     <StackLayout BackgroundColor="WhiteSmoke"> 
      <Label HorizontalOptions="End" Text="8 hours ago" VerticalOptions="Center" FontSize="Large" FontAttributes="Bold"/> 
     </StackLayout> 

     <!-- body content --> 
     <StackLayout Grid.Row="1"> 
      <Image Source="xamarin.png" Aspect="AspectFill"/> 
     </StackLayout> 
     <!-- profile image --> 
     <Image Source="usermale.png" 
       VerticalOptions="End" HorizontalOptions="Start" 
       HeightRequest="100" WidthRequest="100" 
       TranslationY="50"/> 
</Grid> 

宥会得到这样的：