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

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 ?

If it's possible with native app development then it's possible with Xamarin. Have you see what you are trying to describe on another application? If so, then yes. If not, then maybe you need to describe your scenarios better, possibly with a sketch prototype — Saamer

bobrien bobrien · Accepted Answer · 2020-07-14T16:31:53

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

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

1 Answers