Twitterate your Windows Phone app

Thanks Scott for helping with the Path control!

Well, the people of twitter have streamlined the look and feel of their mobile apps, so that it almost looks the same on each platform.
Currently on Windows Phone this means it’s like this:


So you will see a set of icons on top with a content body below and by selecting one of the images you will switch the content body.

But the special thing about this, is that the body content will ‘slide’ from one to another, meaning in Windows Phone development terms this is most likely a Pivot control. Weird thing though, the icons are not inline with the standard Pivot control header. If so they would not be all on the same page. 
How can we mimic this ourselves?

I have no doubt there would be several different possibilities, but let me give you mine…

Create a new windows phone app and in the MainPage.xaml add a ListBox called ImageBar.
This imagebar will host our 4 icons!
Each icon is represented with a custom Path control that contains XAML data ( more on this below ). To get nice looking icons, just download Metro Studio from Syncfusion! Open the program, look up a nice icon and copy paste the generated XAML data. The listbox XAML will be:

After this, also add a Pivot to the page, but don’t add a HeaderTemplate ( we don’t need one ). The one in our solution looks like this:

Now there are several things going on in here! You will see that both the listbox has a SelectedIndex bound to that of the Pivot in two way mode, these are needed to keep the image listbox and the pivot in sync on what is selected.

Now when you would run this, nothing will happen with your headers, because we need to give the selected icon a colour when it’s selected. This is done by giving the listbox a custom ItemContainerStyle in there we are going to use the visual states of the listbox to set the colour when an item is selected! In our example we the PhoneAccentColor for the selected state and PhoneInactiveColor for the unselected state…

For this trick to work we needed to create our custom Path Control! Because using a Style Template will try to set/change the ForeGround of a ContentControl, but a default Path control only has a Fill property! The custom control will use template binding to take the ForeGround value and use this as the Fill value. We do the same for the Content itself, this is used for the Data property of the Path control.

Do note in this style, we also set the HorizontalContentAlignment to Center so each icon takes center place in the list item…

But still, when you would run this, each icon will stick to the next! So how do we divide them evenly. You could calculate this and add margins or change something else… But in our example we again use a special control derived from Panel, called SplitPanel and use this as ItemsPanelTemplate on the listbox.

This control will calculate the total amount of space available and evenly change the width of each item to match this.

So when all is done, you should get following result: ( source code is up on my GitHub here… )


Fixing header when scrolling content on windows phone page

Thanks to Kévin Gosse @KooKiz for tweaking a part of the code to get it right 🙂

So, sometimes you want to try something different on Windows Phone and this time I wanted to tweak the scroll animation of a page.

The setup I was looking for visually: You have a content page ( for example in a news app ) that shows a nice article with an image and a title caption on top. But as you can see the text of the article is too large, so when the user scrolls down to view the text, we want to keep the header title in view! ( or something else depending on your taste )

TextPage TextPage2 TextPage3

You would think this would be easy, but it alas! Again we are faced with a stripped down XAML version in Windows Phone, so we don’t have the same ‘control’ over these events as in WPF.
Now with some small tricks, it’s possible to get a decent working version, so let’s get to it!

Just create a new Windows Phone app in Visual Studio, when doing so you’ll get a MainPage.xaml right away.

We are going to change the page, so delete everything inside the LayoutRoot grid and replace it with following xaml

If you did this correctly ( also there should be a bear.jpg image inside the Assets/Images folder 😉 ) you’ll get a nice page representing the article!


You’ll notice the page has a scrollviewer that contains everything except the header title! The trick we are going to use, is manipulating the location of the header title ourselves.

Do note that we need to se the ManipulationMode of the ScrollViewer to Control to get a smooth UI effect! ( see xaml above ) Otherwise the UI won’t be notified enough with the scrollviewer scroll values – is a performance optimization that we now need to bypass.

To manipulate the location of the header title, we need to keep track of the scroll offset of our scrollbar. But the scrollviewer itself doesn’t give use enough info, the way to get this info is by hooking into the ValueChanged event of the VerticalScrollBar that is inside the ScrollViewer !

So first we need to get hold of this VerticalScrollBar, this is done by using the VisualTreeHelper on our ScrollViewer and hook onto the ValueChanged event.

Inside our ValueChangedHandler we will animate our header title to the corresponding vertical offset of our ScrollBar, but we will stop animating when the vertical offset is higher than the top position of our header title when the page was launched!! Because if our vertical offset has reached that value this means that the header title will be positioned at the top of our page!

The top value of the header title is called _borderTop and is calculated at page load.

With that in place all is looking great, except for one thing: what to do when the user compresses the ScrollViewer by dragging the content down when the page is at it’s initial position. This behaviour is sometimes used in listboxes to get that ‘pull to refresh effect’. When someone does this on our page, the header title will stay at it’s position while the rest is dragged down… not a nice effect indeed. Let’s fix this.

This can be solved by hooking into 2 other events of the ScrollViewer: MouseMove and MouseLeftButtonUp. MouseMove to detect the compression and MouseLeftButtonUp to know when the user stops the compression.

When the compression occurs, you’ll notice a positive TranslateY value on the CompositeTransform of the ScrollViewer content, we’ll use this to also animate our header title. When the compression is stopper, we check if we had a positive TranslateY value and if so, we reset the position of the header title.

If all goes well, the end result should look like this


To not mis anything, the demo project is up on my github here