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