xaml - How to use 2 view boxes to create custom control to draw lines?


Keywords:xaml 


Question: 

I know that We can use a view box to simulate a line in xaml

<BoxView  
    VerticalOptions="Fill"
    HorizontalOptions="Center"
    WidthRequest="1"
    Color="Black"/>

That would create a vertical line, however I want to create something like: enter image description here

I wonder if a grid would be enough to create something like that

How to use a viewbox to draw the vertical line from bottom to top until middle, and then use other view box to middle to right

I was thinking on using a stacklayout instead of a grid and then use StackOrientation.Vertical and LayoutOptions.Center but I don´t know exactly how to proceed.

What would be the best or easiest way to do it?


1 Answer: 

I have created something similar that you are looking for:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Border Grid.ColumnSpan="2" Grid.RowSpan="2" BorderBrush="Black" BorderThickness="4">

    </Border>
    <Border Grid.Column="2" Grid.Row="2" BorderBrush="Black" BorderThickness="4">

    </Border>
</Grid>

PS: Just make sure that the controls inside the first border do not cross the first column of the second row inside the grid as the second border is overlapping the first one.