WindowsPhone 8.1: Wow! now its very simple to make Navigation Drawer in Phone(C#-XAML)

Introduction:

Yes i am really happy now.Because now very nice built-in 'DrawerLayout' library is available from 'Nuget'.And i am really says very thanks to 'amarmesic' for providing this layout.Before in 8.0, we need to write lot of code to make 'Navigation Drawer'.But now we can make it with very few steps.Any way for my kudos visitors, i will be discuss it in this post.

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.

Descritpion:

Please see this to the understand sample

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

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

XAML

<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.

C#

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; 
        }

Step 5:

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

C#

private void DrawerIcon_Tapped(object sender, TappedRoutedEventArgs e) 
        { 
            if (DrawerLayout.IsDrawerOpen) 
                DrawerLayout.CloseDrawer();//Close drawer 
            else 
                DrawerLayout.OpenDrawer();//Open drawer 
        }

Step 6:

Get selected list item value and showing it on main page section

C#

private void ListMenuItems_SelectionChanged(object sender, SelectionChangedEventArgs e) 
        { 
            if (ListMenuItems.SelectedItem != null) 
            { 
                //Get selected favorites item value 
                var selecteditem = ListMenuItems.SelectedValue as string; 
                DetailsTxtBlck.Text = "SelectedItem is: "+selecteditem; 
                DrawerLayout.CloseDrawer(); 
                ListMenuItems.SelectedItem = null; 
            } 
        }

Step 7:

Close the drawer when the user taps on back key press.

C#

protected override void OnNavigatedTo(NavigationEventArgs e) 
        { 
            Windows.Phone.UI.Input.HardwareButtons.BackPressed += HardwareButtons_BackPressed; 
        } 
        void HardwareButtons_BackPressed(object sender, Windows.Phone.UI.Input.BackPressedEventArgs e) 
        { 
            if (DrawerLayout.IsDrawerOpen) 
            { 
                DrawerLayout.CloseDrawer();//Close drawer on back press 
                e.Handled = true; 
            } 
            else 
            { 
                Application.Current.Exit();//exist app when drawer close on back press 
            } 
        }

Outputs:

 

FeedBack Note:

Please share your thoughts,what you think about this post,Is this post really helpful for you?I always welcome if you drop comments on this post and it would be impressive.

Follow me always at  @Subramanyam_B 

Have a nice day by Subramanyam Raju :)