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 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);
}