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 的过滤器按钮。 看看它看起来多么酷

Answer 3

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

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

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

带有硬编码的角半径或来自资源的值

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

这是完整实现和使用示例的链接。

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 中的一些文件将编译设置为 None，我正在做一些测试，需要删除那些)

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 发布，您可以在此处找到。 源代码可在GitHub上找到，这里有一些“操作方法”

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

Answer 7

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

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

现在，您只需添加一个暴露 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>