How to implement Rounded Boxview in xamarin?

Best Answer

Answers

  • _albertoms_albertoms MXUniversity ✭✭
    edited March 20

    @NMackay thank you! I'll share the code that shows how I accomplished a rounded view using your suggestion:

    <Frame
        CornerRadius="20"
        Padding="1"
        BackgroundColor="White"
        AbsoluteLayout.LayoutFlags="XProportional">
        <Frame.AbsoluteLayout.LayoutBounds>
            <OnPlatform x:TypeArguments="Rectangle" iOS=".95,80,-1,-1" Android=".95,20,-1,-1" /> 
        </Frame.AbsoluteLayout.LayoutBounds>
        <Label
            WidthRequest="40"
            HeightRequest="40"
            VerticalTextAlignment="Center"
            HorizontalTextAlignment="Center"
            FontSize="10"
            Text="U">
        </Label>
    </Frame>
    

    This code creates a floating button just for prototyping purposes.

  • anna.domashychanna.domashych USMember ✭✭

    Since Xamarin has released Effects mechanism, you don't have to wrap each and every control into a Frame, implement custom controls or renderers to set rounded corners. It now can be done by implementing a custom effect. An advantage of this approach is that effects are light-weight, reusable and can be parameterized and applied to any UI element.

    After you create a custom RoundCornersEffect inheriting RoutingEffect, declare a CornerRadius attached property and implement PlatformEffect on each platform you support, it can be applied to any Xamarin.Forms layout or control like this:

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

    with hardcoded corners radius or a value from resources

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

    Here is a link to full implementation and usage examples.

  • NMackayNMackay GBInsider, University mod

    @anna.domashych said:
    Since Xamarin has released Effects mechanism, you don't have to wrap each and every control into a Frame, implement custom controls or renderers to set rounded corners. It now can be done by implementing a custom effect. An advantage of this approach is that effects are light-weight, reusable and can be parameterized and applied to any UI element.

    After you create a custom RoundCornersEffect inheriting RoutingEffect, declare a CornerRadius attached property and implement PlatformEffect on each platform you support, it can be applied to any Xamarin.Forms layout or control like this:

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

    with hardcoded corners radius or a value from resources

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

    Here is a link to full implementation and usage examples.

    Is UWP supported for this? always got the impression effects was an API they started on but lost interest in, maybe need to give it a second look.

  • NMackayNMackay GBInsider, University mod
Sign In or Register to comment.