Xamarin Forms：带圆角的 StackLayout

Question

我正在使用 Xamarin Forms PCL 开发应用程序。我需要一个带圆角的 StackLayout。我也尝试过圆角容器的框架，但没有可用的角半径属性。我找不到适用于 iOS、Android、UWP、Windows 8.1 的渲染器。

请任何人建议我如何实现具有圆角的 StackLayout 以及所有平台的角半径属性。

Answer 1

你可以使用Frame并把StackLayout放在里面，注意Frame默认采用padding 20：

<Frame CornerRadius="10"  
       OutlineColor="Red" 
       Padding="0">
            <StackLayout>

            </StackLayout>
</Frame>

Answer 2

<!--Curved stack-->
<Frame CornerRadius="5" 
           HorizontalOptions="Center" 
           VerticalOptions="Start"
           HasShadow="True"
           IsClippedToBounds="True"
           Padding="0">
        <StackLayout Padding="10,5,10,5"   
                         Orientation="Horizontal" 
                         BackgroundColor="White"  >
            <Image Source="settingsIcon"  
                   HeightRequest="25" 
                   WidthRequest="25" 
                   Aspect="Fill" />
            <Label Text="Filter" 
                   FontSize="Medium" 
                   VerticalTextAlignment="Center" 
                   VerticalOptions="Center"/>
        </StackLayout>
    </Frame>

我只是试图复制 BigBasket 的过滤器按钮。 See How cool it looks

Answer 3

由于 Xamarin 已经发布了Effects 机制，现在可以通过在两个平台上实现自定义效果来完成。这种方法的一个优点是效果更轻量级、可重复使用并且可以参数化并应用于任何 UI 元素。

创建自定义RoundCornersEffect继承RoutingEffect后，声明CornerRadius附加属性并在每个平台上实现PlatformEffect，它可以应用于任何Xamarin.Forms布局或控件，如下所示：

<StackLayout effects:RoundCornersEffect.CornerRadius="48"/>

使用硬编码的角半径或资源中的值

 <BoxView effects:RoundCornersEffect.CornerRadius="{StaticResource LargeCornerRadius}" /> 

这是full implementation and usage examples的链接。

Answer 4

使用以下实现您的预​​期输出；

Xamarin 表单控件： https://github.com/nitescua/Xamore/blob/master/Xamore.Controls/Border.cs

iOS： https://github.com/nitescua/Xamore/blob/master/Xamore.Controls.iOS/Renderers/BorderRenderer.cs

安卓： https://github.com/nitescua/Xamore/blob/master/Xamore.Controls.Droid/Renderers/BorderRenderer.cs https://github.com/nitescua/Xamore/blob/master/Xamore.Controls.Droid/Renderers/BorderRendererVisual.cs （注意https://github.com/nitescua/Xamore/tree/master/Xamore.Controls.Droid/Renderers中的一些文件编译设置为无，我正在做一些测试，需要删除那些）

WinPhone： https://github.com/nitescua/Xamore/blob/master/Xamore.Controls.WinPhone/Renderers/BorderRenderer.cs

Answer 5

只需使用带 CornerRadius 的 Frame 并将 IsClippedToBounds 设置为 True。这应该可以解决问题。

<Frame CornerRadius="30" 
           HorizontalOptions="Center" 
           VerticalOptions="Start"
           HasShadow="True"
           IsClippedToBounds="True"
           Padding="0">
<StackLayout></StackLayout>
</Frame>

Answer 6

我最近也有同样的需求，所以我为 iOS 和 Android 创建了一个自定义渲染器。我将它作为 Nuget 发布，您可以找到 here。 源码在GitHub，这里有一点点"How-To"

希望这会有所帮助！ 它非常易于使用（与 ContentView 相同，它是它的基础），虽然请注意这是为 .NET Standard 编译的，但您也可以将代码拉入您的 PCL

Answer 7

已经给出了很多有效的答案。

我只是想补充一点，自 Xamarin Forms 5 以来，添加了 Shapes 控件。

现在，您可以添加一个暴露 RadiusX 和 RadiusY 的 Rectangle。

Answer 8

您可以为任何布局或视图或单元格（StackLayout、Grid、ListView）设置圆角

http://venkyxamarin.blogspot.in/2017/12/how-to-set-corner-radius-for-view.html#more

Answer 9

尝试使用 PancakeView Nuget 包。首先，在您的 PCL 项目中安装该软件包。在 xaml 内容页面中给出参考。

xmlns:pkView="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"

<StackLayout>
      <pkView:PancakeView>
            CornerRadius="10,0,10,0" 
      </pkView:PancakeView>
 </StackLayout>