Windows Phone 8.1 for Developers – What controls are new

This blog post is part of a series about how Windows Phone 8.1 affects developers. The series is written in collaboration with Microsoft evangelist Peter Bryntesson, check out his blog here.

What controls are removed between version 8.0 to 8.1

First we start to look at what has been removed from Windows Phone 8.0 and how to replace them in Windows Phone 8.1. I have included several links to MSDN where the control is described. Please note that this post is directed to those that want to transform their Windows Phone 8.1 Silverlight 8.0 app to a Windows Phone Windows Runtime 8.1 app. If you simply upgrade to an Windows Phone 8.1 Silverlight app, Everything stays the same and your code will run unchanged.

Panorama is now Hub

Let’s start from the beginning of an app. The first thing one notices is that the panorama is gone. The replacement is the Hub control. The Hub control has HubSection instead of PanoramaItem, and the HubSection must have a DataTemplate. The PanoramaItem could contain any container so here is a difference. Another difference is that the Hub control does not go around and around as the Panorama does if there are only two HubSections. If there are three it works just like the Panorama. There are some changes in the properties as well, the most important being Title in Panorama is now Header in the Hub.

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.hub.aspx

LongListSelector is now SemanticZoom

Instead of using the LongListSelector we now have SemanticZoom. SemanticZoom is not a list but much more useful. There are two state of the SemanticZoom, ZoomedInView and ZoomedOutView. As the names imply you have two states in and out. Two make a control similar to the LongListSelector one can use a List in zoomed in and a GridView in zoomed out and with them simulate a LongListSelector. But the SemanticZoom control can be used for much more, example list of places and a map or when you have subsections make a fast navigate on zoomed out etc.

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.semanticzoom.aspx

WebBrowser is now WebView

For the developer it is more or less just a rename but under the hood a lot has been done to really integrate the WebView in the XAML-tree. The WebBrowser was really a browser window that opened on top of the app which infused all sort of problems. Now the WebView is integrated in the XAML tree which enables us to mix XAML and HTML content really nice and easy.

Really nice MSDN link: http://blogs.windows.com/windows/b/appbuilder/archive/2013/07/17/what-s-new-in-webview-in-windows-8-1.aspx

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.webview.aspx

DrawingSurface and DrawingSurfaceBackgroundGrid

Instead of using these we should use SwapChainPanel instead, as we do in Windows 8.1. The semantics to work with this control is slightly different, but once understood it’s more or less the same. If you upgrade to Silverlight 8.1 these controls still remains.

http://msdn.microsoft.com/en-US/library/windows/apps/windows.ui.xaml.controls.swapchainpanel

MultiScaleImage

This control has been deprecated with no replacement control. Working with the ordinary Image control seems to be the best bet. If you upgrade to Silverlight 8.1 this control still remains.

RichTextBox is now RichTextBlock

Just swap the name from RichTextBox to RichTextBlock and you are good to go.

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.richtextblock.aspx

Completely new controls in Windows Phone 8.1

Since Windows Phone 8.1 and Windows 8.1 now share most of their code most controls exist in both places, but not all. Below I list what controls only exist on the phone and a brief introduction on how they are used. Here there are no MSDN links since they are new controls but hopefully I can add them soon. [Update: Added MSDN links]

AutoSuggestBox

This is a completely new control, it does not even exist in Windows 8.1. It could of course be done with other controls, visibility etc and probably has been done many times. This is why there are now a control that solves this frequently occurring problem. Its usage is quite straight forward:

Suggestions is just an ObservableCollection of strings. It can be of any type and the template can contain any controls. This is very powerful and can be altered to most need one have of AutoSuggestBox. Be aware that there might be a performance issue if you don´t show your suggestions fast, in the example I just adds dummy field but in real code you’ll probably want to filter some data which can take time.

http://msdn.microsoft.com/en-us/library/windows/apps/xaml/windows.ui.xaml.controls.autosuggestbox.aspx

DatePickerFlyout

There are a DatePicker control which can be used to show date and pick date using the DatePickerFlyout. That control is described in the next section. If you want to show the date picker flyout directly without using the date picker control you can do this by using the code below:

I guess since this flyout always takes up the whole screen the targetFrameWorkElement just has to be an element on the page, null does not work.

http://msdn.microsoft.com/en-us/library/windows/apps/xaml/windows.ui.xaml.controls.datepickerflyout.aspx

TimePickerFlyout

Works as DatePickerFlyout but picks time instead of date. Also has a corresponding control TimePicker described in the next section.

http://msdn.microsoft.com/en-us/library/windows/apps/xaml/windows.ui.xaml.controls.timepickerflyout.aspx

ListPickerFlyout

ListPickerFlyout is also a whole screen flyout. It showns a list from some ItemsSource which can of course be changed using a template.

It has besides ShowAtAsync also a ShowAt, choose wisely which to use to keep your app responding.

http://msdn.microsoft.com/en-us/library/windows/apps/xaml/windows.ui.xaml.controls.listpickerflyout.aspx

PickerFlyout

This is a normal flyout except is has a ConfirmationButtonsVisible property. When it is set it shows the done/cancel button at the bottom just as DatePickerFlyout and TimePickerFlyout does. If it not set it works as the Flyout does except it is a whole screen flyout, even without the confim buttons.

http://msdn.microsoft.com/en-us/library/windows/apps/xaml/windows.ui.xaml.controls.pickerflyout.aspx

Shared controls between Windows Phone 8.1 and Windows 8.1

Below I list what controls are the same in Windows 8.1 and Windows Phone 8.1. I do not go into very much details since they function the same on both platform. There are MSDN links to the Windows 8.1 version on every control. Hub, SemanticZoom, WebView and RichTextBlock are described above in the section What controls are removed between version 8.0 to 8.1.

CaptureElement

This control makes your app a viewer for the camera. You can make the viewer window as small or big as you want instead of taking up the whole screen.

Don’t forget to set the Webcam capability, otherwise the code will throw an exception.

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.captureelement.aspx

DatePicker

This is a control for an easy way to select a date. When clicked it shows the standard date picker view that is used throughout the phone.

clip_image002

The date format is localized which is nice not to have to think about. Very easy to use.

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.datepicker.aspx

TimePicker

Works much is same as DatePicker but instead of date you pick a time.

clip_image004

This also localized and uses the phone settings to show the time. It might be 24h or AM/PM depending on what is in the user settings.

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.timepicker.aspx

Flyout

With this control you create your own flyout. It can be fill with whatever content you like, might it be text buttons etc. This does on the contrary to the other flyouts not take up the whole screen. It is sized to the content added, and it is light dismissed meaning that if you click outside the flyout it closes.

Here the targetFrameWorkElement could be of use since it is not whole screen but no. The flyout in the phone positions itself on the top of the screen regardless of what control you set as target. It can also be set directly on a button as such:

It is still position on the top of the screen which can be a little odd. In Windows 8 in positions itself above the target control.

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.flyout.aspx

MenuFlyout

Menuflyout is the new context menu. It works as the flyout but can only contain MenuFlyoutItem, MenuFlyoutseperator or ToggleMenuFlyout. It does however have a major difference from the Flyout control namely it positions itself to the targetFrameWorkElement on the phone. I have no idea why the flyout does not do this, perhaps it will in the future.

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.menuflyout.aspx

ProgressRing

This is a new control to show progress. Instead of using the dots going from left to right that the ProgressBar gives you can now get dots going in a circle. The ProgressRing is always indeterminate and is started/stopped by the IsActive property. Remember that even if the ProgressRing is collapsed it still spinning if IsActive is true, always set IsActive to false at the same time you collapse it. If the IsActive is false it is hidden but has a reserved space in the XAML tree if you don’t collapses it.

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.progressring.aspx

Frame

You use the Frame control to support navigation to Page instances inside the current window. The frame remembers the navigation tree so commands as GoBack and GoForward functions as expected.

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.frame.aspx

ListView

ListView is a vertical list. It inherits from ListBox and adds the possibility to use columns, different views etc. One big difference from the ListBox is that ListView supports semantic zoom.

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.listview.aspx

GridView

GridView is a horizontal list and works exactly as ListView except the horizontal vs vertical display of items.

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.gridview.aspx

RichEditBox

Rich text editing control that supports formatted text, hyperlinks, and other rich content. A RichTextBlock with editing possibilities.

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.richeditbox.aspx

RichTextBlockOverflow

The only purpose of RichTextBlockOverflow is to display text content that does not fit in the bounds of a RichTextBlock

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.richtextblockoverflow.aspx

ToggleSwitch

Instead of just using ToggleButton with new templates there are now a ToggleSwitch. It is easy to use and gives your controls the same look as the rest of the phones switched. There is some third party controls which has mimic this in the past but now we have the ToggleSwitch from the get go. It is localized regarding the on/off text and uses the phones accent color on the switch.

clip_image005 clip_image007

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.toggleswitch.aspx

WrapGrid

Displays child elements left to right or top to bottom. If they hit the container edge it wraps to the next row or column. WrapGrid is primarily used for the items panel template for the GridView. WrapGrid is virtualized which is good when you work with large data sets.

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.wrapgrid.aspx

VariableSizedWrapGrid

VariableSizedWrapGrid works as the WrapGrid. The child element can however span across several rows or columns. A difference is that the VariableSizedWrapGrid is not virtualized which can impact performance.

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.variablesizedwrapgrid.aspx

Summary

There you have a quick overview of what controls are new in Windows Phone 8.1. There are a little on the completely new control such as the Hub control but as always if you need more info look at the MSDN links.

This Post Has 20 Comments

      1. I have try to use this code :http://social.msdn.microsoft.com/Forums/windowsapps/en-US/e8d4f7b3-93a8-4f17-9679-8b700b8d02e6/how-to-adjust-the-width-of-group-header-in-listview-to-stretch-full-width?forum=winappswithcsharp
        it run success on my device.But i have not found any api for jump action (I mean touch group key(title) and show all the key list such as windows phone’s A-z grouped like this http://www.csharpteacher.com/2014/02/a-z-grouped-list-in-longlistselector.html)
        As you said.the new wp8.1 use the SemanticZoom for it.I will try it latter.Thanks for your help.

  1. Hi Main. i build it .but when i click the header title show the keys view fail.
    What’s wrong ?
    My code here:

    //switch click event here:
    private void Switch_view(object sender, RoutedEventArgs e)
    {
    semanticZoom.ToggleActiveView();
    }

    1. If you just want ta add a place holder text use the PlaceholderText attribute.

      < TextBox PlaceholderText="add search text">

  2. why the mediacapture can not full screen ???

  3. Hi!

    Please your help,
    In Calendar app in WP8.1,
    In Day – Year views you can see at the top of the page:
    “today | tomorrow | Monday…” – which XAML control in Visual Studio Community can perform that?

    thanks

    Hiddai

    1. I would use a Pivot Control. I see two solutions, first you can add and remove pivot items depending on how the user swipes. or you can have like 5 pivost items and change the content and header in them depending on how the user swipes.

  4. Hi

    Right now I’m bit confused about loopingselector control as it is not available in windows phone 8.1 RT apps and I was using it in my windows phone 8 app so is there any solution to it ?

Leave a Reply

Close Menu