Creating Android Style Navigation Drawer for Windows Phone 8.1

Let's learn how to create Android Style navigation bar for windows; following is how it will look on both the platforms -

Screenshot from Android Phone

Screenshot from Windows Phone

Let's start creating it step by step -

Step 1 - Install DrawerLayout Package -

• Open Tools --> NuGet Package Manager --> Package Manger Console
• Run command - Install-Package DrawerLayout
• You will be able to see DrawerLayout in your project reference.

Step 2 - Open MainPage.xaml and add highlighted line in the code-

<Page
    x:Class="AptiApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AptiApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    xmlns:drawerLayout="using:DrawerLayout">

<Grid>
<!-- Will be filled Later -->
</Grid>

</Page>

Step 3 - Now let's create actual navigation drawer-

<Page
    x:Class="AptiApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AptiApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    xmlns:drawerLayout="using:DrawerLayout">
    <Grid x:Name="RootLayout">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <!--Title bar -->
        <Grid x:Name="TitleBar" Background="#DDDDDD"  Grid.Row ="0" Height="60">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="16" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Image  x:Name="DrawerIcon"  Grid.Column="0" Source="/Assets/ic_drawer.png" HorizontalAlignment="Left" Tapped="DrawerIcon_Tapped" />
            <TextBlock Grid.Column="1" Text="Aptitude and Logical Reasoning" Foreground="Black" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="22"/>
        </Grid>
        <!--DrawerLayout bar -->
        <drawerLayout:DrawerLayout Grid.Row="1"  x:Name="DrawerLayout">
           <!--MainPage --> 
            <Grid x:Name="MainFragment" Background="White"> 
                <TextBlock Name="DemoTxtBlock" Text="No Item Tapped." Margin="10" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="25" Foreground="Black" /> 
            </Grid> 
            
            <!--Navigation Drawer Items -->
            <Grid x:Name="ListFragment" Background="#252424">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <ListView Grid.Row="0" VerticalAlignment="Center" x:Name="ListMenuItemsDrawer" ItemsSource="{Binding}" 
                          HorizontalContentAlignment="Stretch" SelectionChanged="DrawerMenuItems_SelectionChanged"
                          ScrollViewer.VerticalScrollMode="Enabled" 
                         ScrollViewer.VerticalScrollBarVisibility="Visible">
                    <ListView.ItemContainerStyle>
                        <Style TargetType="ListViewItem">
                            <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                        </Style>
                    </ListView.ItemContainerStyle>
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Grid Background="#252424" Margin="0,0,0,1">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="50" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="75" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <Image Margin="5,5,5,5" Grid.Row="0"  Grid.Column="0" Source="{Binding Path=ListRowImg}" HorizontalAlignment="Left" />
                                <TextBlock  Grid.Row="0" Grid.Column="1" Text="{Binding Path=ListRowStr}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="18" Foreground="White" />
                                <Border Height="2" Grid.Row="1"   Grid.Column="0"
                                        BorderBrush="White" 
                                        BorderThickness="2" />
                                <Border Height="2" Grid.Row="1"   Grid.Column="1"
                                        BorderBrush="White" 
                                        BorderThickness="2" />
                            </Grid>
                            
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </Grid>
        </drawerLayout:DrawerLayout>
    </Grid>
</Page>

Step 4 - Now write C# code for filling ListView of Navigation Drawer - 

public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            List<MainPageListViewData> listViewSoure = listViewSoure = new List<MainPageListViewData>();
            listViewSoure.Add(new MainPageListViewData("/Assets/d_about_icon.png", "Aptitude"));
            listViewSoure.Add(new MainPageListViewData("/Assets/d_feedback_icon.png", "Logical Reasoning"));
            listViewSoure.Add(new MainPageListViewData("/Assets/d_verbal_ability_icon.png", "Verbal Ability"));
            listViewSoure.Add(new MainPageListViewData("/Assets/d_words_icon.png", "Top English Words"));
            listViewSoure.Add(new MainPageListViewData("/Assets/d_feedback_icon.png", "Other Topics"));
            listViewSoure.Add(new MainPageListViewData("/Assets/d_favourite_icon.png", "Favourite Questions"));
            listViewSoure.Add(new MainPageListViewData("/Assets/imp_website_icon.png", "Online Resources"));
            ListMenuItemsDrawer.ItemsSource = listViewSoure;           


            this.NavigationCacheMode = NavigationCacheMode.Required;  
        }

Step 5 - MainPageListViewData is a class to hold icon and text property of the Listview; its defined as -

namespace AptiApp.Data
{
    class MainPageListViewData
    {
        public MainPageListViewData(String listRowImg, String listRowStr)
        {
            this.listRowStr = listRowStr;
            this.listRowImg = listRowImg;
        }

        private String listRowImg = "";

        public String ListRowImg
        {
            get { return listRowImg; }
        }
        private String listRowStr = "";

        public String ListRowStr
        {
            get { return listRowStr; }
        }
    }
}

That's it; your Android Style Navigation Drawer is ready!!