Xamarin Forms：带圆角的 StackLayout

Posted 2023-03-25

【中文标题】Xamarin Forms：带圆角的 StackLayout

【英文标题】：Xamarin Forms: StackLayout with rounded corners

【发布时间】：2017-05-02 09:12:54

【问题描述】：

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

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

【问题讨论】：

github.com/paulpatarinski/Xamarin.Forms.Plugins/tree/master/…

@Depechie 我不需要 boxview 我想要 stacklayout 以便我可以将元素放入其中

仍然可以将东西放在盒子视图的顶部

forums.xamarin.com/discussion/57473/…

@Depechie 但是如何？我曾尝试向 boxview 添加元素，但没有奏效

【参考方案1】：

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

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

            </StackLayout>
</Frame>

【讨论】：

我们可以增加拐角半径吗？？

可以调整边框宽度吗？

如果你想增加圆角半径或调整边框宽度，你应该实现自定义渲染器。我在这里写的：gist.github.com/ads90/49cdea7d609a5b364eb34c9feedb7271

Frame 上还需要 IsClippedToBounds="True" 或者里面的所有控件都乐意为您创建新角。

@NevilleNazerane 边框宽度不可自定义，每个平台都有固定值。您可以“模拟”将一个框架放入另一个框架中，因此请使用 backgroundColor 属性并在外部设置填充，直到您获得适当的外观

【参考方案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

【讨论】：

@sonali 请检查一下。 .感谢您提出问题。

如果您的内容流血，您可能还需要 IsClippedtoBounds="true"。

什么是 BigBasket 过滤按钮？

我试图在“Bigbasket android app”中复制这个组件的设计

【参考方案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的链接。

【讨论】：

@foxanna 我喜欢这个想法，我按照你的教程进行操作，但由于某种原因，角落没有变圆。我检查了你的指令和我的代码很多次，同样的，但在我的模拟器中，角落没有变圆。一切编译和构建都很好，但没有任何效果。

@EmilRR1，在RoundCornersEffectIOS.OnAttached 或RoundCornersEffectDroid.OnAttached 中设置断点并确保它们被命中。否则，由于某种原因，效果可能不会附加到视图上。另外，查看文章下方的评论，可能有用medium.com/@rekerrsive/…。

@foxanna 我发现了问题所在。你是对的，那些断点没有被击中。原因是我需要添加这个：[assembly: ResolutionGroupName("MyAppName.MyEffectFolder")] 现在可以使用了。喜欢你的教程，谢谢。

完成工作和可重复使用的最佳方式！

【参考方案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

【讨论】：

感谢@jay Patel 提供此代码，您是否有关于如何创建自定义角半径的示例（仅左上角）。我在 Android 和 WP 中找到了一种方法，但 IOS 无法正常工作

【参考方案5】：

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

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

【参考方案6】：

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

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

【参考方案7】：

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

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

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

【参考方案8】：

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

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

【参考方案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>