时间戳

首页 > 解决方案 > Xamarin 子框架在父角半径上溢出

xaml - Xamarin 子框架在父角半径上溢出

问题描述

我有一个带有基于卡片的界面的 Xamarin Forms 项目，其中每张卡片的角半径为 1，填充为 0。在卡片中，顶部元素是一个标题控件，边距为 0，由一个带有背景颜色的框架和其中的一个标签。

问题在于，由于 Heading 控件没有圆角，因此与 Card 角相接的角会溢出并呈现在看起来不正确的 Card 外部。

有没有办法告诉 Xamarin XAML 渲染器在父级圆角时适当地切断子级的角？

这是一张图片来说明我的意思。绿色尖角呈现在父卡之外。

例子

标签： xamlxamarinxamarin.forms

解决方案

要在 Android、iOS 和 UWP 上获得与Xamarin.Forms版本 3.1.583944的背景和圆角相同的结果，请尝试以下 XAML：

<OnPlatform x:TypeArguments="View">
  <On Platform="UWP">
    <Frame CornerRadius="20" OutlineColor="Black" Padding="0" Margin="12,0" HeightRequest="40">
      <StackLayout BackgroundColor="Green">
        <Label Text="BackgroundColor in StackLayout" Margin="20,0" />
      </StackLayout>
    </Frame>
  </On>
  <On Platform="Android, iOS">
    <Frame CornerRadius="20" OutlineColor="Black" BackgroundColor="Green" Padding="0" Margin="12,0" HeightRequest="40">
      <StackLayout>
        <Label Text="BackgroundColor in Frame" Margin="20,0" />
      </StackLayout>
    </Frame>
  </On>
</OnPlatform>

似乎这两个平台似乎都没有产生相同的结果，可能是通过本机平台设计（即Android在上述两种情况下都在圆角内产生背景，iOS在设置为时在圆角内产生背景，UWPBackgroundColor在设置时在圆角内产生背景设置在)。FrameBackgroundColorStackLayout

请注意，在Frame CornerRadius.

推荐阅读