Tag Archives: xaml

Introducing the PivotIndicator control for Windows Phone

Metro, Silverlight, Windows Phone, , ,

Update: source code is now available on GitHub.

Today I would like to share a nice control which is part of my mysterious Windows Phone 7 app which will be released later this month. I call this control the PivotIndicator control. It can be used in order to show the user all the items in a PivotControl on a single screen, as shortcuts. A small rectangle (which use the phone’s accent color as background) is animated when the current pivot item changes. The user can press any item to immediately go to the associated pivot item.

You can grab the source code here.

Here is a short video showing the control in action:

[mediaplayer src=’/wp-content/uploads/PivotIndicator.wmv’ width=432 height=808 ]

Now let’s see the details…

  • How to use it?
  1. Adjust the layout of your page to be able to display the PivotIndicator. Typically this involves adding a row with a ‘*’ height.
  2. Use a binding with an ElementName in order to set the Pivot property of the PivotIndicator control
  3. Define the HeaderTemplate property of the PivotIndicator with a DataTemplate which will be used to render each item in the PivotIndicator
  4. You’re done 🙂
Here is what is looks like in the demo:
  • How it works?
Behind the scene, the PivotIndicator control is actually made of 3 parts:
  • SplitPanel: this is a panel (it derives from Panel) which arrange its children on a single line, and where each item has the same width. The width is computed as the total available width divided by the number of items
  • PivotRectange: this is a small control which contains a rectangle. The rectangle uses the phone’s accent color. Its position is animated based on the currently selected index.
  • PivotIndicator: is the control you will use. It is made of an ItemsControl with a SplitPanel as ItemsPanelTemplate and the PivotRectangle
Source code is documented so you might want to dig in it for more details 🙂
Note that I didn’t try but I think the PivotIndicator control should works just fine with a Panorama (and few code adjustments…)

If you like typing XAML you will love ReSharper 6.1 !

Silverlight, Tools, Windows 8, Windows Phone, WPF, ,

Resharper is an amazing tool for any .Net developers. The latest version 6.1 has been released just a couple of weeks ago and I wanted to share with you a brief overview of the new workflow available in the XAML world !

Visual Studio 2010 introduced 2 new design time properties: d:DesignInstance and d:DesignData. Those properties can be used in order to specify a design time DataContext in order to have more help during the creation of a binding.

For example, when you create a binding using the Property dialog of VS2010 you can browse your DataContext to select the right property (image from this blog post from Karl Shifflet):

Resharper 6.1 is now able to use those metadata in order to improve the experience you have while typing XAML (which I personally do a LOT!). Here is how it works:

  • you create a new ViewModel with a simple property (this property has just get/set because we don’t need much more in the context of this post…)

  • you setup a binding in your view

At this point the ReSharper magic comes into play…

  • ReSharper warns you the DataContext is unknown

  • Offer the ability to fix this

  • Note that like in C#, you can very easily resolve namespace issues

  • Then notice that the warning is gone (the Title property is no longer underlined)

  • You can now add a new binding

  • You can then ask ReSharper to create the property in your ViewModel

  • Choosing the first option will get you to the ViewModel definition

Now that I’ve upgraded my installation to version 6.1, I think this is a must have !

That’s all for today ! Hope it helps 🙂

 

 

BUILD: Starting the BUILD series !

Build, Windows 8, , ,

In two weeks, I’ll have the chance to be part of the BUILD conference in Los Angeles. It will be my second trip to the US (my first one was in Seattle in February for the MVP summit) and I’m really looking forward. During the conference I’ll be blogging extensively to share with you the new information.

BUILD is the new conference about the future of Windows. We can expect many information about Windows 8 and its new development platform. At this point we know that HTML5 will be an important aspect of this new platform, but without any doubt XAML will also be part of the game. Note that I’m not saying neither “WPF” or “Silverlight” because what is coming with Windows 8 is still unknown. It looks like XAML will be accessible from both the native  (C++) and managed (.Net) world.

In order to follow the event:

Make sure to check my blog in order to have the latest information about the future of WPF, Silverlight and Windows from a .Net guy perspective !