Position 1st StackLayout on page at the bottom Xamarin.Forms

Question

I am new to Xamarin and I am trying to position my first stacklayout of the page at the bottom of the screen and then scroll to see the remaining content.

Also, I have an image as background for my content page and I am trying to use scrollview for rest of the page content. I tried other solutions on StackOverflow but they have StackLayouts VerticalOptions as Center and Start which I don’t. I want the first stacklayout to start from the bottom and no control/layout above that.

Also, this contentpage acts as a Detail page for a MasterDetailPage.

This is my contentpage so far -

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="Excercise.Views.HomePage" Title="App"
             NavigationPage.HasBackButton="False" BackgroundImageSource="image.jpg">
  
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Option1"></ToolbarItem>
            <ToolbarItem Text="Option2"></ToolbarItem>

        </ContentPage.ToolbarItems>
        <!--<NavigationPage.Icon>
            <OnPlatform x:TypeArguments="FileImageSource">
                <On Platform="iOS" Value="tab_feed.png"/>
            </OnPlatform>
        </NavigationPage.Icon>-->
    
    <ContentPage.Content>
    <StackLayout Orientation="Horizontal" >
           
            <ScrollView>
                    <StackLayout Orientation="Vertical" VerticalOptions="EndAndExpand">
                        <Frame BorderColor="Gray" CornerRadius="5" Padding="5" Margin="10" VerticalOptions="EndAndExpand">
                            <Grid VerticalOptions="EndAndExpand">
                                <Grid.RowDefinitions>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition Height="2"></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition Height="*"></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                </Grid.RowDefinitions>

                                <Label x:Name="Label1" FontSize="Large" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" ></Label>
                                <Label x:Name="Label2"  FontSize="Medium" Grid.Row="0" Grid.Column="3" Grid.ColumnSpan="2"></Label>
                                <BoxView BackgroundColor="Black" Grid.Row="1" Grid.ColumnSpan="6"></BoxView>

                                <Label x:Name="Label3" FontSize="Large" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Grid.RowSpan="3"></Label>
                                <Label Text="Label4" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Grid.RowSpan="3"></Label>
                                <Label x:Name="Label5" Grid.Row="5" Grid.ColumnSpan="2"></Label>
                                <Label x:Name="Label6" Grid.Row="2" Grid.Column="3" Grid.ColumnSpan="2"></Label>
                                <Label x:Name="Label7" Grid.Row="3" Grid.Column="3" Grid.ColumnSpan="2"></Label>
                                <Label x:Name="Label8" Grid.Row="4" Grid.Column="3" Grid.ColumnSpan="2"></Label>
                                <Label x:Name="Label9" Grid.Row="5" Grid.Column="3" Grid.ColumnSpan="2"></Label>

                                <CollectionView x:Name="collecview1" WidthRequest="100"  Grid.Row="6" Grid.RowSpan="3" Grid.ColumnSpan="6" ItemsLayout="HorizontalList" >
                                    <CollectionView.ItemTemplate>
                                        <DataTemplate>
                                            <StackLayout Orientation="Vertical" Padding="5,25,30,25" VerticalOptions="Center">
                                                <Label Text="{Binding Text}"></Label>
                                                <Image Source="{Binding Text}"></Image>
                                                <Label Text="{Binding Text}" HorizontalTextAlignment="Center"></Label>
                                            </StackLayout>
                                        </DataTemplate>
                                    </CollectionView.ItemTemplate>
                                </CollectionView>

                            </Grid>
                        </Frame>
                        <Frame BorderColor="Gray" CornerRadius="5" Padding="5" Margin="10">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"></RowDefinition>

                                </Grid.RowDefinitions>

                                <StackLayout Grid.Row="0" Grid.Column="0">
                                    <Label Text="Label10"></Label>
                                    <BoxView BackgroundColor="Gray" HeightRequest="2"></BoxView>
                                    <CollectionView x:Name="collecview2" ItemsLayout="VerticalList" ItemSizingStrategy="MeasureAllItems">
                                        <CollectionView.ItemTemplate>
                                            <DataTemplate>
                                                <Grid>
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition Height="30" />
                                                    </Grid.RowDefinitions>
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="*"  />
                                                        <ColumnDefinition Width="Auto" />
                                                        <ColumnDefinition Width="Auto" />
                                                        <ColumnDefinition Width="Auto" />
                                                        <ColumnDefinition Width="*" />
                                                    </Grid.ColumnDefinitions>

                                                    <Label Text="{Binding Text}" Grid.Column="0" HorizontalTextAlignment="End" ></Label>
                                                    <Label Text="Image" Grid.Column="1"></Label>
                                                    <!--<Image Source="{Binding IconSource}" Grid.Column="1"></Image>-->
                                                    <Label Text="{Binding Text}" FontAttributes="Bold" Grid.Column="2"></Label>
                                                    <Label Text="{Binding Text}" Grid.Column="3"></Label>
                                                    <Label Text="{Binding Text}" Grid.Column="4"></Label>

                                                </Grid>
                                            </DataTemplate>
                                        </CollectionView.ItemTemplate>

                                    </CollectionView>
                                </StackLayout>
                            </Grid>
                        </Frame>

                        <Frame BorderColor="Gray" CornerRadius="5" Padding="5" Margin="10">
                            <StackLayout>
                                <Label Text="Label23"></Label>
                                <BoxView BackgroundColor="Black" HeightRequest="2"></BoxView>
                            </StackLayout>
                        </Frame>
                    </StackLayout>
                </ScrollView>
           
        </StackLayout>
    </ContentPage.Content>
</ContentPage>


MainPage.xaml.cs 

 [DesignTimeVisible(false)]
    public partial class MainPage : MasterDetailPage
    {
        public MainPage()
        {
            InitializeComponent();

            MasterBehavior = MasterBehavior.Split;
            Detail = new HomePage();
        }   

        public MainPage(string City, string lockey,string StateID)
        {
            InitializeComponent();  
            Detail = new HomePage(City,lockey,StateID);    
        }

       
    }     
     
MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
                  xmlns:local="clr-namespace:Excercise.Views"
             x:Class="Excercise.MainPage" Title="App" IsPresented="False">

    <MasterDetailPage.Master>


        <local:MenuPage Title="MenuPage" x:Name="menuPage"></local:MenuPage>


    </MasterDetailPage.Master>

    <MasterDetailPage.Detail>
        <local:HomePage Title="HomePage" x:Name="homePage" BackgroundImageSource="raleigh.jpg"></local:HomePage>
    </MasterDetailPage.Detail>
</MasterDetailPage>

Is there anyway to achieve this? Any help is much appreciated! Thank you so much!

I'm not 100% getting the picture of what you're looking for. Can you provide an example or mockup of what you're looking for? — Andrew, Aug 13 '20 at 21:34
I am trying to add controls vertically on a single page and the users can scroll up to see the contents of the page. More like Yahoo Weather App UI. So, I want to add an image as a background and the first stacklayout to start from the bottom so the image is visible to the user on a MasterdetailPage. — learningtocode2020, Aug 20 '20 at 20:16

score 1 · Accepted Answer · answered Aug 14 '20 at 02:44

1

I want the first stacklayout to start from the bottom and no control/layout above that.

You can give your first stacklayout a top margin with screen height request so that it will start from the bottom.

In xaml, give a name to your StackLayout :

<StackLayout Orientation="Vertical" VerticalOptions="End" x:Name="firstStacklayout">

In code behind:

protected override void OnAppearing()
{
    base.OnAppearing();
    firstStacklayout.Margin = new Thickness(0, Application.Current.MainPage.Height, 0, 0);
}

answered Aug 14 '20 at 02:44

nevermore

15,432
1
12
30

Thank you very much for replying and helping me with this. But this solution is not working. – learningtocode2020 Aug 14 '20 at 20:26
Why it is not working? What do you want to achieve? – nevermore Aug 17 '20 at 01:55
So, I changed the StackLayout properties as mentioned by you but I think the controls below that stacklayout pushes the content of the screen upwards. What I am trying to do is, the first stacklayout to start at the bottom of the screen and then the user can scroll to see the content below the first stacklayout. – learningtocode2020 Aug 17 '20 at 13:26
I uploaded a sample project [here](https://github.com/XfHua/StackLayout-sample) and check if it is you want. – nevermore Aug 18 '20 at 01:39
Thank you Jack Hua! This is working partially. It doesn't work when I first load the App. It works when the HomePage is called from other Page. Is this because, HomePage is a Detail Page of a MasterDetailPage? I have edited my initial question and added the code for MainPage above. – learningtocode2020 Aug 18 '20 at 12:46
Why did you set the HomePage both in code behind and xaml? Choose one is enough. – nevermore Aug 20 '20 at 01:30
Yeah I realized it, I have removed it now. But even so, the Stacklayout is not posiitoning at the bottom, when I first load the app. I redirect to the HomePage from other page and then it is positioned at the bottom. Any ideas why? – learningtocode2020 Aug 20 '20 at 17:49
I did a sample project [here](https://github.com/XfHua/ScrollView-Offset) and it all works well. Please check. – nevermore Aug 21 '20 at 01:52
@geekgirldiva Any update here? If my answer helps you, can you please mark it so that we can help more people with same problem. – nevermore Aug 25 '20 at 01:43
Hi @Jack Hua. Yes, this answer helped. It was not working before because I had code in OnAppearing() and I assigned the property before the code. Now, I have the line - firstStacklayout.Margin = new Thickness(0, Application.Current.MainPage.Height, 0, 0); below all my code in OnAppearing() and its working fine. Thank you so much for all the help! I really appreciate it! – learningtocode2020 Aug 25 '20 at 15:21
Is there a way to do this but in a ViewModel pattern? – VAAA Apr 04 '22 at 05:05

Position 1st StackLayout on page at the bottom Xamarin.Forms

1 Answers1