It is been a while since my last post, but I have a good reason (on the 20th of July – so tired that the first time I’ve mistaken the date by one month – my son Mattia was born and between work and my duties and no sleep there is not much time left for writing on my blog even if I have a lot of posts that I want to do).
I will get right to the subject (the title is not one of the best chosen). A few days ago I was talking with my friend Alessandro Scardova
about the possibility of implementing side menus inside an Windows Phone application (similar to the ones in the Facebook application). Even if not 100%”Modern UI” design it is a good approach for applications that have multiple options that need to be accessed quickly (also the approach can be applied cross-platform). So I took it as a challange and tried to implement it.
My initial thought was that I might be able to implement it using an templated panorama or pivot, but after some tests I was not able to get the desired behaviour:
- when we start the application we will have the selected ViewPort selected
- swiping left or right we can open/close the side menus
- also using the buttons on the upper left and on the right corners we can also close and open the side menus
- the side menus have a width smaller than 480 this way, when opened, we can still see a part of main viewport (including the upper button)
- when opening the menus the ApplicationBar is not visible
The solution I have implemented (doesn’t use MVVM pattern) it is more a proof of concept on how to implement the functionality. The approach is pretty simple. We have the whole view that we move inside a canvas using manipulations and animations. Initially I thought that I can use only grid without the canvas and animate the margin of the grid but, as Windows Phone doesn’t have ThicknessAnimation, my animations for opening and closing the menus were not very smooth. Also I’ve tried implementing the swipe behaviour using the Touch.FrameReported event but the results I got were not very good.
So how does my implementation work:
- I have a canvas/grid that has a width of 1320 and the height stretches to the whole available height that contains my whole view
- The view is inserted in a canvas with initial Canvas.Left position set to -420 this way we see the main view port (component)
- The “stable” positions inside the canvas are: 0: left menu opened, -420: main view and -840:right menu opened
- When pressing the buttons we will use a resource Storyboard with a DoubleAnimation to set the the Canvas.Left position inside the canvas to 0,-420 or -840:
<DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True" />
Use the animation to open/close the menus:
void MoveViewWindow(double left)
_viewMoved = true;
ApplicationBar.IsVisible = true;
ApplicationBar.IsVisible = false;
((DoubleAnimation)((Storyboard)canvas.Resources["moveAnimation"]).Children).To = left;
- To implement the swipe I use the ManipulationStarted, ManipulationDelta and ManipulationEnded on the canvas container. On delta we set the Canvas.Left value directly (no need for animations) between a maximum of 0 and a minimum of -840.
private void canvas_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
if (e.DeltaManipulation.Translation.X != 0)
Canvas.SetLeft(LayoutRoot, Math.Min(Math.Max(-840, Canvas.GetLeft(LayoutRoot) + e.DeltaManipulation.Translation.X), 0));
- when swiping we also memorize the initial Canvas.Left position. If substracting the final Canvas.Left and the initial one the absolute value is lower then 100 (not a long swipe) we bounce back to the initial position. Otherwise we move to the next position.
private void canvas_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
var left = Canvas.GetLeft(LayoutRoot);
if (Math.Abs(initialPosition - left) < 100)
//change of state
if (initialPosition - left > 0)
//slide to the left
if (initialPosition > -420)
//slide to the right
if (initialPosition< -420)
- _viewMoved is used to see if the view was already moved by another event since our manipulation started (like a button was pressed)
Here are some screenshots from the sample that you can download and play with:
Hope you will find it useful.
Updated: October 7, 2013
Just as the title of this post says, this is a list of Windows Phone developers (#wpdev) on Twitter, who’ve volunteered to help other developers, who may have Windows Phone development related questions.
Please be respectful (not rude or demanding) when you tweet any of them with questions or issues. Understand that they have their priorities and if you don’t immediately hear back from them, just give them some time and be patient.
Also, don’t expect them to write code for you or give you all the answers you want (they may choose to do so in some cases).
They’re not getting paid to help you and are doing this out of their desire to help others.
Finally, don’t forget to show them your appreciation!
To those who’ve volunteered yourselves: I hope that you will do your best to help those who reach out to you and treat them with the same courtesy & respect that you would like from them.
Iris - @IrisClasson (Sweden)
The world’s happiest .NET developer & Microsoft C# MVP! More energy than a 5 year old, talks more than your grandmother, and does anything to make you smile!
Chris - @MagooChris (Australia)
Developer for Built To Roam, Working on Windows phone and Windows 8 apps, both in and out of work!
Konstantinos - @kgoutsos (Greece)
ECE Undergrad/Microsoft Student Partner, #wpdev and #win8dev, Loves Modern UI and XAML, Excited about #IoT and #wsn, Lives to code.
Pete - @peted70 (United Kingdom)
Microsoft tech evangelist
Manickam - @maxonweb (Australia)
Passionately curious .Net Developer, App Maker, husband, cricket lover
Simon - @SimonDarksideJ (United Kingdom)
Indie community developer for the new world order, Former Admin 4 the @XNAUK community RIP, Master Chief of @Zenith_Moon studios
George - @ldkge (Greece)
Tech Enthusiast, @_Brainstorm co-Founder, Microsoft Student Partner and Electrical & Computer Engineering Student at Univ. of Patras
Garry - @gh8421 (Australia)
Technology & gadget enthusiast. I develop Windows Phone & Windows 8 apps for Handiware.
Kris - @Shantek_Kris (Australia)
Managing Director at @ShantekStudios - All tweets, views and opinions on this twitter account are my own and do not reflect Shantek Studios.
Kyle – @WinPhanKyle (United States)
Future Microsoft Tech Evangelist. Windows Phone, Windows 8 and .NET Developer. Father to 3, Husband to 1. Email me kylereddoch(at)outlook(dot)com.
Nigel – @nigelsampson (New Zealand)
Windows 8, Windows Phone developer at Marker Metro
Kévin Gosse – @KooKiz (France)
Software developer passionate about .NET and Windows Phone | Nokia Developer Champion 2013
Ghosty - @CheekyGhostApps (Australia)
Suggestions/Feedback/Support surrounding my apps, even Windows Phone development questions all welcome around here! I love doing R&D things. Ghosty loves you!
Nico – @NicoVermeir (Belgium)
passionate .net developer, board member of Belgian Modern UI apps user group, MEET member, tech crazy and if time permits: a gamer Merchtem · spikie.be
András – @vbandi (Hungary)
Dad, Microsoft MVP (Kinect), software company CEO, idea man, Windows Phone, Kinect, Windows 8, user experience. SurfCube 3D Browser. Budapest, Hungary, Europe · vbandi.dotneteers.net
Wolfgang – @z1c0 (Austria)
software dev ::: .NET enthusiast ::: MS fanboy ::: geek dad ::: there IS a spoon … get over it people! wolfgang-ziegler.com
Marco – @msicc (Italy)
Microsoft-Fanboy, WinPhan, WinPhanDev, Xbox-Gamer, Father of 2 fantastic kids, husband of a even more fantastic wife. Working at Telefónica. Opinions are mine. vizify.com/msicc/twitter-…
Teemu – @TapanilaT (Finland)
Windows Azure Insider & Nokia Developer Champion. Passionate and always eager to try new stuff. Working at @AppCampus. tapanila.net
Toni – @to_pe (Croatia)
Microsoft Most Valuable Professional | Blogger | Speaker | Game developer wannabe. Loves C#, Windows Phone, OSS, UX, Nokia and Azure. tonicodes.net
Joost – @LocalJoost (Netherlands)
Santy – @saintwukong (Spain)
UX Developer. Nokia Developer Champion. Actualmente trabajando con Sharepoint 2010 y 2013, Windows Phone, Windows 8, Azure y MVC · geeks.ms/blogs/santypr
Deyan – @deyan_ginev (Bulgaria)
Working on Windows Phone related stuff @ Telerik. TWEETS are my own though
OSO Systems – @OSOSystems
.NET development for Windows, Windows Phone and the web; boardgamer
Patrick - @ZuneTracks (United States)
Husband of 1, Father of 3. Nokia Developer Champion. IT Professional. Founder of Subdude Records. n00b WP/Android dev. A twit long before Twitter.
David – @dgaust (Australia)
Part time developer for Windows Phone
Here’s the link to the list on Twitter if you’d like to subscribe to it. https://twitter.com/SrikanthNairPro/windows-phone-developers/members
If you’d like to be added to this list (or removed from it) or would like to get in touch with me, please tweet me @SrikanthNair or email me – sri at srikanthnair dot com.
Thanks for reading.