Description

This library contains many controls inspired by the official Facebook app on Windows Phone.
This design concept is similar to the Navigation Drawer in Android, also known as "Hamburger menu".

You will find several controls :
  • The SlideView, a control allowing to slide between panels (2 or many more)
  • The SlideApplicationFrame, a control to use at top app level and packaged to display 3 panels with navigation occuring in the middle panel
  • The AutoHideBar, a control which is displayed when scrolling up in a list, and hidden when scrolling down

slideview.png

NuGet

Package available on NuGet : https://www.nuget.org/packages/SlideView

What's in the library ?

The project includes a sample with 3 panels, similar to the Facebook app. The navigation occurs only in the central panel, thanks to a custom PhoneApplicationFrame.
  • SlideView : slide through many panels with fixed or auto width (which will match with the control size)
  • SlideApplicationFrame : for custom navigation only occurring on the central panel

Other controls inspired by the Facebook app or just here to help out :
  • AutoHideBar : scroll up in a list and the bar will show, scroll down and it'll hide
  • NavigationHelper : navigation helper class to navigate easily from code behind or viewmodels
  • Sharing Pivot & LongListSelector between WP7 and WP8 : an example to show how to share the same views containing Pivot and LongListSelector (different namespaces between WP7 and WP8)

Check out the sample to run it and clearly understand how it works !

SlideView

The SlideView is pretty simple, just put your panels within, and they will be stacked in this order.
Each panel can have a fixed width (don't make it too small, 400 is great) or auto width which is automatically scaled to fit the screen.

<controls:SlideView>
    
    <Grid Background="Teal"
            Width="400" />

    <Grid Background="Tomato" />

    <Grid Background="LightYellow" />
            
    <Grid Background="YellowGreen"
            Width="400"/>
                
</controls:SlideView>

SlideApplicationFrame

If you want a SlideView already packaged with a main panel + 2 side panels, you can use the SlideApplicationFrame. The other benefit from it is the navigation occuring only on the main panel.

To use it, you need to remove your current RootVisual and set it to the SlideApplicationFrame.
One easy way is to delete all references to the RootFrame / RootVisual in your App.xaml.cs and set it directly in the App.xaml :

<Application.RootVisual>
   <library:SlideApplicationFrame Title="Slide View">
        <library:SlideApplicationFrame.LeftContent>
               <pages:LeftView />
        </library:SlideApplicationFrame.LeftContent>
        <library:SlideApplicationFrame.RightContent>
               <pages:RightView />
        </library:SlideApplicationFrame.RightContent>
    </library:SlideApplicationFrame>
</Application.RootVisual>

If you want to customize the control (like changing the header and icons), you need to edit its style while respecting the names (LeftPanelButton, MainPanel, etc.).

For more details, please see the sample available in the source code.

AutoHideBar

This bar interacts with a list : it hides when you scroll down, it shows when you scroll up.

To make it work, you need to bind the ScrollControl property to the list control you want to interact with :

<LongListSelector x:Name="LongList">
   ...
</LongListSelector>

<library:AutoHideBar ScrollControl="{Binding ElementName=LongList}"
                                VerticalAlignment="Top">
   <Grid>
      ...
   </Grid>
</library:AutoHideBar>

Please note it will run through the visual tree to find a compatible listing control within the given ScrollControl. It works with LongListSelector, ListBox, ScrollViewer, and anything containing a ScrollBar or ViewportControl.

Please see the sample in source code to get some more tips.

NavigationHelper

Helper class that registers for a PhoneApplicationFrame to access it wherever you want. Really useful when using MVVM pattern, but not only !

Pivot & LongListSelector tip

Just a quick tip : if you inherit from those classes, you abstract the namespace difference between WP7 and WP8. This way, you can share those controls easily in your XAML views :)


I hope you'll enjoy, do not hesitate to contribute or suggest optimizations :)

Last edited Aug 11, 2014 at 4:15 PM by CyrilCathala, version 24