Google WindowsPhone 8.1: Wow! now its very simple to make Navigation Drawer in Phone(C#-XAML) | SubramanyamRaju Xamarin & Windows App Dev Tutorials

Wednesday 19 November 2014

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
Navigation Drawer
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:

 


DrawerLayout in wp8.1

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  
Have a nice day by  :)

28 comments:

  1. Great!
    But is it corresponds to the WP guidelines? It looks like an android application.

    ReplyDelete
    Replies
    1. Yes , You are Correct .. WP design in Unique compare to iOS and Android

      Delete
  2. can anyone able to port this to windows phone 8?

    ReplyDelete
    Replies
    1. No,this drawer layout is targeted for 8.1

      Delete
    2. i ported this to wp8. it works like charm

      Delete
  3. Helpful Tutorial. I have a doubt, Why this drawerLayout not works in BlankPage(SilverLight) a.k.a basic page in windows phone 8.1 and this page doesn't accept Dispatcher.BeginInvoke method ?

    ReplyDelete
  4. is this code sample work on windows phone 8?

    ReplyDelete
    Replies
    1. No! This sample is not work with WP8.0.And if you looking for wp8.0,you may visit this link http://slideview.codeplex.com/

      Delete
  5. when i open the drawer in landscape mode and my application supports page orientation and i rotate the phone into portrait mode the menu's width become bigger than the page so it covers all the width available. is this a bug or i should call something in code behind so the drawer adapts its dimensions

    ReplyDelete
  6. Hi Its really helpful Thanks!. I need a solution that how can I raise the drawer item clicked event which should call My view-model method? For my cross platform project Im using MVVMCross pattern. Please help.

    ReplyDelete
  7. How can I highlight the selected item in drawer layout. Please suggest?

    ReplyDelete
  8. How can I highlight the selected item in drawer layout. Please suggest?

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Thank you for a wonderful example !
      But there is a problem .
      How to scroll down the menu to the left ?
      For example , we have a menu that does not fit entirely in control

      Delete
  11. I have a question and if I want go back instead of closing the App, what should I do? I tried this but it only goes back to the First Page and sometimes my previous one was other one. Thanks for your time. 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 { Frame frame = Window.Current.Content as Frame; if (frame == null) return; if (frame.CanGoBack) { frame.GoBack(); e.Handled = true; } } }

    I think my main problem is because I have already override that event in the App.xaml but it doesn't matter if I do it later in other form because of the change is everywhere. Would you be so kind and give me an idea how to fix it? Thanks.

    ReplyDelete
  12. Helpful Tutorial...!! But How to add images or icons in Menu Items..??

    ReplyDelete
  13. great control! but how can i change the width of the menu in Windows 8.1 app? when the drawer is opened, it occupied more than 2/3 of the screen in landscape mode.

    ReplyDelete
  14. Why when on a page with a listview can I not open the drawer is their a problem I saw a post about the drawer loosing gestures if their is a listview on page?.

    ReplyDelete
  15. Hi Raju, First a fall i would like to say thanks for sharing such a valuable support in Windows Phone 8/8.1.
    Well I have a question, I need to implement the same drawer layout through out the App. Meant i would like to add this drawer layout on the App root Frame so that it is available on each pages of App..Though for a time being i have implemented this drawer layout on each pages of the App...but i need some robust solution....@@@Please help me dear!!!!!!!!

    ReplyDelete
  16. Thanks,
    but if i want to add icon also along with the string like, ("icon.png","name") like Gmail android app.
    then what would be the process for that.
    your support value like anything on this subject matter.
    *** thanks alot ..plz reply as soon as possible. whatever possibilities...

    ReplyDelete
  17. thank you sir.... Sir can you help me to open sublist in drable after click one item from the main list. eg. their is category called sperts ,politics, music so if i click in sports so i need to open sublist just following sports item like cricket,football etc.

    ReplyDelete
  18. Hello,

    how can we open drawer from Right to Left ?

    ReplyDelete
  19. Its Not Working Sliver Light App..Please Help Me

    ReplyDelete
  20. Hello! How to use this control with mvvm (Prism)? Please help.

    ReplyDelete
  21. Thank you very Much, God give you more Knowledge...

    ReplyDelete
  22. Wonderful Application . Please I have a question? What if you want to attach different click events to the different text string in the listview, how can it be done,

    ReplyDelete

Search Engine Submission - AddMe