Layout and Formatting with Windows 8 XAML Development
When designing a user experience, one of the first things you need to figure out is where to position things on the screen, how they should flow when the content changes, and what shape or color they should be. This article is about the tools you have at your disposal with Windows 8 XAML to control layout and formatting on this exciting new platform.
The first thing you can use to change the format of a control is a Brush. Windows 8 XAML exposes the following:
- SolidColorBrush – For solid color fills.
- LinearGradientBrush – For linear gradients.
- ImageBrush – For images and DirectX integration.
- WebViewBrush – Used to render the content of a WebView control as a workaround for the fact that the WebView itself is always rendered on top of other controls.
- There is no RadialGradientBrush, but ImageBrush with SurfaceImageSource could be used to render radial gradients.
The Shape objects have the following format properties:
- Fill – the brush used to fill the inside of the shape.
- Stroke – the brush used for the shape strokes.
- StrokeThickness – for the thickness of the strokes.
- Other Stroke~ properties that control dashes, line joins, ends etc.
- Specific Shape subclasses define properties to control the geometry of the shapes, such as Rectangle.RadiusX.
Border has the following properties:
- Background – the brush used to fill the inside of the border.
- BorderBrush – the brush used for the border itself.
- CornerRadius – the radius of the border rectangle’s corner geometry.
Control has the following property:
- Background – A brush property that might be interpreted differently depending upon the template of the template control, but it is usually used to control the Background of a Border control in the template through a TemplateBinding.
Control, TextBlock, TextBox and RichTextBlock support a lot of text formatting properties, such as:
- Foreground – The brush used to fill font outlines.
- FontFamily – The font family used to render the text.
- FontSize – The font size.
- FontStyle – The style (normal or italic).
- FontWeight – Font weight, such as Light, Normal, SemiBold or Bold.
TextBlock also has an Inlines property, while RichTextBlock has a Blocks property for Paragraph objects that also have Inlines properties – all of which can be used to provide rich inline formatting of text, including embedding UI elements, like an Image or a Rectangle.
The text controls also support advanced typography parameters through attached properties of the Typography class.
The following basic properties control the base size and position of properties:
- Width, Height – Used to set fixed dimensions of a control, such as Width = 123.3; Height = Double.NaN; //Auto.
- MinWidth, MinHeight, MaxWidth, MaxHeight – Constrain the size between the specified range limits.
- RenderSize, ActualWidth, ActualHeight – Return actual rendered size of the control before transformations.
- Margin, Padding – Define how much space should be left empty around the control from its parent’s content area boundaries and inside the control around its content, e.g. Margin=” 10, 0, 10, 5″ Margin=”10,5″ Margin=”10″.
- HorizontalAlignment, VerticalAlignment – Control position of a control relative to its parent, i.e. Left/Right/Center/Stretch, Top/Bottom/Center/Stretch.
- HorizontalContentAlignment, VerticalContentAlignment – Control the alignment of the control’s content relative to the control.
Apart from specifying layout properties directly on a control as mentioned above, you can place the controls inside of one of the panels that provide various approaches to laying out controls in space.
- Child controls are positioned based on Canvas.Left and Canvas.Top properties that define a control’s position in Cartesian space.
- The Canvas.ZIndex property defines a fixed rendering order of child controls in any panel (not necessarily a Canvas). Note that by default the controls are rendered in the order in which they are added to a panel, so the last control added will cover earlier controls unless customized using Canvas.ZIndex. Also, for placing items on top of all other items a Popup control can be used.
- Its RowDefinitions and ColumnDefinitions specify the layout of rows and columns in which child controls are laid out.
- RowDefinition.Height and RowDefinition.Width are GridLength types that can be set to either
- Auto – For row or column dimensions based on the size of its children.
- Fixed pixel size, like 50 – for a 50 pixels high row or a 50 pixels wide column.
- Star sized, e.g. *, 2* or 100* – for rows or columns that consume relative available space after auto or fixed sized rows or columns, for example if the Grid is 206 pixels wide – columns with widths set to 1*, 2* and 100* will be 2px, 4px and 200px wide respectively.
- Child controls are positioned based upon the Grid.Row and Grid.Column attached properties (that default to 0 for the first row or column in the grid) as well as Grid.RowSpan and Grid.ColumnSpan for controls that span multiple rows or columns.
- Its child elements are laid out in a horizontal or vertical stack, depending on the specified Orientation property value.
- Child elements are laid out in a grid filling the first empty cell or empty cell-span of required dimensions.
- VariableSizedWrapGrid.RowSpan and VariableSizedWrapGrid.ColumnSpan attached properties allow for controls spanning multiple cells.
- Orientation property specifies whether the grid adds its items in rows or columns before wrapping.
- MaximumRowsOrColumns specifies the number of rows or columns to fill before wrapping. The default of -1 makes the number depend upon available space.
- ItemWidth and ItemHeight specifies the widths of columns and heights of rows in which child elements are laid out.
- Similar to StackPanel, but used in ItemsControls (like a ListView) – causes virtualization of its children, meaning that only the items within the viewport of a ScrollViewer are drawn, which allows to view very large numbers of items in the list.
- Similar to VariableSizedWrapGrid, but with virtualization and without row or column span support. It is usually used with GridViews.
Custom panels can be implemented to provide custom layout logic.
After the logical layout of the control on the screen, rendering transformations allow you to further adjust positioning of the controls. Note that these don’t affect the RenderSize, ActualWidth or ActualHeight properties. The positioning of controls using these properties is slightly more difficult since changes to these properties don’t affect other controls on screen, so each control needs to be configured individually. It does not need to run on a UI thread, and that makes the layout faster, so these properties are recommended for use in animations and animating:
- UIElement.RenderTransformOrigin (0..1, 0..1) – Specifies the origin of render transforms, that is the center of scale or rotation.
- RenderTransform– Allows to transform the UIElement in 2D space.
- ScaleTransform – Scales the element.
- SkewTransform – Skews the element.
- RotateTransform – Rotates the element.
- TranslateTransform – Translates (moves) the element.
- CompositeTransform – A combination of the four previous transforms in the order as above.
- TransformGroup – Allows you to combine multiple transforms in any order (order matters!).
- MatrixTransform – Allows you to apply any arbitrary matrix transformation – note that all above transformations can be combined in a single MatrixTransform.
Note that you can also apply transforms to a Brush or a Geometry:
- Projection– Allows you to apply 3D transformation to a UIElement.
- PlaneProjection – Provides properties to rotate the element as well as translate it in an element or screen space.
- Matrix3DProjection – Allows you to use an arbitrary 3D matrix transformation to an element.
- Viewbox – A control that stretches its content to available space (without affecting its computed RenderSize).
- Opacity – Specifies the alpha blending opacity of a control. Note – in Windows 8 XAML applying semi-transparency to a parent control makes all of its child controls semi-transparent too, so if they overlap you will see one through another even if both of them have Opacity set to 1 and only their parent is semitransparent. Also note that Opacity only allows you to use alpha blending – other blend modes can only be implemented using DirectX.
- Clip – Specifies the RectangleGeometry used to clip the elements’s visible fragment. Note that in Silverlight or WPF you could use non-rectangular geometry too.
The Windows 8 XAML platform provides a very large set of properties to control the format and layout of controls that are almost identical to that of WPF or Silverlight with rare, but notable exceptions. The layout logic mechanisms are extendible through custom Panel implementations and formatting can be further customized by DirectX interop.
Safari Books Online has the content you need
Below are some Windows 8 books to get you started, or you can check out all of the Windows 8 books and training videos available from Safari Books Online. You can browse the content in preview mode or you can gain access to more information with a free trial or subscription to 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 the 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.|