user3796130
user3796130

Reputation:

How to Use Microsoft XAML Border on Xamarin Forms

I want to know what would be a XAML windows phone "Border" to Xamarin Forms? there's no Border to use BorderThickness, i want to draw some "lines" and set inside of 5 row's.Thanks

XAML Windows Phone :

<Border Grid.Row="0" BorderThickness="0,0,0,2" BorderBrush="#fe98fe"/>

I found a Frame on xamarin it does almost the same thing as Border but is not looking good for me!

Upvotes: 5

Views: 10049

Answers (2)

Nk54
Nk54

Reputation: 771

I wouldn't do the same way as the accepted answer suggest.

The best thing to do (IMHO) is either to use a Frame or a Grid/StackLayout/AnyContainerHere.

Here is what I would do

<Grid BackgroundColor="YourBorderColorHere" Padding="YourBorderWidthValueWhichIsNotOfTypeThickness">
    <YourContentHere [BackgroundColor="YourInnerBackgroundHere"]/>        
    <!-- If you don't have a content to set, use a BoxView with a different color (your background color)-->
</Grid>

This would do the same with less control, less rendering stuff so better perf. If you want corner radius do the same thing with a Frame.

If the author didn't like the Frame appearance, he should had try to set on its Frame a CornerRadius to 0 and HasShadow to False.

The less control and content to render, the better ! I like to quote Van der Rohe : "Less is more"

If you just want to draw a Line (Border with Thickness = 0,0,0,2), use a BoxView.

Upvotes: 2

Sven-Michael St&#252;be
Sven-Michael St&#252;be

Reputation: 14760

If you just want to draw a Line, you can use the BoxView https://developer.xamarin.com/api/type/Xamarin.Forms.BoxView/

Example for a horizontal line with height 2:

<BoxView Color="Red" HeightRequest="2" HorizontalOptions="FillAndExpand"></BoxView>

But there is currently no feature complete counterpart for Border.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <BoxView Grid.Row="0" BackgroundColor="Red" HeightRequest="2" VerticalOptions="End" HorizontalOptions="FillAndExpand"></BoxView>
    <BoxView Grid.Row="1" BackgroundColor="Red" HeightRequest="2" VerticalOptions="End"  HorizontalOptions="FillAndExpand"></BoxView>
    <BoxView Grid.Row="2" BackgroundColor="Red" HeightRequest="2" VerticalOptions="End"  HorizontalOptions="FillAndExpand"></BoxView>
    <BoxView Grid.Row="3" BackgroundColor="Red" HeightRequest="2" VerticalOptions="End"  HorizontalOptions="FillAndExpand"></BoxView>
</Grid>

Upvotes: 6

Related Questions