Creating an Complex Layout in C# [Xamarin Forms]

Question

In my app, I need a page that will hold the user's profile, but I've been struggling to create complex UI in xamarin forms.

I saw this on the xamarin docs, but I'm not sure how to use XAML and they don't have any examples on how to get the same look in c#. Any help would be greatly appreciated!

Documentation page: https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/stack-layout/

XAML Code:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TheBusinessTumble.StackLayoutPage"
BackgroundColor="Maroon"
Title="StackLayouts">
    <ContentPage.Content>
        <ScrollView>
            <StackLayout Spacing="0" Padding="0" BackgroundColor="Maroon">
                <BoxView HorizontalOptions="FillAndExpand" HeightRequest="100" VerticalOptions="Start" Color="Gray" />
                <Button BorderRadius="30" HeightRequest="60" WidthRequest="60" BackgroundColor="Red" HorizontalOptions="Center" VerticalOptions="Start" />
                <StackLayout HeightRequest="100" VerticalOptions="Start" HorizontalOptions="FillAndExpand" Spacing="20" BackgroundColor="Maroon">
                    <Label Text="User Name" FontSize="28" HorizontalOptions="Center" VerticalOptions="Center" FontAttributes="Bold" />
                    <Entry Text="Bio + Hashtags" TextColor="White"
                        BackgroundColor="Maroon" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" />
                </StackLayout>
                <StackLayout Orientation="Horizontal" HeightRequest="50" BackgroundColor="White" Padding="5">
                    <StackLayout Spacing="0" BackgroundColor="White" Orientation="Horizontal" HorizontalOptions="Start">
                        <BoxView BackgroundColor="Black" WidthRequest="40" HeightRequest="40"  HorizontalOptions="StartAndExpand" VerticalOptions="Center" />
                        <Label FontSize="14" TextColor="Black" Text="Accent Color" HorizontalOptions="StartAndExpand" VerticalOptions="Center" />
                    </StackLayout>
                    <StackLayout Spacing="0" BackgroundColor="White" Orientation="Horizontal" HorizontalOptions="EndAndExpand">
                        <BoxView BackgroundColor="Maroon" WidthRequest="40" HeightRequest="40" HorizontalOptions="Start" VerticalOptions="Center" />
                        <Label FontSize="14" TextColor="Black" Text="Primary Color" HorizontalOptions="StartAndExpand" VerticalOptions="Center" />
                    </StackLayout>
                </StackLayout>
                <StackLayout Orientation="Horizontal">
                    <Label FontSize="14" Text="Age:" TextColor="White" HorizontalOptions="Start" VerticalOptions="Center" WidthRequest="100" />
                    <Entry HorizontalOptions="FillAndExpand" Text="35" TextColor="White" BackgroundColor="Maroon" />
                </StackLayout>
                <StackLayout Orientation="Horizontal">
                    <Label FontSize="14" Text="Interests:" TextColor="White"
                        HorizontalOptions="Start" VerticalOptions="Center" WidthRequest="100" />
                    <Entry HorizontalOptions="FillAndExpand" Text="Xamarin.Forms" TextColor="White" BackgroundColor="Maroon" />
                </StackLayout>
                <StackLayout Orientation="Horizontal">
                    <Label FontSize="14" Text="Ask me about:" TextColor="White" HorizontalOptions="Start" VerticalOptions="Center" WidthRequest="100"/>
                    <Entry HorizontalOptions="FillAndExpand" Text="Xamarin, C#, .NET, Mono..." TextColor="White" BackgroundColor="Maroon" />
                </StackLayout>
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

What I currently have:

public class ProfilePageCS : ContentPage
{
    public ProfilePageCS()
    {
        var layout = new StackLayout();

        var boxOne = new BoxView
        {
            Color = Color.Blue,
            VerticalOptions = LayoutOptions.FillAndExpand,
            HorizontalOptions = LayoutOptions.FillAndExpand,
            HeightRequest = 450
        };

        var boxTwo = new BoxView
        {
            Color = Color.Green,
            VerticalOptions = LayoutOptions.FillAndExpand,
            HorizontalOptions = LayoutOptions.FillAndExpand,
            HeightRequest = 175
        };

        layout.Children.Add(boxTwo);
        layout.Children.Add(boxOne);
        layout.Spacing = 0;
        Content = layout;
    }
}

Answer 1

If you are just starting out with Xamarin Forms, it is really worth the effort to learn XAML and use it to describe pages rather than use code.

The approach you are taking will lead to code that is difficult to read and maintain. You will end up with both UI and business logic in the same file. You won't be able to use the MVVM pattern and unit testing becomes more difficult.

Here is the first page in a series that helps you lean XAML. There are plenty of other resources on the internet.

Here is XAML for the layout you describes above.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Example.Pages.MainPage">

    <Grid>

        <Grid.RowDefinitions>
            <RowDefinition Height="3*"/>
            <RowDefinition Height="7*"/>
        </Grid.RowDefinitions>

        <StackLayout Grid.Row="0">
            <Image Source="image.png"/>
            <Label Text="Image Caption"/>
        </StackLayout>

    </Grid>

</ContentPage>

Answer 2

You could just use XAML compilation. https://developer.xamarin.com/guides/xamarin-forms/xaml/xamlc/

You just apply an attribute to the class, and you will have the same benefits of using C# (ie performance), but you will be able to easily define your elements in a declarative away (ie as with XAML).