Choosing and using interactive controls (Windows Phone)
Blend for Visual Studio 2012 provides an extensive list of controls that enable you to design a versatile user interface for your Windows Phone applications.
Blend enables you to go above and beyond simply working with default or system controls. Instead, you can actually customize and style controls to your liking to make them perform the way you want. You can also—through the use of resources in Blend—give your custom controls a unique, attractive look, to differentiate your application from others as a way to create a highly branded experience or to create a consistent user interface (UI) across all of your applications. One of the greatest benefits of the control editing model that is present in Blend is that designers can design the appearance of an application at the same time that developers are writing the programming logic. Because a designer can create a design directly, the design won't get lost in translation from mockup to implementation.
What are controls?
Controls (or UI design elements) are the visible components of an application. Controls (such as buttons or lists of selectable items) make it possible for users to interact with your application. If you understand the controls that are available to you in Blend and how to customize them, you can make your application look and behave exactly the way that you want.
Blend makes it possible for you to work with controls visually on the artboard, and to configure their appearance and behavior in the Properties panel and the Objects and Timeline panel. For example, you can add a Button control to the artboard, change its appearance by modifying values in the Properties panel, and then start an animation timeline when the button is clicked by adding an event handler in code.
For more information, see Properties panel (Windows Phone) and Objects and Timeline panel (Windows Phone).
Beyond those simple actions, you can also do the following things to a control:
Convert a property (such as a brush color) into a resource that you can apply to other controls to create a unique and consistent look for your application.
Create a new template and style for a control that defines its appearance and behavior, also resulting in a unique and consistent look for your application. Templates and styles can include triggers and can use resources to set properties. For more information, see the "Styles and templates" section that follows.
Add animations and interactivity to your control.
Program more complicated behavior for your control in event handler methods in a code-behind file.
Design your own custom controls and use them in Blend.
Categories of controls
In Blend, you can use many different types of controls to quickly design a visually unique application. All of the controls are available from the Assets panel by clicking Assets .png)
at the bottom of the Tools panel. The Tools panel is along the left side of Blend. When you select a UI element from the Assets panel, the icon for that element appears underneath the Assets button, enabling you to easily select that element again later. The most common UI elements are already displayed underneath the Assets button so that you can locate them quickly.
For more information, see Assets panel (Windows Phone) and Tools panel (Windows Phone).
To help you decide which control to use, think of the controls in terms of the following categories:
Category |
Use |
Examples |
|---|---|---|
Shapes |
Used to create rich visual elements by using ellipses, lines, and rectangles, whose appearance you can make as simple or as complex and colorful as you wish. You can customize the appearance and behavior of these elements in Blend by using the Properties panel, or by using styles only (not by using templates). |
Rectangle Ellipse Path (generated by the Line |
Layout panels |
Used as a container for other UI elements, to specify their position and window resizing behavior. Unlike most UI elements, some layout panels (such as the Grid) can contain more than one child element. This is useful for organizing and laying out your application design. You can customize the appearance and behavior of these elements in Blend by using the Properties panel, or by using styles (not templates). |
Canvas Grid Stack WrapGrid |
Document/Text |
Used to define document presentation and text formatting. You can customize the appearance and behavior of these elements in Blend by using the Properties panel, or by using styles and templates. |
TextBox TextBlock PasswordBox |
Controls |
Used to provide a way for your user to interact with your application. You can customize the appearance and behavior of these elements in Blend by using the Properties panel, or by using styles and templates. |
Button ListBox RadioButton CheckBox |
Decorators |
Used to apply effects to another element. Decorators can include a single child element, usually the element whose appearance they affect. Typically these elements are used within templates that are applied to other controls, for example, the Border element in the template of a button. You can customize the appearance and behavior of the Decorator elements themselves by using the Properties panel, or by using styles only (not by using templates). |
Border Viewbox |
.png)
.png)
.png)
, Pen .png)
, and Pencil .png)
drawing tools).png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Double-clicking a control in the Assets panel inserts the control into the current active element at a default size. This is useful because in many cases the default size will be set to Auto so that the control will size correctly as content is added to it.
After you add a control to the artboard in Blend, it becomes an object in your application. You can modify objects in many ways by using on-object handles to resize, move, rotate, flip, or skew the objects, or by using the Properties panel where you can enter precise values for size, position, and rotation.
For more information, see Add or modfiy an object.
Blend is unique in the way in which it allows you to manipulate controls. You can place any other control, panel, or shape element within a control. This is useful in combining controls together. For example, if you want to create a button with an image and text in it, you just drag a StackPanel layout panel onto the button and then add an image and text control into the StackPanel layout panel.
Controls may or may not act as a parent element. When adding child elements Blend uses the active insertion point which is set simply by selecting the targeted container. A blue highlight identifies the activated element so that you know where a new control will be added.
The table below shows the types of controls and describes the rules used to determine what kind of children they will accept.
Category |
Description |
Examples |
|---|---|---|
Simple controls |
Simple controls consist of the controls themselves and the properties that can be set on them. Simple controls do not take content. In other words, they cannot have child elements within them. |
Image ScrollBar |
Content controls |
Content controls can take another element (or can show a string as text for simple scenarios). Content controls have a Content property. This means that they can contain singular content such as a string. Also, content controls can contain another element, such as a layout panel. |
CheckBox RadioButton |
Items controls |
Items controls include a collection of child elements. You can either manually add items to the Items collection property, or you can bind a data collection to the ItemsSource property. |
ComboBox ListBox ListView |
.png)
.png)
.png)
.png)
Creating and modifying controls
You can add a control to the artboard by double-clicking its icon in the Tools panel, or by selecting its icon in the Tools panel and then using your mouse to draw the element on the artboard.
Styles and templates
As mentioned previously, you can customize controls in many ways, including by creating templates and styles for controls, resulting in a unique and consistent look for your application. Templates and styles define the pieces that make up a control and the default behavior of the control, respectively. You create templates and styles by making copies of the default system styles and templates for a control (because you can't modify system styles and templates). Modifying templates and styles is an easy way to essentially make new controls in Design view of Blend, without having to use code.