Xamarin表单:StackLayout带圆角

Question

我正在使用xamarin表单pcl开发一个应用程序.我需要一个带圆角的stacklayout.我也尝试了圆角容器的框架,但没有可用的角半径属性.我找不到ios,android,uwp,windows 8.1的渲染器.

任何人都可以建议我如何实现所有平台的圆角以及角半径属性的stacklayout.

Answer 1

您可以使用Frame并将StackLayout放入其中,Note Frame默认采用填充20:

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

            </StackLayout>
</Frame>

Answer 2

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

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

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

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

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

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

Answer 3

<!--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 4

只需使用带有 CornerRadius 的 Frame 并将 IsClippedToBounds 设置为 True。这应该够了吧。

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

Answer 5

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

Xamarin Forms控件: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

Android: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