Xamarin Forms：带有圆角的 StackLayout

Question

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

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

Answer 1

您可以使用

Frame

并将

StackLayout

放入其中。请注意，

Frame

默认采用填充20：

<Frame CornerRadius="10"  
       OutlineColor="Red" 
       Padding="0">
            <StackLayout>
                <!-- your content -->
            </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 元素。

创建继承

RoundCornersEffect

的自定义

RoutingEffect

后，声明

CornerRadius

附加属性并在每个平台上实现

PlatformEffect

，它可以应用于任何

Xamarin.Forms

布局或控件，如下所示：

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

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

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

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

Answer 4

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

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

Answer 5

我最近有同样的需求，所以我为 iOS 和 Android 创建了一个自定义渲染器。我将其作为 Nuget 发布，您可以在here找到它。 源代码可以在 GitHub 上找到，这里有一些 “操作方法”

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

Answer 6

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

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

现在，您只需添加一个暴露 RadiusX 和 RadiusY 的矩形即可。

Answer 7

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

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

Answer 8

尝试使用 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>