So, we all took a good look at the ‘new design’ we got with the new Facebook app for Windows Phone and what is one of the most remarkable changes? That the settingspane now slides in/out from the left… Take a look at it here:
So not a different page like we are used too in Windows Phone. So let’s get started at creating our own version!
Just fire up your Visual Studio and create a new Databound Windows Phone app, it will already contain a MainPage with some data on it.
Open up this MainPage.xaml and we are going to add a second Grid that is placed outside the viewingfield on the left side. So we will set it’s margin to –480. The complete xaml looks like this:
1 |
<span id="lnum1" style="color: #606060"> 1:</span> <Grid x:Name=<span style="color: #006080">"Container"</span> Background=<span style="color: #006080">"Transparent"</span>> |
1 |
<span id="lnum2" style="color: #606060"> 2:</span> <Grid x:Name=<span style="color: #006080">"SettingsPane"</span> |
1 |
<span id="lnum3" style="color: #606060"> 3:</span> Margin=<span style="color: #006080">"-480,0,0,0"</span> |
1 |
<span id="lnum4" style="color: #606060"> 4:</span> Grid.Row=<span style="color: #006080">"0"</span>> |
1 |
<span id="lnum5" style="color: #606060"> 5:</span> <Grid.RowDefinitions> |
1 |
<span id="lnum6" style="color: #606060"> 6:</span> <RowDefinition Height=<span style="color: #006080">"Auto"</span>/> |
1 |
<span id="lnum7" style="color: #606060"> 7:</span> <RowDefinition Height=<span style="color: #006080">"*"</span>/> |
1 |
<span id="lnum8" style="color: #606060"> 8:</span> </Grid.RowDefinitions> |
1 |
<span id="lnum9" style="color: #606060"> 9:</span>  |
1 |
<span id="lnum10" style="color: #606060"> 10:</span> <StackPanel Grid.Row=<span style="color: #006080">"0"</span> Margin=<span style="color: #006080">"12,17,0,28"</span>> |
1 |
<span id="lnum11" style="color: #606060"> 11:</span> <TextBlock Text=<span style="color: #006080">"MY APPLICATION"</span> Style=<span style="color: #006080">"{StaticResource PhoneTextNormalStyle}"</span>/> |
1 |
<span id="lnum12" style="color: #606060"> 12:</span> <TextBlock Text=<span style="color: #006080">"settings"</span> Margin=<span style="color: #006080">"9,-7,0,0"</span> Style=<span style="color: #006080">"{StaticResource PhoneTextTitle1Style}"</span>/> |
1 |
<span id="lnum13" style="color: #606060"> 13:</span> </StackPanel> |
1 |
<span id="lnum14" style="color: #606060"> 14:</span> </Grid> |
1 |
<span id="lnum15" style="color: #606060"> 15:</span> |
1 |
<span id="lnum16" style="color: #606060"> 16:</span> <Grid x:Name=<span style="color: #006080">"LayoutRoot"</span> Grid.Row=<span style="color: #006080">"0"</span>> |
1 |
<span id="lnum17" style="color: #606060"> 17:</span> <Grid.RowDefinitions> |
1 |
<span id="lnum18" style="color: #606060"> 18:</span> <RowDefinition Height=<span style="color: #006080">"Auto"</span>/> |
1 |
<span id="lnum19" style="color: #606060"> 19:</span> <RowDefinition Height=<span style="color: #006080">"*"</span>/> |
1 |
<span id="lnum20" style="color: #606060"> 20:</span> </Grid.RowDefinitions> |
1 |
<span id="lnum21" style="color: #606060"> 21:</span>  |
1 |
<span id="lnum22" style="color: #606060"> 22:</span> <StackPanel Grid.Row=<span style="color: #006080">"0"</span> Margin=<span style="color: #006080">"12,17,0,28"</span>> |
1 |
<span id="lnum23" style="color: #606060"> 23:</span> <TextBlock Text=<span style="color: #006080">"MY APPLICATION"</span> Style=<span style="color: #006080">"{StaticResource PhoneTextNormalStyle}"</span>/> |
1 |
<span id="lnum24" style="color: #606060"> 24:</span> <TextBlock Text=<span style="color: #006080">"page name"</span> Margin=<span style="color: #006080">"9,-7,0,0"</span> Style=<span style="color: #006080">"{StaticResource PhoneTextTitle1Style}"</span>/> |
1 |
<span id="lnum25" style="color: #606060"> 25:</span> </StackPanel> |
1 |
<span id="lnum26" style="color: #606060"> 26:</span>  |
1 |
<span id="lnum27" style="color: #606060"> 27:</span> <Grid x:Name=<span style="color: #006080">"ContentPanel"</span> Grid.Row=<span style="color: #006080">"1"</span> Margin=<span style="color: #006080">"12,0,12,0"</span>> |
1 |
<span id="lnum28" style="color: #606060"> 28:</span> <phone:LongListSelector x:Name=<span style="color: #006080">"MainLongListSelector"</span> Margin=<span style="color: #006080">"0,0,-12,0"</span> ItemsSource=<span style="color: #006080">"{Binding Items}"</span> SelectionChanged=<span style="color: #006080">"MainLongListSelector_SelectionChanged"</span>> |
1 |
<span id="lnum29" style="color: #606060"> 29:</span> <phone:LongListSelector.ItemTemplate> |
1 |
<span id="lnum30" style="color: #606060"> 30:</span> <DataTemplate> |
1 |
<span id="lnum31" style="color: #606060"> 31:</span> <StackPanel Margin=<span style="color: #006080">"0,0,0,17"</span>> |
1 |
<span id="lnum32" style="color: #606060"> 32:</span> <TextBlock Text=<span style="color: #006080">"{Binding LineOne}"</span> TextWrapping=<span style="color: #006080">"Wrap"</span> Style=<span style="color: #006080">"{StaticResource PhoneTextExtraLargeStyle}"</span>/> |
1 |
<span id="lnum33" style="color: #606060"> 33:</span> <TextBlock Text=<span style="color: #006080">"{Binding LineTwo}"</span> TextWrapping=<span style="color: #006080">"Wrap"</span> Margin=<span style="color: #006080">"12,-6,12,0"</span> Style=<span style="color: #006080">"{StaticResource PhoneTextSubtleStyle}"</span>/> |
1 |
<span id="lnum34" style="color: #606060"> 34:</span> </StackPanel> |
1 |
<span id="lnum35" style="color: #606060"> 35:</span> </DataTemplate> |
1 |
<span id="lnum36" style="color: #606060"> 36:</span> </phone:LongListSelector.ItemTemplate> |
1 |
<span id="lnum37" style="color: #606060"> 37:</span> </phone:LongListSelector> |
1 |
<span id="lnum38" style="color: #606060"> 38:</span> </Grid> |
1 |
<span id="lnum39" style="color: #606060"> 39:</span> </Grid> |
1 |
<span id="lnum40" style="color: #606060"> 40:</span> </Grid> |
Next we just need to toggle between the 2 pages… to get this done, we’ll add an appbar with an appbar icon. Fastest way to do this is to open up the app in Blend! This can be don by right clicking the project and selecting Open in Blend…
In Blend be sure that the MainPage.xaml is open and on the Objects and Timeline pane, right click on PhoneApplicationPage and select Add ApplicationBar
After that, open the added ApplicationBar node, right click on [ApplicationBar] and select Add ApplicationBarIconButton
This will already add the icon, but to get it right select the correct Settings icon uri inside the Properties pane of the ApplicationBarIconButton
Now we need to add Visual Stats to get the facebook like behaviour! So click on the States tab on the top left side and press the Add state group button, this will add a VisualStateGroup with a Default transition inside it.
For good reference, rename the group to SettingsStateGroup ( by double clicking on the name ). Also press the Add State button twice and rename those states to SettingsOpenState and SettingsClosedState
Now select the SettingsOpenState as active item and when you do this, you will notice a ‘recording is on’ message inside the design pane! This is needed, because we are going to tweak the layout…
When the recording of SettingsOpenState is active, select the LayoutRoot grid and in the Properties tab, change the Projection – Global Offset – X value to 380
After that, select the SettingsPane grid and also change the Global Offset – X value but now to 480!
With that done there is still one thing to do in Blend and that is add an EasingFunction to the transition. This can be don by clicking the EasingFunction button of the Default Transition inside the SettingsStateGroup
In this example I select the Cubic in/out one, but you can select what you want as visual effect…
Also not forget the time frame, I’m going for 0.3sec, but also here, just toy with it…
Save the project and close Blend, now you should be back in Visual Studio, be sure to reload the project!
After this, add a Click event to the application bar icon and inside the event add following code.
1 |
<span id="lnum1" style="color: #606060"> 1:</span> <span style="color: #0000ff">private</span> <span style="color: #0000ff">bool</span> _isSettingsOpen = <span style="color: #0000ff">false</span>; |
1 |
<span id="lnum2" style="color: #606060"> 2:</span> <span style="color: #0000ff">private</span> <span style="color: #0000ff">void</span> ApplicationBarIconButton_OnClick(<span style="color: #0000ff">object</span> sender, EventArgs e) |
1 |
<span id="lnum3" style="color: #606060"> 3:</span> { |
1 |
<span id="lnum4" style="color: #606060"> 4:</span> <span style="color: #0000ff">if</span> (_isSettingsOpen) |
1 |
<span id="lnum5" style="color: #606060"> 5:</span> { |
1 |
<span id="lnum6" style="color: #606060"> 6:</span> VisualStateManager.GoToState(<span style="color: #0000ff">this</span>, <span style="color: #006080">"SettingsClosedState"</span>, <span style="color: #0000ff">true</span>); |
1 |
<span id="lnum7" style="color: #606060"> 7:</span> _isSettingsOpen = <span style="color: #0000ff">false</span>; |
1 |
<span id="lnum8" style="color: #606060"> 8:</span> } |
1 |
<span id="lnum9" style="color: #606060"> 9:</span> <span style="color: #0000ff">else</span> |
1 |
<span id="lnum10" style="color: #606060"> 10:</span> { |
1 |
<span id="lnum11" style="color: #606060"> 11:</span> VisualStateManager.GoToState(<span style="color: #0000ff">this</span>, <span style="color: #006080">"SettingsOpenState"</span>, <span style="color: #0000ff">true</span>); |
1 |
<span id="lnum12" style="color: #606060"> 12:</span> _isSettingsOpen = <span style="color: #0000ff">true</span>; |
1 |
<span id="lnum13" style="color: #606060"> 13:</span> } |
1 |
<span id="lnum14" style="color: #606060"> 14:</span> } |
That’s it!! When everything went to plan, you should now see a nice visual effect when pressing the appbar icon, opening and closing the settings pane!
Enjoy.
Link to project: SettingsPageAnimation project
This is great! Thanks!
awesome….. many thanks 🙂
you’ve just saved my life
I’ve been really wanting to know how to create this. Thank you for such a great write up!!
What will happen with phones using a different screen resolution?
Good question! For now I guess the default windows phone scaling of 800*480 would still hold. But could be the solution needs to change for the 1080p resolution…
It does not exactly work when I switch from “Portrait” to “PortraitOrLandscape”. How to fix this problem.
try the slideview.codeplex.com solution it is a full user control with more features
Hi, unfortunately SlideView can’t be installed in a wp8.1 project. Do you know how to trigger it with a touch swipe, instead of tapping a button?