Visually Located

I have mentioned before that the tilt animation is enabled by default in Windows Phone 8.1 Runtime apps, but what happens when you want to display a collection of items but do not want to enable tilt? You may not want to enable tilt because there is no extra action that happens when you tap an item. As with most things, there are a few options here.

The first is to not use a ListView/GridView at all. Instead just use an ItemsControl to display your items. This is great provided you do not have a lot of items you need to show. ItemsControl is not virtualized like the ListView/GridView so it uses a lot of memory when displaying a lot of items. This is my go to control for displaying a small collection of items that have no action associated with them.

If you still want to use the ListView or GridView control then there is a simple way to disable the animation. You will need to modify the style of the ListViewItem or GridViewItem. For this post I will demonstrate using the ListViewItem, but everything applies to the GridView as well.

First create a copy of the default style of the ListViewItem, you can accomplish this by right clicking on the ListView within the Visual Studio (or Blend) designer or in the document view.

Select: Edit Additional Templates –> Edit Generated Item Container (ItemContainerStyle) –> Edit a Copy…

Name the new style “NonTiltListViewItemStyle”

This will add the style for the ListViewItem as well as a bunch of color and size resources. The key now is to find the use of the PointerUpThemeAnimation and PointerDownThemeAnimation.and remove them. You’ll remove the VisualStateGroup.Transitions from the CommonStates group, remove the Storyboard from the Pressed state. If you have enabled multi select, remove PointerDownThemeAnimation from the CheckboxPressed state.

You now have a style that will not have the tilt animation when tapped!

In a previous post I talked about some of the awesome animations and transitions available in Window Phone 8.1 Runtime apps. These animations and transitions were previously only available with a second SDK like the Windows Phone Toolkit or Telerik’s phone controls. One of the most used animations from both toolkit was the tilt animation. This animation shows a user that what they are touching can be tapped and will probably do something when they do tap. I also previously blogged about how you can enable the tilt animation for “unselectable” items. I am happy to say that the tilt animation is now built into all “tappable” controls without having to do anything!

So you would think that would be the end of the post right? I just said “it just works”. This is true for things like ListView/GridView/Buton, but what about when you want to display a StackPanel with a few items in it and those items should be tiltable? Some work is needed to get this working and there are a few ways to accomplish this.

Wrap content in ListViewItem

Much like my previous post, you can easily enable tilt on “normal” items by simply wrapping the elements with a ListViewItem!

<!-- enable tilt by wrapping with a ListViewItem -->

<ListViewItem>

    <StackPanel Margin="0,0,0,9.5">

        <TextBlock Text="Name" Style="{ThemeResource ControlContextualInfoTextBlockStyle}"/>

        <TextBlock Text="Shawn Kendrot" Style="{ThemeResource BodyTextBlockStyle}"/>

    </StackPanel>

</ListViewItem>

This works because of the default style of the ListViewItem uses the PointerUpThemeAnimation and PointerDownThemeAnimation.

Start Storyboard on PointerPressed/Released

A second option to to listen to the PointerPressed and PointerReleased events of an element and play a Storyboard with the

<!-- enable tilt by listening to pointer events -->

<Grid PointerPressed="OnStoryboardGridPressed" 

      PointerReleased="OnStoryboardGridReleased">

    <Grid.Resources>

        <Storyboard x:Key="TiltDownStory">

            <PointerDownThemeAnimation TargetName="LovesPanel" />

        </Storyboard>

        <Storyboard x:Key="TiltUpStory">

            <PointerUpThemeAnimation TargetName="LovesPanel" />

        </Storyboard>

    </Grid.Resources>

    <StackPanel x:Name="LovesPanel" Margin="0,0,0,9.5">

        <TextBlock Text="Loves" Style="{ThemeResource ControlContextualInfoTextBlockStyle}"/>

        <TextBlock Text="XAML" Style="{ThemeResource BodyTextBlockStyle}"/>

    </StackPanel>

</Grid>

private void OnStoryboardGridPressed(object sender, PointerRoutedEventArgs e)

{

    var panel = ((FrameworkElement)sender);

    var story = (Storyboard)panel.Resources["TiltDownStory"];

    PlayStory(story);

}

private void OnStoryboardGridReleased(object sender, PointerRoutedEventArgs e)

{

    var panel = ((FrameworkElement)sender);

    var story = (Storyboard)panel.Resources["TiltUpStory"];

    PlayStory(story);

}

private void PlayStory(Storyboard story)

{

    // stop just in case it is already playing

    story.Stop();

    story.Begin();

}

When you tap the element, it will play the story.

Use VisualStates

A final option is to create a new control that will use visual states to play the animations. You will need to create you own control, either a UserControl or a custom control. When the element is pressed or released you will change the visual state of the control. For this example I used a UserControl.

protected override void OnPointerPressed(PointerRoutedEventArgs e)

{

    base.OnPointerPressed(e);

    _isPressed = true;

    ChangeState("PointerDown");

}

protected override void OnPointerReleased(PointerRoutedEventArgs e)

{

    base.OnPointerReleased(e);

    _isPressed = false;

    ChangeState("PointerUp");

}

private void ChangeState(string state, bool useTransitions = true)

{

    VisualStateManager.GoToState(this, state, useTransitions);

}

Define the states in your XAML

<Grid> 

    <VisualStateManager.VisualStateGroups>

        <VisualStateGroup x:Name="TapStates">

            <VisualState x:Name="Normal" />

            <VisualState x:Name="PointerDown">

                <Storyboard>

                    <PointerDownThemeAnimation TargetName="RootPanel" />

                </Storyboard>

            </VisualState>

            <VisualState x:Name="PointerUp">

                <Storyboard>

                    <PointerUpThemeAnimation TargetName="RootPanel" />

                </Storyboard>

            </VisualState>

        </VisualStateGroup>

    </VisualStateManager.VisualStateGroups>

    <Grid x:Name="RootPanel">

        <!-- place content here -->

    </Grid>

</Grid>

So when you have content that needs to show the tilt animation, you have three ways to do this. You can download my complete transition/animation sample to see these three examples.

Hope that helps!

In Windows Phone Silverlight apps you had the ability to take a png image and change the color of the image with an OpacityMask. This is a really handy tool to have when you want to show different state to a user or use one image and have it work with different backgrounds. Where is an example:

<StackPanel Orientation="Horizontal">

    <Image Source="Assets/appbar.book.png" Width="72" Height="72"></Image>

    <Rectangle Fill="Red" Width="72" Height="72" >

        <Rectangle.OpacityMask>

            <ImageBrush ImageSource="Assets/appbar.book.png" Stretch="Fill"/>

        </Rectangle.OpacityMask>

    </Rectangle>

    <Border Background="{StaticResource PhoneForegroundBrush}" Width="72" Height="72" >

        <Rectangle Fill="{StaticResource PhoneBackgroundBrush}" >

            <Rectangle.OpacityMask>

                <ImageBrush ImageSource="Assets/appbar.book.png" Stretch="Fill"/>

            </Rectangle.OpacityMask>

        </Rectangle>

    </Border>

</StackPanel>

This will give you the following three images:

This works really well except that it is pretty intensive on your phone to do this so I do not recommend doing a lot of these!

While this works great in Windows Phone Silverlight apps, this functionality does not exist in Windows Runtime (XAML apps for Windows Store and Phone 8.1). So what should you do? You have a few options.

BitmapIcon

If you wish to continue to use the image, you can use a BitmapIcon to display the image and change the color. Set the image with the UriSource property and then set the Foreground to the desired color! Be careful using the BitmapIcon because it will fill up all the space it is given so you’ll want to set the height and width of it, or it’s container explicitly.

<StackPanel Orientation="Horizontal" Height="72">

    <BitmapIcon UriSource="Assets/appbar.book.png" Margin="12"/>

    <BitmapIcon UriSource="Assets/appbar.book.png" Margin="12"

            Foreground="Red"/>

    <Border Background="{StaticResource PhoneForegroundBrush}">

        <BitmapIcon UriSource="Assets/appbar.book.png" Margin="12"

            Foreground="{StaticResource PhoneBackgroundBrush}"/>

    </Border>

</StackPanel>

Use an image vector

The first option is to use a vector of the image. Once you have the vector data, you display it in a Path element.

You most likely already have access to the vector of the image. You may have created the image with Photoshop, or you are using one of the awesome icons from the Modern UI Icon pack. The zip from Modern UI Icons contains the XAML needed to create an image, but you can also get it from the website! Using that XAML for the Path I can then recreate the three images above:

<StackPanel Orientation="Horizontal">

    <Path Width="42" Height="33.7913" Stretch="Fill" Fill="White" 

          Margin="12"

          Data="F1 M 22,46.9996C 26.4235,48.3026 34.4825,48.8053 37.2083,52.2153L 37.2083,32.9996C 34.4826,29.5896 26.4235,29.0869 22,27.7839L 22,46.9996 Z M 22,24.3078L 22,24.028C 26.4235,25.331 34.4825,25.8337 37.2083,29.2437L 38,29.4716L 38.7917,29.2157C 41.5174,25.8057 49.5765,25.303 54,24L 54,24.2798C 55.2286,24.6498 56,24.9716 56,24.9716L 56,27.9716L 59,26.8258L 59,50.9716C 59,50.9716 41.1667,52.2216 38,57.7633L 37.9999,57.7913C 34.8333,52.2496 17,50.9996 17,50.9996L 17,26.8538L 20,27.9996L 20,24.9996C 20,24.9996 20.7714,24.6778 22,24.3078 Z M 23.5,44.506L 23.5,41.3844C 27.269,42.243 32.4604,42.8187 35.5,44.7496L 35.5,47.8712C 32.4604,45.9402 27.269,45.3646 23.5,44.506 Z M 23.5,39.1212L 23.5,35.9996C 27.269,36.8582 32.4604,37.4338 35.5,39.3648L 35.5,42.4864C 32.4604,40.5554 27.269,39.9798 23.5,39.1212 Z M 23.5,33.6344L 23.5,30.5128C 27.269,31.3714 32.4604,31.947 35.5,33.878L 35.5,36.9996C 32.4604,35.0686 27.269,34.493 23.5,33.6344 Z M 54,46.9716L 54,27.7559C 49.5765,29.0589 41.5174,29.5616 38.7917,32.9716L 38.7917,52.1873C 41.5175,48.7773 49.5765,48.2746 54,46.9716 Z M 52.5,44.478C 48.731,45.3366 43.5395,45.9122 40.5,47.8432L 40.5,44.7216C 43.5395,42.7906 48.731,42.215 52.5,41.3564L 52.5,44.478 Z M 52.5,39.0932C 48.731,39.9518 43.5395,40.5274 40.5,42.4584L 40.5,39.3368C 43.5396,37.4058 48.731,36.8302 52.5,35.9716L 52.5,39.0932 Z M 52.5,33.6064C 48.731,34.465 43.5395,35.0406 40.5,36.9716L 40.5,33.85C 43.5395,31.919 48.731,31.3434 52.5,30.4848L 52.5,33.6064 Z "/>

    <Path Width="42" Height="33.7913" Stretch="Fill" Fill="Red" 

          Margin="12"

          Data="F1 M 22,46.9996C 26.4235,48.3026 34.4825,48.8053 37.2083,52.2153L 37.2083,32.9996C 34.4826,29.5896 26.4235,29.0869 22,27.7839L 22,46.9996 Z M 22,24.3078L 22,24.028C 26.4235,25.331 34.4825,25.8337 37.2083,29.2437L 38,29.4716L 38.7917,29.2157C 41.5174,25.8057 49.5765,25.303 54,24L 54,24.2798C 55.2286,24.6498 56,24.9716 56,24.9716L 56,27.9716L 59,26.8258L 59,50.9716C 59,50.9716 41.1667,52.2216 38,57.7633L 37.9999,57.7913C 34.8333,52.2496 17,50.9996 17,50.9996L 17,26.8538L 20,27.9996L 20,24.9996C 20,24.9996 20.7714,24.6778 22,24.3078 Z M 23.5,44.506L 23.5,41.3844C 27.269,42.243 32.4604,42.8187 35.5,44.7496L 35.5,47.8712C 32.4604,45.9402 27.269,45.3646 23.5,44.506 Z M 23.5,39.1212L 23.5,35.9996C 27.269,36.8582 32.4604,37.4338 35.5,39.3648L 35.5,42.4864C 32.4604,40.5554 27.269,39.9798 23.5,39.1212 Z M 23.5,33.6344L 23.5,30.5128C 27.269,31.3714 32.4604,31.947 35.5,33.878L 35.5,36.9996C 32.4604,35.0686 27.269,34.493 23.5,33.6344 Z M 54,46.9716L 54,27.7559C 49.5765,29.0589 41.5174,29.5616 38.7917,32.9716L 38.7917,52.1873C 41.5175,48.7773 49.5765,48.2746 54,46.9716 Z M 52.5,44.478C 48.731,45.3366 43.5395,45.9122 40.5,47.8432L 40.5,44.7216C 43.5395,42.7906 48.731,42.215 52.5,41.3564L 52.5,44.478 Z M 52.5,39.0932C 48.731,39.9518 43.5395,40.5274 40.5,42.4584L 40.5,39.3368C 43.5396,37.4058 48.731,36.8302 52.5,35.9716L 52.5,39.0932 Z M 52.5,33.6064C 48.731,34.465 43.5395,35.0406 40.5,36.9716L 40.5,33.85C 43.5395,31.919 48.731,31.3434 52.5,30.4848L 52.5,33.6064 Z "/>

    <Border Background="{StaticResource PhoneForegroundBrush}" Width="72" Height="72" >

        <Path Width="42" Height="33.7913" Stretch="Fill" Fill="{StaticResource PhoneBackgroundBrush}" 

          Margin="12"

          Data="F1 M 22,46.9996C 26.4235,48.3026 34.4825,48.8053 37.2083,52.2153L 37.2083,32.9996C 34.4826,29.5896 26.4235,29.0869 22,27.7839L 22,46.9996 Z M 22,24.3078L 22,24.028C 26.4235,25.331 34.4825,25.8337 37.2083,29.2437L 38,29.4716L 38.7917,29.2157C 41.5174,25.8057 49.5765,25.303 54,24L 54,24.2798C 55.2286,24.6498 56,24.9716 56,24.9716L 56,27.9716L 59,26.8258L 59,50.9716C 59,50.9716 41.1667,52.2216 38,57.7633L 37.9999,57.7913C 34.8333,52.2496 17,50.9996 17,50.9996L 17,26.8538L 20,27.9996L 20,24.9996C 20,24.9996 20.7714,24.6778 22,24.3078 Z M 23.5,44.506L 23.5,41.3844C 27.269,42.243 32.4604,42.8187 35.5,44.7496L 35.5,47.8712C 32.4604,45.9402 27.269,45.3646 23.5,44.506 Z M 23.5,39.1212L 23.5,35.9996C 27.269,36.8582 32.4604,37.4338 35.5,39.3648L 35.5,42.4864C 32.4604,40.5554 27.269,39.9798 23.5,39.1212 Z M 23.5,33.6344L 23.5,30.5128C 27.269,31.3714 32.4604,31.947 35.5,33.878L 35.5,36.9996C 32.4604,35.0686 27.269,34.493 23.5,33.6344 Z M 54,46.9716L 54,27.7559C 49.5765,29.0589 41.5174,29.5616 38.7917,32.9716L 38.7917,52.1873C 41.5175,48.7773 49.5765,48.2746 54,46.9716 Z M 52.5,44.478C 48.731,45.3366 43.5395,45.9122 40.5,47.8432L 40.5,44.7216C 43.5395,42.7906 48.731,42.215 52.5,41.3564L 52.5,44.478 Z M 52.5,39.0932C 48.731,39.9518 43.5395,40.5274 40.5,42.4584L 40.5,39.3368C 43.5396,37.4058 48.731,36.8302 52.5,35.9716L 52.5,39.0932 Z M 52.5,33.6064C 48.731,34.465 43.5395,35.0406 40.5,36.9716L 40.5,33.85C 43.5395,31.919 48.731,31.3434 52.5,30.4848L 52.5,33.6064 Z "/>

    </Border>

</StackPanel>

The vector data will scale up or down very nicely as well so you do not have to worry about multiple images!

Fonts

The third option is to use one of the built in symbol fonts like Segoe UI Symbol. This font allows for many options of symbols. It’s best to use a Character Map to see what is available. Because this option uses text elements, it is very easy to scale the icon up or down using the FontSize property!

<StackPanel Orientation="Horizontal">

    <TextBlock FontFamily="Segoe UI Symbol" Text="&#xE114;" 

               FontSize="64" Margin="6"/>

    <TextBlock FontFamily="Segoe UI Symbol" Text="&#xE114;" 

               Foreground="Red" 

               FontSize="64"  Margin="6"/>

    <Border Background="{StaticResource PhoneForegroundBrush}">

        <TextBlock FontFamily="Segoe UI Symbol" Text="&#xE114;"

                   Foreground="{StaticResource PhoneBackgroundBrush}"

               FontSize="64" Margin="6"/>

    </Border>

</StackPanel>

A forth option (which goes along with the third) is to create your own font. You can use Fontastic (thanks to Christopher Maneu for this suggestion) which will take SVG and convert to a font. Another option for creating custom fonts is Type 3.2 (thanks to Matt Duffield for this suggestion). I have not used these options, but I’m sure they work fine!

SymbolIcon

The last option is to use the SymbolIcon. This is a great option if you are using a “standard” icon. The SymbolIcon allows you to set a Symbol with plain, readable text!

<StackPanel Orientation="Horizontal">

    <SymbolIcon Symbol="Camera" Margin="12"/>

    <SymbolIcon Symbol="Camera" Margin="12" Foreground="Red"/>

    <Border Background="{StaticResource PhoneForegroundBrush}" Height="52">

        <SymbolIcon Symbol="Camera" Margin="12" Foreground="{StaticResource PhoneBackgroundBrush}"/>

    </Border>

</StackPanel>

The unfortunate part of the SymbolIcon is that you cannot set a size to it. You can however use the ViewBox control to scale the icon without any loss of quality!

<Viewbox Width="100">

    <SymbolIcon Symbol="Camera" Margin="12"/>

</Viewbox>

Hope that helps you out on your next project!

This blog serves as a public service announcement to give your ListBox, ListView, ItemsControl, whatever you choose the space that they deserve. I have seen a lot of apps (and often forget to do this myself!) that do not extend their lists all the way to the right of the page and keep the page too close to the bottom. It is easy to fall into this trap because of the defaults within Visual Studio. Take a look at the following examples:

Notice that huge gap to the side? Now take a look at the settings apps

Look mom! No gap! So what causes this gap? It’s the default template for pages in Visual Studio. When you create a new page for Windows Phone Silverlight apps you get the following

<!--ContentPanel - place additional content here-->

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

</Grid>

Notice the side margin of 12? This is a design guideline to leave the gap, but lists give you this buffer as well! You get the same XAML for Windows Phone Runtime app, but 9.5 instead of 12 for the margin. So, when you create a new page that will have a list in it, remove that right margin!

<!--ContentPanel - it has a ListBox so no right margin! -->

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,0,0">

    <ListBox>

    </ListBox>

</Grid>

Now our app behaves just like the built in apps!

The second space you want to give your apps is space at the bottom of the list. When you use a list it will expand to all the space it is given. The downside to this is when you scroll to the bottom of the list, the content is at the very bottom! This makes it a little hard to see. Take a look at the following examples.

Notice the nice gap at the bottom of the settings app. This is a lot easier on your eyes. This one is easy to solve as well. Simply add some padding to the bottom of your list.

<ListView Padding="0,0,0,72">

</ListView>

If you want you can create a style to use everywhere.

Take a few seconds and update your apps with these gaps.

One of the most known page transitions on Windows Phone is the feather (or staggered item) transition. This is the transition you see when opening the mail app and the messages feather, or stagger in. This animation is also seen on the home page on the phone when the tiles stagger in. You usually see this transition whenever there is a list of items shown by any of the built in apps. This transition was previously only available through toolkits like the Windows Phone Toolkit or Telerik’s toolkit. Now this transition is available out of the box for Windows Phone Runtime apps.

For background on page transitions in Windows Phone 8.1 Runtime apps, see my previous post.

To get started, simply create a new Windows Phone Runtime app. Page transitions are enabled by default for all Runtime apps! To use this transition, you’ll want to set the page transition to use the NavigationThemeTransition with the CommonNavigationTransitionInfo. Make sure to set IsStaggeringEnabled to true for the CommonNavigationTransitionInfo.

<Page.Transitions>

    <TransitionCollection>

        <NavigationThemeTransition>

            <NavigationThemeTransition.DefaultNavigationTransitionInfo>

                <CommonNavigationTransitionInfo IsStaggeringEnabled="True"/>

            </NavigationThemeTransition.DefaultNavigationTransitionInfo>

        </NavigationThemeTransition>

    </TransitionCollection>

</Page.Transitions>

Next, you’ll want to add the CommonNavigationTransitionInfo.IsStaggerElement attached property to any element that you want to stagger in. You will generally place this in the ItemTemplate of the ListView or GridView that you are displaying. You read that right. This transition works in both the ListView and GridView. If you use this on the template of a GridView, then you will see the tiles of your grid stagger in!

First a ListView:

<ListView ItemsSource="{Binding Items}">

    <ListView.ItemTemplate>

        <DataTemplate>

            <StackPanel Margin="0,0,0,9.5"

                        CommonNavigationTransitionInfo.IsStaggerElement="True">

                <TextBlock Text="{Binding Title}"

                           Style="{ThemeResource ListViewItemTextBlockStyle}"/>

                <TextBlock Text="{Binding Subtitle}" Style="{ThemeResource BaseTextBlockStyle}"/>

            </StackPanel>

        </DataTemplate>

    </ListView.ItemTemplate>

</ListView>

And a GridView:

<GridView ItemsSource="{Binding}">

    <GridView.ItemTemplate>

        <DataTemplate>

            <Rectangle Width="100" Height="100" Fill="{Binding}" 

                       Margin="0,0,9.5,9.5"

                       CommonNavigationTransitionInfo.IsStaggerElement="True"/>

        </DataTemplate>

    </GridView.ItemTemplate>

</GridView>

Notice that the StackPanel and Rectangle both set CommonNavigationTransitionInfo.IsStaggerElement="True".

That’s all you need to do for your app to begin using this awesome transition!

Download a complete sample (with many more samples!) of these transitions.

This is part of a series on migrating from the WP Toolkit.

With the release of Windows Phone 8.1 Runtime (aka XAML apps) comes a lot of functionality that previously only existed in the Windows Phone Toolkit or other third party control suites. One of these are page transitions and animations on objects. In Windows Phone 8 apps your best option for page transitions was the Windows Phone Toolkit or Telerik. I’ve used both, but really enjoy the robustness and ease of use of Teleriks transitions. With Teleriks RadTransitionControl you could setup forward and backward animations with three lines of XAML! Contrast that with the Windows Phone Toolkit where it takes 20 lines of XAML!! Because I like Teleriks transitions this post will cover moving from the Windows Phone Toolkit or the Teleriks transitions to the new transitions in the Windows Phone Runtime.

In both the Windows Phone Toolkit and Telerik you had to set the RootFrame of the App to be the control suite transition frame.

// Default

RootFrame = new PhoneApplicationFrame();

// WP Toolkit

RootFrame = new TransitionFrame();

// Telerik

RootFrame = new RadPhoneApplicationFrame();

With Windows Phone Runtime apps you do not need to do anything. When you create a new phone project, everything will be setup so that every page will show a turnstile transition! The transitions are setup within the RootFrame_FirstNavigated method,

rootFrame.ContentTransitions = this.transitions ?? new TransitionCollection() { new NavigationThemeTransition() };

Note: It is important to set the ContentTransitions of the frame. If this is null your app can crash while trying to navigate.

This sets up your app to show the NavigationThemeTransition. This is a “generic” transition that can be used all by itself. With this one line of code, every page you navigate to will use a turnstile transition!

The NavigationThemeTransition has a property, DefaultNavigationTransitionInfo, that specifies what transition to use for the page. There are three default classes that can be used, CommonNavigationTransitionInfo, SlideNavigationTransitionInfo. and ContinuumNavigationTransitionInfo. Setting up a page to use one of these is pretty simple.

<Page.Transitions>

    <TransitionCollection>

        <NavigationThemeTransition>

            <NavigationThemeTransition.DefaultNavigationTransitionInfo>

                <SlideNavigationTransitionInfo/>

            </NavigationThemeTransition.DefaultNavigationTransitionInfo>

        </NavigationThemeTransition>

    </TransitionCollection>

</Page.Transitions>

I’m not going to show how the WPToolkit or Telerik equivalent for the transitions as it would be too much.

The CommonNavigationTransitionInfo is the default NavigationTransitionInfo. It states that the page will use the turnstile transition. The CommonNavigationTransitionInfo also allows you to specify that a feather (aka stagger) page transition should be used. SlideNavigationTransitionInfo states that the page will use a slide transition that will animate from bottom to top when navigating in and top to bottom when navigating out. Finally, the ContinuumNavigationTransitionInfo allows you to show a “Fly away” transition like when tapping an email in the mail app. I’ll go into this in another post as well.

Along with the NavigationThemeTransition, there are other transitions that can be used for pages. The PaneThemeTransition and EdgeUIThemeTransition provide exactly the same functionality. They both allow you to use a slide transition, but to specify which edge to slide the content in from, and out to.

<TransitionCollection>

    <PaneThemeTransition Edge="Bottom" />

</TransitionCollection>

The EntranceThemeTransition is pretty cool because it allows you specify the horizontal and vertical offset that the page should navigate from. This means you can slide your page in diagonally.

<TransitionCollection>

    <EntranceThemeTransition FromVerticalOffset="200" FromHorizontalOffset="200" />

</TransitionCollection>

Those are the basic page transitions for pages. One really awesome thing that you can do with the new transitions is create what I call partial and complex transitions. This technique requires that you do not set a default transition to the root frames ContentTransitions like is done by default. You still need to create a new TransitionCollection, but do not put anything in it! With a partial or complex transition, you will [most likely] not set a transition for the page. Instead you will place transitions on the ChildrenTransitions of individual panels. The example below uses the EdgeUIThemeTransition is a sample of what I call a “complex transition”. It  slides items in from alternating sides.

<StackPanel Margin="0,0,0,9.5">

    <StackPanel.ChildrenTransitions>

        <TransitionCollection>

            <EdgeUIThemeTransition Edge="Right"/>

        </TransitionCollection>

    </StackPanel.ChildrenTransitions>

    <TextBlock Text="Item One" Style="{ThemeResource BodyTextBlockStyle}"/>

</StackPanel>

<StackPanel Margin="0,0,0,9.5">

    <StackPanel.ChildrenTransitions>

        <TransitionCollection>

            <EdgeUIThemeTransition Edge="Left"/>

        </TransitionCollection>

    </StackPanel.ChildrenTransitions>

    <TextBlock Text="Item Two" Style="{ThemeResource BodyTextBlockStyle}"/>

</StackPanel>

<StackPanel Margin="0,0,0,9.5">

    <StackPanel.ChildrenTransitions>

        <TransitionCollection>

            <EdgeUIThemeTransition Edge="Right"/>

        </TransitionCollection>

    </StackPanel.ChildrenTransitions>

    <TextBlock Text="Item Three" Style="{ThemeResource BodyTextBlockStyle}"/>

</StackPanel>

Aside from page transitions, there are some awesome animations that can be used on items. One exciting animation is tilt. Tilt is enabled on all “clickable” items by default (eg: Button, ListViewItem)! This is exciting because previously you had to set this yourself. There are a few ways to enable tilt on non-clickable items, read this post to find out more. Another awesome animation is the slide in animation that you get when changing PivotItems within a Pivot. This is a staggered slide that you get for each line of an item. Enabling this requires setting the SlideInAnimationGroup on each element you want to stagger sliding.

<DataTemplate>

    <StackPanel Margin="0,0,0,9.5">

        <TextBlock Pivot.SlideInAnimationGroup="1"

                   Text="{Binding Title}"

                   Style="{ThemeResource ListViewItemTextBlockStyle}"

                   Margin="0,0,19,0"/>

        <TextBlock Pivot.SlideInAnimationGroup="2" 

                   Text="{Binding Description}"

                   TextWrapping="WrapWholeWords"

                   Style="{ThemeResource ListViewItemContentTextBlockStyle}"

                   Margin="0,0,19,0"/>

    </StackPanel>

</DataTemplate>

I have noticed a weird bug with this animation in which items do not slide in when first changing pivot items. Keep this in mind when testing.

Another handy animation is the AddDeleteThemeTransition. With this transition, when an item is added it will open a space and be inserted into that space. When an item is removed, the item will go away and then the content will slide up in its place. This transition is already enabled on the ListView and GridView.

<ItemsControl ItemsSource="{Binding Items}" 

              ItemTemplate="{StaticResource ItemsTemplate}">

    <ItemsControl.ItemContainerTransitions>

        <TransitionCollection>

            <AddDeleteThemeTransition/>

        </TransitionCollection>

    </ItemsControl.ItemContainerTransitions>

</ItemsControl>

There are many other transitions and animations. You can download a complete sample that includes all the items I discussed in this post plus more!

One downside to the Runtime transitions is that you cannot specify a different transition to use when navigating out that is used for navigating in.Both the WPToolkit and Telerik, allowed you to do this.

This is part of a series on migrating from the WP Toolkit.

With the release of the new Windows Phone 8.1 Runtime (aka XAML) apps comes a heap of new controls. Many of these controls were only available through third party control libraries. One of these controls was the ContextMenu. In Windows Phone Silverlight apps (even 8.1) displaying a context menu requires another library. One of the most popular (and free) libraries is the Windows Phone Toolkit. If you are used to using the ContextMenu from the toolkit you may be wondering how to show a context menu in Windows Phone Runtime apps.

Previously you would generally add a ContextMenu to your items in XAML like such (this example assumes context is set in an item template of a list.

<toolkit:ContextMenuService.ContextMenu >

    <toolkit:ContextMenu>

        <!-- using the Click event -->

        <toolkit:MenuItem Header="reply" Click="OnReplyClicked"/>

        <!-- using commanding to DataContext of MenuItem -->

        <toolkit:MenuItem Header="retweet" Command="{Binding RetweetCommand}"/>

        <!-- using commanding to DataContext of parent list -->

        <toolkit:MenuItem Header="favorite"

                          Command="{Binding DataContext.FavoriteCommand, 

                                    ElementName=TweetList}"

                          CommandParameter="{Binding}"/>

    </toolkit:ContextMenu>

</toolkit:ContextMenuService.ContextMenu>

The above example shows how you can use the toolkit to display a ContextMenu when an item is tapped and held. It has three different items all behaving differently. One responds to the Click event and the other two using commanding. The two commanding items bind to different DataContext objects. One item (the retweet item) uses the command, RetweetCommand, which is on the item (model) it is bound to. The other item (favorite) binds to the ListBox that it is contained within. I generally use the first and last examples when building context menus. I rarely find a need to put a command on a model.

You could also create and open a context menu in code-behind if you wanted.

contextMenu = new ContextMenu();

// this example does not respond to an item selected, only a sample

contextMenu.Items.Add(new MenuItem { Header = "retweet"});

// Have to set the owner!

contextMenu.Owner = element;

contextMenu.IsOpen = true;

Windows Phone 8.1 Runtime apps brings the MenuFlyout for showing a context menu in your apps. The MenuFlyout is a FlyoutBase object which means you can place it on anything that has a Flyout dependency property like a button. If the control you want to place it on does not have a Flyout DP, no problem because there is also the AttachedFlyout attached DP on FlyoutBase. Adding the MenuFlyout to an item template is very similar to how we did it in the WP toolkit, but there are some things still missing.

<StackPanel>

    <FlyoutBase.AttachedFlyout>

        <MenuFlyout>

            <!-- using the Click event -->

            <MenuFlyoutItem Text="reply" Click="OnReplyClicked"/>

            <!-- using commanding to DataContext of MenuItem -->

            <MenuFlyoutItem Text="retweet" Command="{Binding RetweetCommand}"/>

            <!-- using commanding to DataContext of parent list -->

            <MenuFlyoutItem Text="favorite"

                            Command="{Binding DataContext.FavoriteCommand, 

                                      ElementName=TweetList}"

                            CommandParameter="{Binding}"/>

        </MenuFlyout>

    </FlyoutBase.AttachedFlyout>

    <!-- Content for you template -->

</StackPanel>

Looks like the toolkit code for the most part. If you build an app with this and tap and hold an item you will notice that the menu does not open. I said above there are some things missing, this is one of them, and it’s a big one! We now have a context menu built into the controls, but it won’t show. To show the menu, we need to subscribe to the Holding event of the element the menu will be attached to.

<StackPanel Holding="OnElementHolding">

    <FlyoutBase.AttachedFlyout>

        <!-- MenuFlyout -->

    </FlyoutBase.AttachedFlyout>

    <!-- content -->

</StackPanel>

In the event handler we can show the menu.

private void OnElementHolding(object sender, HoldingRoutedEventArgs args)

{

    // this event is fired multiple times. We do not want to show the menu twice

    if (args.HoldingState != HoldingState.Started) return;

    FrameworkElement element = sender as FrameworkElement;

    if (element == null) return;

    // If the menu was attached properly, we just need to call this handy method

    FlyoutBase.ShowAttachedFlyout(element);

}

Here is an example using the Pivot App project template

So there you have it. But wait. This is not acceptable. I am not going to add a holding event to all of the items and pages that I want to show a context menu. 

I really liked the ContextMenuSerice from the WP Toolkit. It was easy to use, little xaml required, just got to the point. Why don’t we create a MenuFlyoutService that works the same way the ContextMenuService did? 

The first step is to add a new file to Visual Studio named MenuFlyoutService. Then copy the source for the [class only] ContextMenuService. Paste the class into your file and find/replace ContextMenu for MenuFlyout. Happy news, most of the work is already done! Last thing we need to do is attach a menu to the element and subscribe to the Holding event. We’ll make all of our changes within the new OnMenuFlyoutChanged method. Any new line below are shown with comments.

private static void OnMenuFlyoutChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)

{

    var element = o as FrameworkElement;

    if (null != element)

    {

        // just in case we were here before and there is no new menu

        element.Holding –= OnElementHolding;

        MenuFlyout oldMenuFlyout = e.OldValue as MenuFlyout;

        if (null != oldMenuFlyout)

        {

            // Remove previous attachment

            element.SetValue(FlyoutBase.AttachedFlyoutProperty, null);

        }

        MenuFlyout newMenuFlyout = e.NewValue as MenuFlyout;

        if (null != newMenuFlyout)

        {

            // attach using FlyoutBase to easier show the menu

            element.SetValue(FlyoutBase.AttachedFlyoutProperty, newMenuFlyout);

            // need to show it

            element.Holding += OnElementHolding;

        }

    }

}

The holding event handler is the same handler that we created above. Now our xaml will need to change to match our new MenuFlyoutService

<StackPanel>

    <local:MenuFlyoutService.MenuFlyout>

        <MenuFlyout>

            <!-- using the Click event -->

            <MenuFlyoutItem Text="reply" Click="OnReplyClicked"/>

            <!-- using commanding to DataContext of MenuItem -->

            <MenuFlyoutItem Text="retweet" Command="{Binding RetweetCommand}"/>

            <!-- using commanding to DataContext of parent list -->

            <MenuFlyoutItem Text="favorite" 

                            Command="{Binding DataContext.FavoriteCommand, 

                                      ElementName=TweetList}"

                            CommandParameter="{Binding}"/>

        </MenuFlyout>

    </local:MenuFlyoutService.MenuFlyout>

    <!-- content for template -->

</StackPanel>

And now we are able to show a MenuFlyout (aka context menu) whereever we want. No extra code needed in our pages that wasn’t there before. We can even copy/paste find/replace from old WP Silverlight apps to new Runtime apps pretty easily.

You can download a sample app using the MenuFlyoutService.

This is part of a series on migrating from the WP Toolkit.

With the release of the new Windows Phone 8.1 XAML (Runtime) SDK comes a lot of new controls that were previously only available in the Windows Phone Toolkit. One of these controls in the ComboBox. Well, this control isn’t new, but now it works as one would expect. In Windows Phone 8, the ComboBox displayed more of a ListBox than a ComboBox. It would display all items and not a dropdown. Getting the drop down like functionality required you to use a third party control like the Windows Phone Toolkit ListPicker control. This control would have a dropdown if the number of items was limited, and would show full screen for large number of items. The new ComboBox helps us scratch an itch, but it does not match up to the ListPicker from the toolkit. Before we get into the things the ComboBox does not do, let’s get into the things is does do, and how you can modify your code to start using the ComboBox if you are used to using the ListPicker.

The ComboBox works great for the scenario where you have a list of text you want to show. It works great when the content you want to show will be the same in the three states of the control.

In the above examples the content is displayed the same in all three states, collapsed, expanded (dropdown open), and full screen.

Let’s assume you were displaying something like this in a Windows Phone 7 or 8 app and that you used the ListPicker. If you do have this simple scenario, then all you need to do s swap “toolkit:ListPicker” for “ComboBox” in your XAML.

<!-- from -->

<toolkit:ListPicker Header="List Picker" ItemsSource="{Binding Items}">

    <toolkit:ListPicker.ItemTemplate>

        <DataTemplate>

            <TextBlock Text="{Binding Name}"/>

        </DataTemplate>        

    </toolkit:ListPicker.ItemTemplate>

</toolkit:ListPicker>

<!-- to -->

<ComboBox Header="Combo picker" ItemsSource="{Binding Items}">

    <ComboBox.ItemTemplate>

        <DataTemplate>

            <TextBlock Text="{Binding Name}"/>

        </DataTemplate>

    </ComboBox.ItemTemplate>

</ComboBox>

With both controls, if the count of the items is six or more, it would expand to full screen.

You can get a little complex with the CombBoBox ItemTemplate. If you wanted to display colors with their text you could set the ItemTemplate to the following:

<StackPanel Orientation="Horizontal">

    <Rectangle Width="20" Height="20" >

        <Rectangle.Fill>

            <SolidColorBrush Color="{Binding Color}" />

        </Rectangle.Fill>

    </Rectangle>

    <TextBlock Text="{Binding Name}" Margin="12,0"/>

</StackPanel>

That’s about it for the simple use cases. Now, where the ComboBox falls short of the ListPicker

1. No way to set that it should expand to full screen only (ExpansionMode from ListPicker)
2. No way to set a template when in full screen (FullModeItemTemplate from ListPicker)
3. No way to set the header when in full screen (FullModeHeader from ListPicker)
4. No way to set the number of items the ComboBox should contain before showing in full screen (ItemCountThreshold from ListPicker)
5. Cannot have a picker that is only shown in full screen (does not display the “button”). This is useful when you want to display a picker based on clicking an app bar button

We can work through most of these shortcomings, but it requires some extra work. To show some workarounds for the above items, we’ll work to create a ListPicker that will display the following no matter how many items are in the collection.

It’s important to note that we will not be using the ComboBox to display the above. With this sample we will cover items 1, 2, and 3. To display a custom picker, we’ll start with a standard button and set it’s Flyout to be a ListPickerFlyout. The button will need to be stretched and the content needs to display on the left, so we need to set the HorizontalAlignment and HorizontalContentAlignment property.

<Button HorizontalAlignment="Stretch" HorizontalContentAlignment="Left">

    <Button.Flyout>

        <ListPickerFlyout >

        </ListPickerFlyout>

    </Button.Flyout>

</Button>

When the button is tapped, it will open the flyout that is set. The ListPickerFlyout works just like an Selector control. It has an ItemsSource, SelectedItem, SelectedIndex and more. However, instead of a SelectedItemChanged event, it has a ItemsPicked event. The ListPickerFlyout is not a control so you cannot place it in the visual tree like you would a ListBox,, TimePicker, etc. Instead it can only be set within a Flyout property. It is a DependencyObject, so you can use binding with it.

We’ll setup the ListPickerFlyout to display our custom header and custom template

<ListPickerFlyout Title="SELECT CITY" ItemsSource="{Binding Items}"

                  SelectedItem="{Binding SelectedCity, Mode=TwoWay}">

    <ListPickerFlyout.ItemTemplate>

        <DataTemplate>

            <StackPanel>

                <TextBlock Text="{Binding City}" FontSize="{StaticResource TextStyleExtraLargeFontSize}"/>

                <TextBlock Text="{Binding State}" FontSize="{StaticResource TextStyleLargeFontSize}"/>

                <TextBlock Text="{Binding TimeZone}" FontSize="{StaticResource TextStyleMediumFontSize}"/>

            </StackPanel>

        </DataTemplate>

    </ListPickerFlyout.ItemTemplate>

</ListPickerFlyout>

Now we’ll need to set the content of the button to display the the selected city.

<TextBlock DataContext="{Binding SelectedCity}">

    <Run Text="{Binding City}"/><Run Text=","/>

    <Run Text="{Binding StateAbr}"/>

</TextBlock>

So the complete XAML for our custom ListPicker is:

<Button HorizontalAlignment="Stretch" HorizontalContentAlignment="Left">

    <TextBlock DataContext="{Binding SelectedCity}">

        <Run Text="{Binding City}"/><Run Text=","/>

        <Run Text="{Binding StateAbr}"/>

    </TextBlock>

    <Button.Flyout>

        <ListPickerFlyout x:Name="CityPicker" Title="SELECT CITY" ItemsSource="{Binding Items}"

                          SelectedItem="{Binding SelectedCity, Mode=TwoWay}">

            <ListPickerFlyout.ItemTemplate>

                <DataTemplate>

                    <StackPanel>

                        <TextBlock Text="{Binding City}" FontSize="{StaticResource TextStyleExtraLargeFontSize}"/>

                        <TextBlock Text="{Binding State}" FontSize="{StaticResource TextStyleLargeFontSize}"/>

                        <TextBlock Text="{Binding TimeZone}" FontSize="{StaticResource TextStyleMediumFontSize}"/>

                    </StackPanel>

                </DataTemplate>

            </ListPickerFlyout.ItemTemplate>

        </ListPickerFlyout>

    </Button.Flyout>

</Button>

Unlike the ComboBox, the Button does not have a Header property, so if you want to display a header for the picker you will need to add one.

<StackPanel>

    <TextBlock Text="Expanding picker" 

               Foreground="{StaticResource PhoneMidBrush}"

               FontSize="{ThemeResource TextStyleMediumFontSize}"

               Margin="0,0,0,-4.5" />

    <Button />

</StackPanel/>

Not to much work, and we were able to solve the following drawbacks of the ComboBox

1. SOLVED: No way to set that it should expand to full screen only (ExpansionMode from ListPicker)
2. SOLVED: No way to set a template when in full screen (FullModeItemTemplate from ListPicker)
3. SOLVED: No way to set the header when in full screen (FullModeHeader from ListPicker)

Which leaves us with the following items unsolved

1. No way to set the number of items the ComboBox should contain before showing in full screen (ItemCountThreshold from ListPicker)
2. Cannot have a picker that is only shown in full screen (does not display the “button”). This is useful when you want to display a picker based on clicking an app bar button

Unfortunately there is no way to solve number 1 without writing your own ComboBox, I won’t go into that as I don’t see this item being a big deal. We can solve the last one. In Windows Phone 8 you could put a button (or a menu item) in the app bar and when it was tapped, show a ListPicker. Take the example of a share button in your app. I would solve this by doing the following:

<toolkit:ListPicker x:Name="SharePicker" 

                    ExpansionMode="FullScreenOnly"

                    Visibility="Collapsed"

                    FullModeHeader="SHARE"

                    SelectionChanged="SharePickerSelectionChanged">

    <toolkit:ListPicker.FullModeItemTemplate>

        <DataTemplate>

            <TextBlock Margin="0,20" Text="{Binding Name}" 

                       Style="{StaticResource PhoneTextExtraLargeStyle}" />

        </DataTemplate>

    </toolkit:ListPicker.FullModeItemTemplate>

</toolkit:ListPicker>

Notice that the ExpansionMode is FullScreenOnly and the Visibility is Collapsed. This would hide the button look of the picker, but would still allow it to be shown when the Open method is called.

private void OnShareButtonClick(object sender, EventArgs e)

{

    SharePicker.Open();

}

Pretty simple, but you cannot accomplish this with the ComboBox. Once again you can accomplish this the ListPickerFlyout. You’ll want to define the ItemTemplate in the resources of the page so that it can be accessed from your code. When the button is clicked, show a picker.

private void OnAppBarButtonClick(object sender, RoutedEventArgs e)

{

    var picker = new ListPickerFlyout();

    picker.ItemsSource = Items;

    picker.ItemTemplate = (DataTemplate)Resources["PickerTemplate"];

    picker.ItemsPicked += OnItemsPicked;

    picker.ShowAt(this);

}

Even though the ComboBox does not do as much as the ListPicker did, we are able to easily get those missing items accomplished!

This is part of a series on migrating from the WP Toolkit.

The release of Windows Phone 8.1 comes a load of new controls for Runtime (aka XAML) apps. One of these new controls is the TimePicker. This control was previously only available in toolkits like the Windows Phone Toolkit, Coding4Fun or paid versions like Telerik. If you were using on of these version, you can easily move to the new TimePicker in the runtime. This post will focus on moving from the WP Toolkit version.

The TimePicker is part of the new core controls, so you no longer need a namespace prefix.

<!-- from -->

<toolkit:TimePicker/>

<!-- to -->

<TimePicker/>

Setting the time value on the TimePicker is done through the Time property. This was previously done through the Value property in the WP Toolkit version. The property is now a TimeSpan rather than a DateTime from the toolkit.

<!-- from -->

<toolkit:TimePicker Value="{Binding Date}” />

<!-- to -->

<TimePicker Time="{Binding Time}"/>

If you have a DateTime property already, then bind to the TimeOfDay property of the date.

<TimePicker Time="{Binding Date.TimeOfDay}"/>

Like most of the new runtime (aka XAML) controls, it has a Header property to display what the time represents.

<TimePicker Header="Time" Time="{Binding Date.TimeOfDay}"/>

When the time changes for the picker, it will fire the TimeChanged event. This is different from the ValueChanged in the WP Toolkit.

Once again there are not side margins for the control. You will need to add any margins to ensure it fits your page appropriately. If you margins in your root grid, then you will not need any additional margins.

The new TimePicker has two new great properties. The first is the MinuteIncrement property. This property allows you to specify how many minutes the picker is allowed to be incremented by. This value can be set from 0 to 59. A value of 0 states that only the hour can change while a value of 30 states that the hour can change and the minute value can be either 0 or 30.

The second new property is the ClockIdentifier property. This allows you to specify if the clock should show a 12 or 24 hour clock. Rather than being an enumeration, this property is a string. It only allows the values 12HourClock and 24HourClock.

<TimePicker Header="12HourClock" ClockIdentifier="12HourClock"/>

<TimePicker Header="24HourClock" ClockIdentifier="24HourClock"/>

Like the DatePicker, the new TimePicker does not have a way to format the value as it did in the WP Toolkit. In the below example you could format a TimePicker, in the WP Toolkit, to display with seconds, or with AM/PM, etc..

<toolkit:TimePicker Header="With AM/PM" 

                    Value="{Binding Time}"

                    ValueStringFormat="{}{0:hh:MM tt}"/>

<toolkit:TimePicker Header="With seconds"

                    Value="{Binding Time}"

                    ValueStringFormat="{}{0:hh:MM:ss}"/>

Once again we can hope that this will be added.

This is part of a series on migrating from the WP Toolkit

With the release of the new Windows Phone 8.1 SDK comes new controls that previously were only available in the Windows Phone Toolkit. One of these controls is the DatePicker. The new DatePicker is a nice addition to the SDK and something people have been asking for since the beginning.

The DatePicker is part of the core controls, so you no longer need a namespace prefix

<!-- from -->

<toolkit:DatePicker/>

<!-- to -->

<DatePicker/>

To set the Date on the DatePicker, you use the Date property rather than the Value property from the toolkit. And of course the Date property allows for binding.

<!-- from -->

<toolkit:DatePicker Value="{Binding Date}” />

<!-- to -->

<DatePicker Date="{Binding Date}"/>

It still has a Header property allowing you to place a label for what the date represents

<DatePicker Header="Date" Value="{Binding DateValue}"/>

Like other Runtime (aka XAML) controls, the DatePicker does not have the same margins as the toolkit version. If you want to do a direct replacement, you add a left and right margin of 9.5 (assuming it is contained within an element that also has a 9.5 side margin).

<DatePicker Margin="9.5,0"/>

To match the Date property, the event you want to listen to for the date changing is the DateChanged event. This replaces the ValueChanged event from the toolkit. The event gives you event args with the old and new values.

The DatePicker has some awesome properties to format date values, but they do not work in Windows Phone Apps. The docs has a few samples listed that allow you to format different parts of the date.

<!-- DatePicker formatted using format templates. -->

<DatePicker DayFormat="day" MonthFormat="month.numeric" YearFormat="year.abbreviated"/>

<!-- DatePicker formatted using format patterns. -->

<DatePicker DayFormat="{}{day.integer}" MonthFormat="{}{month.integer}" YearFormat="{}{year.abbreviated}"/>

<!-- combines 2 format patterns to display both the numeric date and the day of the week -->

<DatePicker DayFormat="{}{day.integer} {dayofweek.abbreviated}"/>

When adding these three samples we get the following from Windows and Windows Phone.

You can set the MinYear and MaxYear that is allowed for the DatePicker, but unfortunetly, that’s it. I would prefer the ability to have a Min and MaxValue allowing me to restrict every part of the date from day, month, and year. It does however come with a great new property, CalendarIdentifier. This new property allows you to set what calender system should be used. It has nine supported values. Adding each calendar to a page gives us the following.

One property that was lost is the ValueStringFormat from the Windows Phone Toolkit DatePicker. This property allowed you to format how the date was displayed. Here is an example of two DatePickers from the Toolkit. The top one has no formatting while the bottom does.

<toolkit:DatePicker Header="Default"/>

<toolkit:DatePicker Header="Formatted" ValueStringFormat="{}{0:dd-MM-yyyy}"/>

I’m hoping the ability to change the format will return.