PushAsync from View Model

In my last post, we discussed about creating grid menu with help of Flow List View and how I navigated to other page from view model using Push Modal Async. Well, later I found out that method had one crucial weakness. When I tried it out in my iPhone simulator, after I chose one of the menus, I couldn’t go back to my previous page because in iPhone we don’t have back button. I did a further research on internet and came out with a solution.

Change the root page into navigation page

When I did the research, there was one keyword that always appeared, whether in Stack Overflow or Xamarin Forum, it was changing the root page into navigation page. It sound simple but it took me a while to apply it properly. And after some trial and errors, here’s what I finally did to my view model. Note: I only attach the updated parts and commented the original source to distinguish the different.

//private INavigation navigation;<br>
private BreakfastPage breakfastPage;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>public BreakfastViewModel(BreakfastPage breakfastPage)<br>
  //this.navigation = navigation;<br>
  this.breakfastPage = breakfastPage;<br>
  BreakfastMenuList = new ObservableCollection&lt;BreakfastMenu&gt;()<br>
    new BreakfastMenu() { ImageSource = "Burger.png", MenuTitle = "BURGER" },<br>
    new BreakfastMenu() { ImageSource = "Pizza.png", MenuTitle = "PIZZA" },<br>
    new BreakfastMenu() { ImageSource = "EggBacon.png", MenuTitle = "BACON" },<br>
    new BreakfastMenu() { ImageSource = "Sandwich.png", MenuTitle = "SANDWICH" },<br>
  MenuTappedCommand = new Command(async () =&gt; await MenuSelectedAsync());<br>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>private async Task MenuSelectedAsync()<br>
  Application.Current.MainPage = new NavigationPage(breakfastPage);<br>
  switch (SelectedBreakfastMenu.MenuTitle)<br>
    case "BURGER":<br>
        await Application.Current.MainPage.Navigation.PushAsync(new BreakfastBurger());<br>
        //await navigation.PushModalAsync(new BreakfastBurger());<br>
    case "PIZZA":<br>
        await Application.Current.MainPage.Navigation.PushAsync(new BreakfastPizza());<br>
        //await navigation.PushModalAsync(new BreakfastPizza());<br>
    case "BACON":<br>
        await Application.Current.MainPage.Navigation.PushAsync(new BreakfastBacon());<br>
        //await navigation.PushModalAsync(new BreakfastBacon());<br>
    case "SANDWICH":<br>
        await Application.Current.MainPage.Navigation.PushAsync(new BreakfastSandwich());<br>
       //await navigation.PushModalAsync(new BreakfastSandwich());<br>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->

As you can see, I didn’t use INavigation anymore. Instead, I passed the content page through view model’s constructor then turn it into navigation page. Next, I set the Application’s current main page into my new navigation page and that enable me to call push async from view model. The following code is how I bind the view model to content page.

public partial class BreakfastPage : ContentPage<br>
  public BreakfastPage()<br>
    BindingContext = new BreakfastViewModel(this);<br>

Hide Navigation Bar

If there’s one thing that I didn’t like about this method is the navigation bar. Turning my root page into navigation page causing it to have navigation bar, which I didn’t need. So, I also updated the xaml file of my menu by adding one line to hide navigation bar in content page.

&lt;ContentPage NavigationPage.HasNavigationBar="False" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView" x:Class="Testing.Views.BreakfastPage"&gt;<br>
  &lt;ContentPage.Content ...&gt;<br>


  • Icon from FlatIcon, Burger icon by Freepik, Pizza icon by Smashicons, EggBacon and Sandwich Icon by Twitter

Sample Code is Available in my Github repo


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s