Share via

WindowsPhone 8.1: Navigation DrawerLayout (C#-XAML)

  • Article

Introduction:

Yes i am really happy now.Because there is now a very nice built-in 'DrawerLayout' library available from 'Nuget'. Many thanks to 'amarmesic' for providing this layout.
Previously, in 8.0, we needed to write lot of code to make 'Navigation Drawer'.
Now we can make it with very few steps. Any way for my kudos visitors, I will now explain usage:

Building the sample:

  • Make sure you’ve downloaded and installed the Windows Phone SDK. For more information, see Get the SDK.
  • I assumes that you’re going to test your app on the Windows Phone emulator. If you want to test your app on a phone, you have to take some additional steps. For more info, see Register your Windows Phone device for development.
  • This post assumes you’re using Microsoft Visual Studio Express 2013 for Windows.

Description:

Please see this to the understand the sample:

https://camo.githubusercontent.com/e460895fcdfd6856f12fc23bc034ce7433060d49/687474703a2f2f616d61726d657369632e6e65742f696d672f6e61766472617765722e676966

Now i hope you understanding the sample 'what i am going to explain in this post'.Ok lets start to development

Step 1:

  • Open Visual Studio 2013
  • Create new project name is "DrawerLayout8.1"

To install DrawerLayout for Windows Phone 8.1, run the following command in the Package Manager Console

PM> Install-Package DrawerLayout

After that you will be found 'DrawerLayout' dll in references like this

https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F4.bp.blogspot.com%2F-yrX7GeOpUvU%2FVGx1oivlmiI%2FAAAAAAAABSc%2FRoi0zdEc3Wg%2Fs1600%2FReference.png&container=blogger&gadget=a&rewriteMime=image%2F*

Step 2:

Open MainPage.xaml and add the namespace in xaml:

XAML

xmlns:drawerLayout="using:DrawerLayout"

Step 3:

Lets Write following xaml code to make DrawerLayout screen

https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F4.bp.blogspot.com%2F-i7xang5w7b0%2FVGx9XtIwd6I%2FAAAAAAAABSs%2FmbvpabGLS5k%2Fs1600%2FStructure.png&container=blogger&gadget=a&rewriteMime=image%2F*

 <Grid x:Name="RootLayout">           <Grid.RowDefinitions>               <RowDefinition Height="Auto" />               <RowDefinition Height="*" />           </Grid.RowDefinitions>           <!--Title bar -->           <Grid x:Name="TitleBar" Background="#373A36"  Grid.Row ="0" Height="60">               <Grid.ColumnDefinitions>                   <ColumnDefinition Width="Auto" />                   <ColumnDefinition Width="*" />               </Grid.ColumnDefinitions>               <Image Margin="5"  x:Name="DrawerIcon"  Grid.Column="0" Source="/Assets/ic_drawer.png" HorizontalAlignment="Left" Tapped="DrawerIcon_Tapped" />               <TextBlock Grid.Column="1" Text="DRAWER LAYOUT DEMO" Foreground="White" VerticalAlignment="Center" FontSize="18"/>           </Grid>           <!--DrawerLayout bar -->           <drawerLayout:DrawerLayout Grid.Row="1"  x:Name="DrawerLayout">               <!--MainPage -->               <Grid x:Name="MainFragment" Background="White">                   <TextBlock Name="DetailsTxtBlck" Text="No Item Selected..." Margin="10" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="25" Foreground="Black" />               </Grid>               <!--Favorites List Section -->               <Grid x:Name="ListFragment">                   <Grid.RowDefinitions>                       <RowDefinition Height="Auto" />                       <RowDefinition Height="Auto" />                   </Grid.RowDefinitions>                   <Border Grid.Row="0" Background="#5490CC">                       <TextBlock HorizontalAlignment="Center" Margin="0,5,0,5" Text="MyFavorites" FontSize="25"/>                   </Border>                   <ListView Grid.Row="1" VerticalAlignment="Center" x:Name="ListMenuItems" SelectionChanged="ListMenuItems_SelectionChanged">                       <ListView.ItemTemplate>                           <DataTemplate>                               <Grid Background="White" Margin="0,0,0,1">                                   <Grid.RowDefinitions>                                       <RowDefinition Height="Auto" />                                       <RowDefinition Height="Auto" />                                   </Grid.RowDefinitions>                                   <TextBlock Grid.Row="0"   Text="{Binding}" Margin="10"  VerticalAlignment="Center" FontSize="18" Foreground="Black" />                                   <Rectangle Grid.Row="1" HorizontalAlignment="Left" Fill="Gray" Width="500" Height="0.5"/>                               </Grid>                           </DataTemplate>                       </ListView.ItemTemplate>                   </ListView>                  </Grid>           </drawerLayout:DrawerLayout>       </Grid>  

Step 4:

    Initialize the Drawer Layout then add some items to our list.     

  1. public MainPage()   
  2.         {   
  3.             this.InitializeComponent();   
  4.             DrawerLayout.InitializeDrawerLayout(); //Intialize drawer   
  5.             string[] menuItems = new string[5] { "Favorite 1", "Faverote 2", "Favorite 3", 
  6. "Favorite 4", "Favorite 5" };   
  7.             ListMenuItems.ItemsSource = menuItems.ToList();  //Set Menu list   
  8.             this.NavigationCacheMode = NavigationCacheMode.Required;   
  9.         }  

Step 5:

   Open/Close the drawer when the user taps on the Menu icon.   

  1. private void DrawerIcon_Tapped(object sender, TappedRoutedEventArgs e)     
  2.         {     
  3.             if (DrawerLayout.IsDrawerOpen)     
  4.                 DrawerLayout.CloseDrawer();//Close drawer     
  5.             else     
  6.                 DrawerLayout.OpenDrawer();//Open drawer     
  7.         } 

Step 6:

  Get selected list item value and showing it on main page section.
private void ListMenuItems_SelectionChanged(object sender, SelectionChangedEventArgs e)     

  1.         {     
  2.             if (ListMenuItems.SelectedItem != null)     
  3.             {     
  4.                 //Get selected favorites item value     
  5.                 var selecteditem = ListMenuItems.SelectedValue as string;     
  6.                 DetailsTxtBlck.Text = "SelectedItem is: "+selecteditem;     
  7.                 DrawerLayout.CloseDrawer();     
  8.                 ListMenuItems.SelectedItem = null;     
  9.             }     
  10.         }   

Step 7:

   Close the drawer when the user taps on back key press  

  1. protected override void OnNavigatedTo(NavigationEventArgs e)     
  2.  {     
  3.      Windows.Phone.UI.Input.HardwareButtons.BackPressed += HardwareButtons_BackPressed;     
  4.  }     
  5.     
  6.  void HardwareButtons_BackPressed(object sender, Windows.Phone.UI.Input.BackPressedEventArgs e)     
  7.  {     
  8.      if (DrawerLayout.IsDrawerOpen)     
  9.      {     
  10.          DrawerLayout.CloseDrawer();//Close drawer on back press     
  11.          e.Handled = true;     
  12.      }     
  13.      else     
  14.      {     
  15.          Application.Current.Exit();//exist app when drawer close on back press     
  16.      }     
  17.  }    

Outputs:

https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F2.bp.blogspot.com%2F-eYrNrjDne54%2FVGyDaKGEw4I%2FAAAAAAAABTU%2FVa_ToqX2PQ0%2Fs1600%2FIntial.PNG&container=blogger&gadget=a&rewriteMime=image%2F* 

https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F1.bp.blogspot.com%2F-CK7UktWWJWA%2FVGyEhcFch_I%2FAAAAAAAABTg%2F234K70FrSSc%2Fs1600%2Fsecond.PNG&container=blogger&gadget=a&rewriteMime=image%2F*

https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F3.bp.blogspot.com%2F-k6cPp6xH-VE%2FVGyN1IkzRoI%2FAAAAAAAABTw%2FRf4iLRnreLw%2Fs1600%2FAfter.PNG&container=blogger&gadget=a&rewriteMime=image%2F*
This article  source code is available at my original blog.

  •  public MainPage()   
  •         {   
  •             this.InitializeComponent();   
  •             DrawerLayout.InitializeDrawerLayout(); //Intialize drawer   
  •             string[] menuItems = new string[5] { "Favorite 1", "Faverote 2", "Favorite 3", "Favorite 4", "Favorite 5" };   
  •             ListMenuItems.ItemsSource = menuItems.ToList();  //Set Menu list   
  •             this.NavigationCacheMode = NavigationCacheMode.Required;   
  •         }