frame border width in Xamarin.Forms

Question

I use Xamarin.Forms, I have Image. I want to Border with Corner Radius and Border Width. Can I do it ? I try to use Frame. It good but it has only Border Width = 1 and I can't change this. I know about Effect, but I don't want to use them. Can I do it For example with Rectangle or any way?

Answer 1

Just wrap your frame into another frame giving it background color that you want you bordercolor to be. And give the wrapper-frame padding. Here is an example of the round image with border.

<Frame CornerRadius="60" HeightRequest="100" WidthRequest="100" BackgroundColor="White" HorizontalOptions="Center" VerticalOptions="Start" Padding="2" IsClippedToBounds="True">
    <Frame CornerRadius="60" HeightRequest="100" WidthRequest="100" BackgroundColor="White" HorizontalOptions="Center" VerticalOptions="Start" Margin="0" Padding="0" IsClippedToBounds="True">
            <Image Source="dp.jpg" HeightRequest="40" WidthRequest="40" Aspect="AspectFill"></Image>
    </Frame>
</Frame>

Answer 2

You can try something like this :

<Frame HasShadow="False" CornerRadius="25" Padding="2" BackgroundColor="#F69927">
    <Frame HasShadow="False" CornerRadius="23" BackgroundColor="White" Padding="12">
        <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" VerticalOptions="Start">
            <!-- Content -->                
        </StackLayout>
    </Frame>
</Frame>

Answer 3

You can either create your own implementation with effects or extend the FreshEssentials open source library. They have a control called AdvancedFrame that provides custom renderers for the Frame control on all platforms.

If you look at each platform specific project, you'll notice the AdvancedFrameRenderer classes that create bezier paths for rounded corner support. You'll just need to dive into the Draw method on each platform (iOS, Android) and figure out how to set the stroke width.

It's easiest to start from Android since there the stroke width is defined in the code already (on this line). You'll just want to create a property for that in the AdvancedFrame control so you can have a different width on each control. I'm not sure how to set the stroke width on iOS but it's using UIBezierPath which should be rather easy to modify.