Windows phone create side menu bar like Facebook

Question

I am new to Windows Phone 7 development and I'm trying to create side menu bar like the one used on Facebook.

I have created usercontrol and added buttons for different screens, I have also created PhoneApplicationPage and added a button.

When I click on that button, it will try to slide from top to right like menu bar.

If I click it again, at the top right button it will hide it.

If anyone can help, please share your code or examples.

Thanks.

Answer 1

I've just blogged a complete solution for this... and indeed you need Visual States! http://depblog.weblogs.us/2013/07/22/facebook-like-settings-pane-windows-phone/

Answer 2

Check out SlideView, described as "... navigation drawer inspired by the official Facebook app on Windows Phone." https://slideview.codeplex.com/

Edit Once you have installed SlideView through nuget's install-package SlideView

Create a UserControl that will represent the SlideView you want, say LeftView.xaml. You can create another user control for the other side, say RightView.xaml

Then in your App.xaml file, define the SlideView as a resource,

xmlns:slideView="using:SlideView.Library"
xmlns:views="using:SideNav.Views"
xmlns:local="using:SideNav">

<Application.Resources>
    <slideView:SlideApplicationFrame Header="SlideView" Background="White" x:Key="RootFrame" >
        <slideView:SlideApplicationFrame.LeftContent>
            <views:LeftView/>
        </slideView:SlideApplicationFrame.LeftContent>
        <slideView:SlideApplicationFrame.RightContent>
            <views:RightView/>
        </slideView:SlideApplicationFrame.RightContent>
    </slideView:SlideApplicationFrame>
</Application.Resources>

Once done Edit your App.xaml.cs to change the default RootFrame and th OnLaunchedMethod

public sealed partial class App : Application
{
    private TransitionCollection transitions;

    public static SlideApplicationFrame RootFrame { get; private set; }

    protected override void OnLaunched(LaunchActivatedEventArgs e)
    {

        RootFrame = Window.Current.Content as SlideApplicationFrame;

        // Do not repeat app initialization when the Window already has content,
        // just ensure that the window is active
        if (RootFrame == null)
        {
            // Create a Frame to act as the navigation context and navigate to the first page
            RootFrame = this.Resources["RootFrame"] as SlideApplicationFrame;

            // TODO: change this value to a cache size that is appropriate for your application
            RootFrame.CacheSize = 1;

            // Set the default language
            RootFrame.Language = Windows.Globalization.ApplicationLanguages.Languages[0];

            if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
            {
                // TODO: Load state from previously suspended application
            }

            // Place the frame in the current Window
            Window.Current.Content = RootFrame;
        }

        if (RootFrame.Content == null)
        {
            // Removes the turnstile navigation for startup.
            if (RootFrame.ContentTransitions != null)
            {
                this.transitions = new TransitionCollection();
                foreach (var c in RootFrame.ContentTransitions)
                {
                    this.transitions.Add(c);
                }
            }

            RootFrame.ContentTransitions = null;
            RootFrame.Navigated += this.RootFrame_FirstNavigated;

            // When the navigation stack isn't restored navigate to the first page,
            // configuring the new page by passing required information as a navigation
            // parameter
            if (!RootFrame.Navigate(typeof(MainPage), e.Arguments))
            {
                throw new Exception("Failed to create initial page");
            }
        }

        // Ensure the current window is active
        Window.Current.Activate();
    }
}

This should work.. Just add content to the Rightview.xaml and LeftView.xaml. For some Reason my WindowsPhone 8.1 xaml crashed when I launched it. But everything worked when I used the Zumicts Fork of SlideView which is available as a nuget package here

Install-Package SlideView.Library.WP81.Zumicts

Has anyone experienced the same issue?

Answer 3

Well there is not an easy way to do that like iOS. But you can use Visual State Manager.

Basically, Shape a bigger screen than your stage. Then, you need to create a state which will shift your screen a little bit left in the stage and you can use a button. You need to call the state on button's on click method.

PS: Do not use storyboard. Use the States it is easiest way to do that.

Answer 4

try side menu bar like facebook also with gesture support. try the link below.

http://developer.nokia.com/community/wiki/Control_animation_while_navigating_between_panes_inside_a_Windows_Phone_page