Posted on by & filed under Content - Highlights and Reviews, Mobile Development.

User interfaces are usually composed of reusable controls that encapsulate the logic for rendering the view, taking input and manipulating data. Windows 8 XAML has a wide range of such controls and this is a terse overview of these controls that you can use to check if you know them all.


The Base Classes

The following classes form the core of the controls library in Windows 8 XAML:

  • DependencyObject is the base for all classes taking part in the XAML property system that add support for bindings, styling, animations etc.
  • UIElement is the based class for all controls that provides rendering properties to compositor and input (keyboard, mouse, touch, stylus) events
  • FrameworkElement direct subclasses like Border, ContentPresenter, MediaElement, Panel, TextBlock, ViewBox, WebBrowser or Shape – are some of the core controls that have very different properties and rendering implementation.
  • Panels like Canvas, Grid, StackPanel, VariableSizedWrapGrid or VirtualizingStackPanel provide layout logic for positioning multiple Children elements
  • Control subclasses like TextBox, PasswordBox and almost all other controls add mostly focus and formatting properties like Background, Foreground or FontFamily
  • ContentControl and its subclasses like ScrollViewer, Button, CheckBox, Frame or RadioButton provide Content, ContentTemplate and ContentTemplateSelector properties used for displaying some other content like other UIElements, strings or vide models – based on selected template
  • ItemsControl and the subclasses – ComboBox, FlipView, GridView, ListBox, ListView – are used for displaying lists of items, usually bound using ItemsSource and ItemTemplate properties
  • UserControl and its subclass – Page – are the simplest containers to encapsulate some XAML and code behind with designer tools support.

Controls Inherited from WPF and Silverlight

Windows 8 XAML has many of the standard controls available in WPF or Silverlight. These include

  • Layout panels (for arranging multiple child controls in space)
    • Canvas – To position child controls using Cartesian coordinates (Canvas.X and Canvas.Y properties)
    • Grid – To position child controls in a grid-like layout using RowDefinitions, ColumnDefinitions properties on the Grid as well as Grid.Row/Grid.RowSpan/Grid.Column/Grid.ColumnSpan attached properties on the positioned controls
    • StackPanel – To position child controls in a stack with either Horizontal or Vertical Orientation
  • Childless controls
    • Image – To display an image
    • MediaElement – To play audio or video
    • PasswordBox – To enable entering passwords discreetly
    • ProgressBar – To display progress
    • RichTextBlock – To display text with rich formatting support, inline objects such as images or hyperlinks as well as overflow (text columns)
    • ScrollBar – to provide custom control for scrolling of any other content
    • Shape – Base class for shapes such as Ellipse, Line, Path, Polygon, Polyline and Rectangle – to draw them with specified
  • Fill and Stroke brushes
    • Slider – to select a Value from within a range specified with Minimum and Maximum properties
    • TextBlock – To display text with simple formatting
    • TextBox – To display editable text
    • WebView – Used in conjunction with WebViewBrush is approximate equivalent of the WebBrowser
  • Controls with a single child:
    • ContentControl – To present content based on a template and a ContentPresenter
    • Border – Used to put a rectangular or rounded rectangle shaped border and background for other controls
    • Button – For triggering commands either with a Click event or Command binding
    • CheckBox – For representing Boolean true/false properties
    • Frame – To allow web browser-like navigation between pages of content with support for going back through the history using Navigate() and GoBack() methods
    • HyperlinkButton – A button that looks and works like hyperlinks in a web browser, so it blends better with some other text
    • Page – To encapsulate content that can be navigated to using the Frame control
    • Popup – To display content on top of any other content in the application, e.g. to display custom dialogs, settings panels or adornments for other controls
    • RadioButton – To select from a small set of options
    • RepeatButton – To trigger commands repeatedly as long as the button is depressed
    • ScrollViewer – To provide standard control for scrolling any content
    • ToolTip – Provides a way to display a popup with a helpful information when the user hovers the cursor over a given control
    • UserControl – To encapsulate some UI in a single control or create a custom control that can be reused in other applications to certain degree (it does not support templating that custom template controls do)
    • Viewbox – To automatically scale its child to fit in available space
  • ItemsControls:
    • ComboBox – To select one of a range of values
    • ItemsControl – To display a list of items using any ItemsPanel to arrange them
    • ListBox – To display a list of items as a scrollable list and enable single or multiple item selection
      Controls New in Windows 8 XAML
    • AppBar – A ContentControl used for hosting controls shown on demand with an edge gesture, right click or winkey+Z – allowing for clean, content-first, full-screen interface design
    • CaptureElement – Used to preview video captured from a webcam or other video device
    • FlipView – An ItemsControl used for displaying and easily flipping between multiple pages of usually full-screen content
    • GridView – An ItemsControl for touch-first display of magazine-like colorful tiles of content that serve as a hub to get to other parts of the app
    • ListView – An ItemsControl that is a more touch-centric cousin of the ListBox, usually used with more complex content than simple text strings in a ListBox
    • ProgressRing – For representing operation in progress when its duration is not deterministic
    • SemanticZoom – Enables two views of the same data at different scales that cross-fade upon pinch to zoom gestures
    • VariableSizedWrapGrid – A WrapPanel/Grid hybrid for laying out tiles

Note that all ItemsControls except ItemsControl itself present their content in associated item controls that can be styled using the ItemContainerStyle property. These include ComboBoxItem, FlipViewItem, GridViewItem, ListBoxItem, and ListViewItem.

Some Noteworthy Changes in Old Controls

  • Frame.Navigate() method now takes a page type instead of a Uri
  • Image.NineGrid – Helps create custom, stretchable backgrounds
  • MediaElement.PlayToSource – Enables playing media to another device
  • ScrollViewer.ZoomMode – Allows to easily create zoomable content
  • TextBlock.IsTextSelectionEnabled – allows to make the text of a TextBlock selectable, potentially allowing you to create a custom RichTextBox control that is missing in Windows 8 XAML.

Conclusion

Overall the set of controls in Windows 8 XAML closely matches those of Silverlight or WPF, making a lot of the skills gained in programming for one of these platforms easily transferable to another. It also makes a lot of old WPF and Silverlight articles apply to Windows 8. The new features and controls allow you to more easily create exciting new experiences.

You can also find an overview of controls available in Windows 8 on MSDN here.

Safari Books Online has the content you need

Check out these Windows 8 books available from Safari Books Online:

Building Windows 8 Applications with C# and XAML shows you how to build immersive, responsive touch apps for Windows 8 tablets, computers, and other devices! Top Microsoft MVP and Wintellect consultant Jeremy Likness shows how to leverage your existing C#, XAML, WPF, or Silverlight skills with new Visual Studio 12 tools and best practices to build incredibly powerful Windows 8/WinRT apps!
Get a head start on building apps for Windows 8. With a series of examples, Getting Started with Windows 8 Apps takes you through the process of creating complete touch-enabled apps that respond to native sensors. Through the course of the book, you’ll learn how to work with the Windows Runtime application model while building a Bing Image Search app.

About this author

Filip Skakun is a Sr. Interactive Developer at Vectorform, where he creates user experiences for the world’s top brands, using the new and upcoming technologies. He is also the creator of the WinRT XAML Toolkit, a popular library for Windows 8 XAML developers. You can catch him on twitter.

Tags: Silverlight, Windows 8, WPF, XAML,

Comments are closed.