Slide in menu control for Windows Phone

One of the most used menu navigational patterns right now is the hamburger icon / slide in menu.

The pattern is nothing something I'm particular fond of. Mainly because the icon doesn't look good, the icon takes up space and it's highly overused.
I've always felt the same way about the appbar. It doesn't look good but it's effective.

I've thought for some days how the concept two concepts could be merged together effectively and while having the full benefits of making it look good and maintaining the vertical scroll functionality. 

The solution is a two sided hidden menu wrapped in a easy to use control.
I present to you: 
SlideInMenuContentControl.
It contains one menu for navigation and one for context.

The control is free to use and available for download.

 

Download source and demo


 

 

Download source with buttons

UPDATE - SAMPLE WITH BUTTONS TO TRIGGER MENU
I've added a sample with buttons to slide out the menu's! Important: The trigger buttons need ManipulationMode="All" in order to keep the focus away from the flipvew. If the ManipulationMode isn't set the flipview keeps focus and the SelectedIndex will get reset.


Using the SlideInMenuContentControl

Using the control is simple. Simply replace the ". . ." with your xaml. 

  <local:SlideInMenuContentControl>
        <local:SlideInMenuContentControl.LeftMenuContent>
            <Grid>
                   ...
            </Grid>
        </local:SlideInMenuContentControl.LeftMenuContent>
        <local:SlideInMenuContentControl.RightMenuContent>
            <Grid>
                   ...
            </Grid>
        </local:SlideInMenuContentControl.RightMenuContent>
        <local:SlideInMenuContentControl.Content>
            <Grid>
                   ...
            </Grid>
        </local:SlideInMenuContentControl.Content>
    </local:SlideInMenuContentControl>


SlideInMenuContentControl configuration options:

Menu state (Both, Right, Left): Property to determine which sides of the menu should be visible in. Default is both.
RightSideMenuWidth: Property to determine the width of the slidein. Less than 200 is not recommended. Default is 250.0 px.
LeftSideMenuWidth: Property to determine the width of the slidein. Less than 200 is not recommended. Default is 250.0 px.
GoToMenuState(ActiveState state): Method for forcing the control to go to a specific menu.


A huge shout out to my friend Daniel Vistisen for helping and providing technical insights about building custom controls. He's one of those guys who can built anything in xaml and C#.
He's one to follow for sure! 

Feel free to tell me about your experience using the control and ask if you have any questions. 

P.S Make sure you follow me on twitter @deanihansen for more controls, design tips, articles and how-to's.