Xamarin UI 子布局放置

Question

我正在尝试在矩形框中添加一个圆。问题是 Circle 应该大于 Box 的高度，并且圆应该在里面包含一个标签。我设法创建了一个带有圆圈和框的框，并且圆圈内确实有标签。但是我无法创建一个半径大于框的圆。但我希望圆看起来比矩形条大。

<cards:SfCardView>
 <Grid x:Name="Grid">
   <Image Aspect="AspectFill"
          HeightRequest="150"
          Source="matchingTrialsBg.jpg" />
    <border:SfBorder BackgroundColor="{DynamicResource BorderBlue}"
                     BorderWidth="0"
                     HorizontalOptions="Start"
                     Opacity="0.9"
                     VerticalOptions="Center"
                     HeightRequest="80">
  <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Spacing="1">
                         <border:SfBorder CornerRadius="100" BackgroundColor="{StaticResource backgroundColor}" BorderColor="AliceBlue" VerticalOptions="CenterAndExpand" HeightRequest="100" WidthRequest="100" Padding="0" Margin="2">
                         <Label Text="10" FontSize="35" FontFamily="{StaticResource Montserrat-Regular}" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" ></Label>
   </border:SfBorder>
      <Label Margin="0" FontFamily="{StaticResource Montserrat-SemiBold}"
             FontSize="25" LineBreakMode="TailTruncation"
             LineHeight="{OnPlatform Default=-1, Android=1}"
             MaxLines="2" Text="Count"
             TextColor="{DynamicResource Gray-White}"
             WidthRequest="135"
             VerticalTextAlignment="Center"/>
      <Label Text="View All ➜" FontSize="Micro" HorizontalOptions="End" TextColor="White" Padding="10" VerticalOptions="EndAndExpand"/>
   </StackLayout>
  </border:SfBorder>
 </Grid>

如何在矩形中定位圆？

Answer 1

这可以使用下面的代码片段来实现。

代码片段：

<cards:SfCardView >
    <Grid x:Name="Grid">
        <Image Aspect="AspectFill" HeightRequest="150" Source="image.jpg" />
        <border:SfBorder BackgroundColor="SkyBlue"
                 BorderWidth="0"
                 HorizontalOptions="Start"
                 Opacity="0.9"
                 VerticalOptions="Center"
                 HeightRequest="80">
            <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Spacing="1">
                <Label Margin="110,0,0,0" 
         FontSize="25" LineBreakMode="TailTruncation"
         LineHeight="{OnPlatform Default=-1, Android=1}"
         MaxLines="2" Text="Count"
         TextColor="White"
         WidthRequest="135"
         VerticalTextAlignment="Center"/>
                <Label Text="View All ➜" FontSize="Micro" HorizontalOptions="End" TextColor="White" Padding="10" VerticalOptions="EndAndExpand"/>
            </StackLayout>
        </border:SfBorder>
        <border:SfBorder CornerRadius="100" BackgroundColor="LightBlue" 
                         BorderColor="AliceBlue" 
                         VerticalOptions="Center" HorizontalOptions="Start" 
                         HeightRequest="100" WidthRequest="100" Padding="0" Margin="2">
            <Label Text="10" FontSize="35"  VerticalTextAlignment="Center" HorizontalTextAlignment="Center" ></Label>
        </border:SfBorder>
    </Grid>
</cards:SfCardView>

截图：

希望对您有所帮助！

Xamarin UI 子布局放置

Xamarin UI Child layout placement

syncfusion

xamarin

xamarin.forms