How to display content page half the screen size in Xamarin Forms? - xamarin

Question

I am working on a Xamarin Forms project and need to achieve the following:
On Navigating from Home Page to a new Page, the new page will have a menu button, some text fields and a signature button. When we click on Menu Button, a menu page should slide down. The slide menu page should have a navigation bar and should be able to navigate to other sub menu options.
The slide menu page should overlap current content page. Is there any way to achieve it ?

Answer 1

Slide menu will just be determined by what packages you want to use or if you want to create animations with ResourceDictionary/VisualStateManager but to get it to be half the size of the page dynamically you can use something like:
XAML:
<Page x:Name="Page" HeightRequest="{Binding PageHeight, Mode=TwoWay}"></Page>
<Menu x:Name="Menu" HeightRequest="{Binding MenuHeight}"></Menu>
XAML.CS:
public class YourPage : YourType //(ContentViews for me)
private YourViewModel ViewModel => (YourViewModel)this.BindingContext;
public YourPage()
{
this.BindingContext = YourVM;
}
VM.CS:
public class YourViewModel : INotifyPropertyChanged
private double _pageHeight;
public double PageHeight
{
set
{
if (_pageHeight != value)
{
_pageHeight = value;
OnPropertyChanged("PageHeight");
PageHeightChanged("PageHeight");
}
}
get
{
return _pageHeight;
}
}
private double _menuHeight;
public double MenuHeight
{
set
{
if (_menuHeight != value)
{
_menuHeight = value;
OnPropertyChanged("MenuHeight");
}
}
get
{
return _menuHeight;
}
}
private void PageHeightChanged()
{
Menu.HeightRequest = Page.Height/2;
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}