XAML and GIS

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.

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!

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.

protectedoverridevoid OnPointerPressed(PointerRoutedEventArgs e)

{

base.OnPointerPressed(e);

_isPressed = true;

ChangeState("PointerDown");

}

protectedoverridevoid OnPointerReleased(PointerRoutedEventArgs e)

{

base.OnPointerReleased(e);

_isPressed = false;

ChangeState("PointerUp");

}

privatevoid ChangeState(string state, bool useTransitions = true)

{

VisualStateManager.GoToState(this, state, useTransitions);

}

Define the states in your XAML

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualStateGroupx:Name="TapStates">

<VisualStatex:Name="Normal"/>

<VisualStatex:Name="PointerDown">

<Storyboard>

<PointerDownThemeAnimationTargetName="RootPanel"/>

</Storyboard>

</VisualState>

<VisualStatex:Name="PointerUp">

<Storyboard>

<PointerUpThemeAnimationTargetName="RootPanel"/>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Gridx: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.

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:

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.

<StackPanelOrientation="Horizontal"Height="72">

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

<BitmapIconUriSource="Assets/appbar.book.png"Margin="12"

Foreground="Red"/>

<BorderBackground="{StaticResource PhoneForegroundBrush}">

<BitmapIconUriSource="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:

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!

<StackPanelOrientation="Horizontal">

<TextBlockFontFamily="Segoe UI Symbol"Text="&#xE114;"

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

<TextBlockFontFamily="Segoe UI Symbol"Text="&#xE114;"

Foreground="Red"

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

<BorderBackground="{StaticResource PhoneForegroundBrush}">

<TextBlockFontFamily="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!

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-->

<Gridx: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! -->

<Gridx: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.

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.

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>

<CommonNavigationTransitionInfoIsStaggeringEnabled="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!

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,

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!

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>

<PaneThemeTransitionEdge="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.

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.

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>

<StackPanelMargin="0,0,0,9.5">

<TextBlockPivot.SlideInAnimationGroup="1"

Text="{Binding Title}"

Style="{ThemeResource ListViewItemTextBlockStyle}"

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

<TextBlockPivot.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.

<ItemsControlItemsSource="{Binding Items}"

ItemTemplate="{StaticResource ItemsTemplate}">

<ItemsControl.ItemContainerTransitions>

<TransitionCollection>

<AddDeleteThemeTransition/>

</TransitionCollection>

</ItemsControl.ItemContainerTransitions>

</ItemsControl>

Phone Transitions

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.

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:MenuItemHeader="reply"Click="OnReplyClicked"/>

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

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

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

<toolkit:MenuItemHeader="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 -->

<MenuFlyoutItemText="reply"Click="OnReplyClicked"/>

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

<MenuFlyoutItemText="retweet"Command="{Binding RetweetCommand}"/>

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

<MenuFlyoutItemText="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.

// 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.

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 -->

<MenuFlyoutItemText="reply"Click="OnReplyClicked"/>

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

<MenuFlyoutItemText="retweet"Command="{Binding RetweetCommand}"/>

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

<MenuFlyoutItemText="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.

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:ListPickerHeader="List Picker"ItemsSource="{Binding Items}">

<toolkit:ListPicker.ItemTemplate>

<DataTemplate>

<TextBlockText="{Binding Name}"/>

</DataTemplate>

</toolkit:ListPicker.ItemTemplate>

</toolkit:ListPicker>

<!-- to -->

<ComboBoxHeader="Combo picker"ItemsSource="{Binding Items}">

<ComboBox.ItemTemplate>

<DataTemplate>

<TextBlockText="{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:

<StackPanelOrientation="Horizontal">

<RectangleWidth="20"Height="20">

<Rectangle.Fill>

<SolidColorBrushColor="{Binding Color}"/>

</Rectangle.Fill>

</Rectangle>

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

</StackPanel>

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

No way to set that it should expand to full screen only (ExpansionMode from ListPicker)

No way to set a template when in full screen (FullModeItemTemplate from ListPicker)

No way to set the header when in full screen (FullModeHeader from ListPicker)

No way to set the number of items the ComboBox should contain before showing in full screen (ItemCountThreshold from ListPicker)

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.

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.

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>

<TextBlockText="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

SOLVED: No way to set that it should expand to full screen only (ExpansionMode from ListPicker)

SOLVED: No way to set a template when in full screen (FullModeItemTemplate from ListPicker)

SOLVED: No way to set the header when in full screen (FullModeHeader from ListPicker)

Which leaves us with the following items unsolved

No way to set the number of items the ComboBox should contain before showing in full screen (ItemCountThreshold from ListPicker)

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:ListPickerx:Name="SharePicker"

ExpansionMode="FullScreenOnly"

Visibility="Collapsed"

FullModeHeader="SHARE"

SelectionChanged="SharePickerSelectionChanged">

<toolkit:ListPicker.FullModeItemTemplate>

<DataTemplate>

<TextBlockMargin="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.

privatevoid 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.

privatevoid 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!

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:TimePickerValue="{BindingDate}” />

<!-- to -->

<TimePickerTime="{Binding Time}"/>

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

<TimePickerTime="{Binding Date.TimeOfDay}"/>

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

<TimePickerHeader="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.

<TimePickerHeader="12HourClock"ClockIdentifier="12HourClock"/>

<TimePickerHeader="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..

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:DatePickerValue="{BindingDate}” />

<!-- to -->

<DatePickerDate="{Binding Date}"/>

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

<DatePickerHeader="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).

<DatePickerMargin="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.

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

<DatePickerDayFormat="{}{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.