Post
Ask Question

Implementing Navigation Drawer For Windows Phone 8.1

You've all seen the new One Drive Windows Phone app with the so-called "hamburger" menu. Users were not happy with Microsoft trying to copy the Android design, they even opened up a feature suggestion in the WP uservoice forum calling Microsoft to "stick to the modern UI". Still, maybe you want to build an app to provide a unified experience on all platforms.
 
Android has a built-in DrawerLayout that allows an interactive drawer to be pulled out from the edge of the windows. Here is how to add a Drawer Layout to your Windows Phone 8.1 app:
 
1. Open Visual Studio 2013.
2. Create a new Windows Phone 8.1 Universal App Project.
 
 
3. Go to the Project – Manage NuGet Packages, type "DrawerLayout" and add to your project.
 
 
4. Open MainPage.xaml and add the namespace:
  1. xmlns:drawerLayout="using:DrawerLayout"  
5. Now, let's add some XAML code to our page. Create a Grid with two rows, the first one for the title bar (with drawer icon) and the second for the Drawer Layout.
  1. <Grid x:Name="RootLayout">  
  2.     <Grid.RowDefinitions>  
  3.         <RowDefinition Height="Auto" />  
  4.         <RowDefinition Height="*" />  
  5.     </Grid.RowDefinitions>  
  6.     <!-- Title Bar -->  
  7.     <Grid x:Name="TitleBar" Grid.Row ="0" Height="60">  
  8.         <!-- —Title Bar Code Goes Here -->  
  9.     </Grid>  
  10.     <!-- Drawer Layout -->  
  11.     <drawerLayout:DrawerLayout Grid.Row="1"  x:Name="DrawerLayout">  
  12.         <!-- DrawerLayout code goes here -->  
  13.     </drawerLayout:DrawerLayout>  
  14. </Grid>  
6. We'll add a drawer icon and a title for our app in the title bar grid. Title bar XAML:
  1. <Grid x:Name="TitleBar" Background="#00ADEF" Grid.Row ="0" Height="60">  
  2.     <Grid.ColumnDefinitions>  
  3.         <ColumnDefinition Width="Auto" />  
  4.         <ColumnDefinition Width="*" />  
  5.     </Grid.ColumnDefinitions>  
  6.   
  7.     <Image Margin="5"  x:Name="DrawerIcon"  Grid.Column="0" Source="/Assets/drawer_icon.png" HorizontalAlignment="Left" Tapped="DrawerIcon_Tapped" />  
  8.     <TextBlock Grid.Column="1" Text="DRAWER LAYOUT DEMO" Foreground="White" VerticalAlignment="Center" FontSize="18"/>  
  9. </Grid>  
Note: The image has a Tapped event that will be used to open/close the drawer. You can download the drawer icon here.
 
7. Inside DrawerLayout, create two child controls, one for the main content and one for the ListView:
  1. <drawerLayout:DrawerLayout Grid.Row="1"  x:Name="DrawerLayout">  
  2.    <Grid x:Name="MainFragment" Background="White">  
  3.      <!-- Main Content goes here -->  
  4.    </Grid>  
  5.   
  6.    <Grid x:Name="ListFragment" Background="#F4F4F4">  
  7.        <ListView x:Name="ListMenuItems">  
  8.            <ListView.ItemTemplate>  
  9.                <DataTemplate>  
  10.                     <TextBlock Text="{Binding}" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="18" Foreground="Black" />  
  11.                </DataTemplate>  
  12.            </ListView.ItemTemplate>  
  13.        </ListView>  
  14.   
  15.    </Grid>  
  16. </drawerLayout:DrawerLayout>  
Now let's do some coding. First we need to initialize the Drawer Layout then add some items to our list. Add the following code to the MainPage constructor:
  1. DrawerLayout.InitializeDrawerLayout();  
  2.       
  3. string[] menuItems = new string[5] { "Item1", "Item2", "Item3", "Item4", "Item5" };  
  4. ListMenuItems.ItemsSource = menuItems.ToList();  
Next, we want to open/close the drawer when the user taps on the drawer icon. To to this, DrawerLayout uses OpenDrawer() and CloseDrawer() and the IsDrawerOpen property:
  1. private void DrawerIcon_Tapped(object sender, TappedRoutedEventArgs e)  
  2.     {  
  3.         if (DrawerLayout.IsDrawerOpen)  
  4.             DrawerLayout.CloseDrawer();  
  5.         else  
  6.             DrawerLayout.OpenDrawer();  
  7.     }   
You can also override the default HardwareButton Back Key Event so that the drawer closes 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();  
  11.                 e.Handled = true;  
  12.             }  
  13.             else  
  14.             {  
  15.                 Application.Current.Exit();  
  16.             }  
  17.         }  
There you go. Run the app, try swiping the drawer from the left. You can close the drawer in one the following of 3 ways:
  • Tap and hold on the right edge of the list view and then drag the list to the left.

  • Tap on the shaded background.

  • Tap on the drawer icon in the title bar.
 
For more information, check out the DrawerLayout project on GitHub.


Similar Articles