XAML controls comparison between Windows Phone 8 and Windows 8

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

This topic compares and contrasts the XAML control set available for Windows Phone 8 and Windows 8. As we’ll see, the types of controls available for both are very similar, allowing you to plan and design your user interfaces using the same concepts.

Control comparison

XAML UI controls for Windows Phone 8 are defined in the System.Windows.Controls and Microsoft.Phone.Controls namespaces. In this release, we’ve added the LongListSelector to the control set and made some other improvements. The UI controls for Windows Store apps built using XAML are defined in the Windows.UI.Xaml.Controls namespace. The set of controls for each platform overlap conceptually. The following diagram shows this overlap in terms of types of controls available on both platforms.

In the preceding diagram, you can see that the majority of controls you are familiar with, whether coming from Windows Phone or Windows Store app development, exist on both platforms. These are not binary compatible, but the XAML used to define each one on your user interface and the properties available on each control are very similar. For example, if you have a page in your phone app that has a TextBox and two Button controls, you can copy and paste the XAML that defines these into a page in your Windows Store app. The controls will render. Of course, in a real app you would style your controls to suit the device on which the user interface is shown. The purpose here is to demonstrate the similarity of most of the controls on each platform. There is divergence in the controls used to manage the navigation of views within your app. On Windows Phone 8, you use Panorama and Pivot to create rich view navigation suitable for the phone’s form factor. Similarly, on Windows 8 you can use the GridView and FlipView controls to create rich views of data in your app that are suitable for a store app.

The following table shows the set of controls and whether they are available on Windows Phone 8 or Windows 8. Differences or other notes are called out in the notes section.

Windows 8

Windows Phone 8

Notes

AppBar

ApplicationBar

Border

Border

Button

Button

Canvas

Canvas

CaptureElement

Renders a stream from a capture device, such as a camera or webcam. On the phone, use a VideoBrush and a PhotoCamera or CaptureSource.

CheckBox

CheckBox

ComboBox

For Windows Phone, use the ListPicker control from the Windows Phone Toolkit.

ContentControl

ContentControl

ContentPresenter

ContentPresenter

Represents a control with a single piece of content. Controls, such as Button, CheckBox, and ScrollViewer, directly or indirectly inherit from this class. This is only used when you create your own custom controls, not when you’re using the design surface.

DrawingSurface

Defines an area within which 3-D content can be composed and rendered.

DrawingSurfaceBackgroundGrid

A control that allows you to draw Direct3D graphics onto the background of your app. Use SwapChainBackgroundPanel in Windows 8.

Ellipse

Ellipse

FlipView

Represents an items control that displays one item at a time, and enables "flip" behavior for traversing its collection of items.

Frame

Frame

Represents a content control that supports navigation. On Windows Phone, this class is only a base class for PhoneApplicationFrame.

Grid

Grid

GridView

Represents a control that displays a horizontal grid of data items.

HyperlinkButton

HyperlinkButton

Image

Image

ItemsControl

ItemsControl

Represents a control that can be used to present a collection of items.

ItemsPresenter

ItemsPresenter

Specifies where items are placed in a control, usually an ItemsControl.

ListBox

ListBox

ListBox is not present in the Visual Studio toolbox for Windows Phone 8 in order to encourage use of LongListSelector instead. However, it is still supported and you can manually add ListBox to XAML or code.

ListView

Represents a control that displays a vertical list of data items. On the phone, use LongListSelector.

LongListSelector

Displays a list of selectable items with a mechanism for users to jump to a specific section of the list.

MediaElement

MediaElement

Represents an object that contains audio, video, or both.

MultiScaleImage

Enables users to open a multi-resolution image, which can be zoomed in on and panned across.

Panorama

Creates a panoramic view of items that can be panned side-to-side.

PanoramaItem

Represents an item in a Panorama control.

PasswordBox

PasswordBox

Pivot

Provides a quick way to manage the navigation of views within an app. The control can be used as a navigation interface for filtering large sets or switching between views.

PivotItem

The container for items in the Pivot control.

Popup

Popup

ProgressBar

ProgressBar

ProgressRing

Represents a control that indicates that an operation is ongoing. The typical visual appearance is a ring-shaped "spinner" that cycles an animation as progress continues.

RadioButton

RadioButton

Rectangle

Rectangle

RepeatButton

RepeatButton

Represents a control that raises its Click event repeatedly until the click mode is released. It's on the phone, but only used as a base type (in Primitives namespace).

RichEditBox

Represents a rich text editing control that supports formatted text, hyperlinks, and other rich content.

RichTextBlock

Represents a rich text display container that supports formatted text, hyperlinks, inline images, and other rich content. On Windows Phone, use RichTextBox.

RichTextBox

Represents a rich text control that displays formatted text, hyperlinks, inline images, and other rich content. On Windows 8, use RichTextBlock.

RichTextBlockOverflow

Represents a rich text display overflow container. This element cannot have direct content. The only purpose of RichTextBlockOverflow is to display text content that does not fit in the bounds of a RichTextBlock or another RichTextBlockOverflow element.

ScrollBar

ScrollBar

ScrollContentPresenter

ScrollContentPresenter

Displays the content of a ScrollViewer control.

ScrollViewer

ScrollViewer

SemanticZoom

A semantic zoom control.

Slider

Slider

StackPanel

StackPanel

TextBlock

TextBlock

TextBox

TextBox

ToggleButton

ToggleButton

Base class for controls that can switch states, such as CheckBox and RadioButton.

ToggleSwitch

Represents a switch that can be toggled between two states. On Windows Phone, use the Toggle control available in the Windows Phone Toolkit.

ToolTip

ToolTip

Provides an informational window that appears as a result of moving the pointer over a control or sometimes when tabbing to a control using the keyboard. While this control exists on Windows Phone, it isn’t intended to be used from your code.

UserControl

UserControl

VariableSizedWrapGrid

Provides a grid-style layout panel where each tile/cell can be variable size based on content. In Windows Phone 8, consider using the WrapPanel available in the Windows Phone Toolkit.

ViewBox

ViewBox

Defines a content decorator that can stretch and scale a single child to fill the available space.

VirtualizingStackPanel

VirtualizingStackPanel

WebView

Provides a UI element that hosts HTML content within the app.

WebBrowser

Allows HTML rendering and navigation functionality to be embedded in an app.

WrapGrid

Positions child elements sequentially from left to right or top to bottom. When elements extend beyond the container edge, elements are positioned in the next row or column. In Windows Phone 8, consider using the WrapPanel available in the Windows Phone Toolkit.

See Also

Other Resources

Sharing XAML UI

What's new in Windows Phone SDK 8.0

Design library for Windows Phone

Design guidance for Windows Store apps

Build 2012: How to Leverage your Code across Windows Phone 8 and Windows 8

Code Sample: PixPresenter