CODEWITHSUNDEEP
c#xamarinxamarin.forms
Lorenzo
Lorenzo

Reputation: 29427

Beginner help for Xamarin ContentPage and or XAML Page

I have just started my trial with Xamarin and I am trying to investigate how it works.

I would like to create a simple page with three rows that have the following requirements:

  1. First row should be anchored to top and will contains an image with fixed width and height (eg. 264x70)
  2. Second row should contains simple text. This row shall expand vertically to occupy all the space available
  3. Third row should anchor bottom and will contains two buttons which will be stacked vertically and are horizontally centered.

I have tried to create this page directly with code doing something like this:

public SamplePage() {
    this.Padding = new Thickness( 10, Device.OnPlatform( 20, 0, 0 ), 10, 0 );
    var homeLogo = new Image() { 
        Aspect = Aspect.AspectFit
    };
    homeLogo.Source = ImageSource.FromFile( "HomeLogo.png" );
    var btn1 = new Button() {
        Text = "first button"
    };
    var btn2 = new Button() {
        Text = "second button"
    };
    this.Content = new StackLayout {
        VerticalOptions = LayoutOptions.Center,
        HorizontalOptions = LayoutOptions.Center,
        Orientation = StackOrientation.Vertical,
        Children = {
            homeLogo,
            new Label { 
                VerticalOptions = LayoutOptions.FillAndExpand,
                Text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in dolor maximus, molestie elit quis, condimentum ipsum." 
            },
            btn1,
            btn2
        }
    };
}

I am using Xamarin in Visual Studio and created a Xamarin Forms project using a Portabe class library. Is there any designer that I can use to start learning how to create UI?

Upvotes: 0

Views: 213

Answers (1)

Rohit Vipin Mathews
Rohit Vipin Mathews

Reputation: 11787

Try this the following. i think you are missing the fact that for the inner container to have the ability to expand the parent container should have the same property set to expand as well. 

this.Content = new StackLayout {
        VerticalOptions = LayoutOptions.CenterAndExpand,
        HorizontalOptions = LayoutOptions.Center,
        Orientation = StackOrientation.Vertical,
        Children = {
            homeLogo,
            new Label { 
                VerticalOptions = LayoutOptions.CenterAndExpand,
                Text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in dolor maximus, molestie elit quis, condimentum ipsum." 
            },
            btn1,
            btn2
        }
    };

Upvotes: 1

Related Questions