Some insight to how XAML and layout works in WPF apps

1. Technology Services
WPF – XAML & Layout
www.sungard.com/sts

2. Agenda
 XAML
 Introduction
 XAML Basics
 Inside XAML
 Loading and compiling XAML
 Layout of WPF Application
 History and Philosophy
 Layout Process and containers
 Types of Layout
 Properties

3. XAML - Intorduction
• XAML – Extensible Application Markup Language pronounced as ―zammel‖
used to instantiate .NET objects.
• Case-Sensitive
• Origin of it is from idea to separate the graphical portion from the underlying
code.
• You can create a basic user interface with Visual Studio and then hand it off to
a crack design team that can polish it up with custom graphics in Expression
Blend. In fact, this ability to integrate the workflow between developers and
designers is one of the key reasons that Microsoft created XAML.
• Developers can use this with Visual Studio and designers can play with in tools
like Expression blend.

4. XAML - Intorduction
Limitation before XAML
• Each graphical element (background, button, and so on) needs to be exported
as a separate bitmap. That limits the ability to combine bitmaps and use
dynamic effects such as anti-aliasing, transparency, and shadows.
• A fair bit of user interface logic needs to be embedded in the code by the
developer. This includes button sizes, positioning, mouseover effects, and
animations. The graphic designer can’t control any of these details.
• There’s no intrinsic connection between the different graphical elements, so it’s
easy to end up with an unmatched set of images. Tracking all these items adds
complexity.
• Bitmaps can’t be resized without compromising their quality. For that reason,
a bitmap-based user interface is resolution-dependent. That means it can’t
accommodate large monitors and high-resolution displays, which is a major
violation of the WPF design philosophy.

5. XAML Subsets
• WPF XAML encompasses the elements that describe WPF content, such as
vector graphics, controls, and documents. Currently, it’s the most significant
application of XAML.
• XPS XAML is the part of WPF XAML that defines an XML representation for
formatted electronic documents. It’s been published as the separate XML
Paper Specification (XPS) standard.
• Silverlight X XAML is a subset of WPF XAML that’s intended for Silverlight
applications. Silverlight is a cross-platform browser plug-in that allows you to
create rich web content with two-dimensional graphics, animation, and audio
and video.
• WF XAML encompasses the elements that describe Windows Workflow
Foundation (WF) content.

6. XAML Compilation
• XAML is based on XML formats and is not compact but it needs to be fast.
• So comes with BAML(Binary Application Markup Language). It is binary
representation of XAML.
• When you compile a WPF application in Visual Studio, all your XAML files are
converted into BAML, and that BAML is then embedded as a resource into the
final DLL or EXE assembly.
• BAML is tokenized, which means lengthier bits of XAML are replaced with
shorter tokens.
• So not only BAML is significantly smaller, but it’s also optimized in a way that
makes it faster to parse at runtime.

7. Is it worth spending time for XAML
• Wiring up event handlers.
• Writing data binding expressions
• Defining resources
• Defining animations
• Defining control templates
So, these are some tasks which are far easier to accomplish—only with
handwritten XAML.

8. XAML Basics
• Every element in a XAML document maps to an instance of a .NET class. The
name of the element matches the name of the class exactly.
• As with any XML document, you can nest one element inside another. As you’ll
see, XAML gives every class the flexibility to decide how it handles this
situation.
• You can set the properties of each class through attributes. However, in some
situations an attribute isn’t powerful enough to handle the job. In these cases,
you’ll use nested tags with a special syntax.
Show basic XAML example.

9. XAML Basics
• XAML Namespace
o xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
is the core WPF namespace. It encompasses all the WPF classes, including
the controls you use to build user interfaces. In this example, this namespace is
declared without a namespace prefix, so it becomes the default namespace for
the entire document.
o xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
is the XAML namespace. It includes various XAML utility features that allow you to
influence how your document is interpreted. This namespace is mapped to the prefix x.
That means you can apply it by placing the namespace prefix before the element name
(as in <x x:ElementName>).
o Code-Behind class
<Window x:Class="WindowsApplication1.Window1"
o InitializeComponent() Method

10. XAML Basics
• XAML Properties
• Simple Properties – Textbox properties type conversions
• Complex Properties – Parent.PropertyName, code behind
• Markup Extensions – in case you may want to set a property value dynamically by
binding it to a property in another control or not possible to hard code.
The x prefix indicates that the StaticExtension is found in one of the XAML
namespaces.
• Attached Properties - properties that may apply to several controls but are defined in a
different class. Format is DefiningType.PropertyName.
• Attached properties aren’t really properties at all. They’re actually translated into method
calls. The XAML parser calls the static method that has this form:
DefiningType.SetPropertyName(). For example, parser calls Grid.SetRow().
• In fact, the Grid.SetRow() method is actually a shortcut that’s equivalent to calling
DependencyObject.SetValue() method, as shown here:
txtQuestion.SetValue(Grid.RowProperty, 0)

11. Inside XAML
• Nesting Elements - XAML allows each element to decide how it deals with
nested elements. This interaction is mediated through one of three
mechanisms that are evaluated in this order:
• If the parent implements IList, the parser calls IList.Add() and passes in the
child.
• If the parent implements IDictionary, the parser calls IDictionary.Add() and
passes in the child. When using a dictionary collection, you must also set the
x:Key attribute to give a key name to each item.
• If the parent is decorated with the ContentProperty attribute, the parser uses
the child to set that property.
• . period is critical to recognise this fact.
• Grid is not a collection. So, it does not implement a Ilist or Idictionary.

12. Inside XAML
• Content Property: the ContentProperty attribute is applied to the Panel class,
from which the Grid derives, and looks like this:
[ContentPropertyAttribute("Children")]
public abstract class Panel
Grid and textbox both use this content property in different ways.
Note As a general rule of thumb, all controls that derive from ContentControl
allow a single nested element.
All controls that derive from ItemsControl allow a collection of items that map to
some part of the control (such as a list of items or a tree of nodes).
All controls that derive from Panel are containers that are used to organize
groups of controls. The ContentControl, ItemsControl, and Panel base classes all
use the ContentProperty attribute.
• Events

13. Inside XAML
• Using Types from Other Namespaces- To use a class that isn’t defined in
one of the WPF namespaces, you need to map the .NET namespace to an
XML namespace. XAML has a special syntax for doing this, which looks like
this: xmlns:Prefix="clr-namespace:Namespace;assembly=AssemblyName"
• Prefix. This is the XML prefix you want to use to indicate that namespace in
your XAML markup. For example, the XAML language uses the x prefix.
• Namespace. This is the fully qualified .NET namespace name.
• AssemblyName. This is the assembly where the type is declared, without the
.dll extension. This assembly must be referenced in your project.
• For example, here’s how you would gain access to the basic types in the
System namespace and map them to the prefix sys:
• xmlns: sys="clr-namespace:System;assembly=mscorlib"

14. Inside XAML
• Loading and compiling of XAML – 3 type
• Code-only: This is the traditional approach used in Visual Studio for Windows
Forms applications. It generates a user interface through code statements.
Advantage – customization in form with DB
• Code and uncompiled markup (XAML). This is a specialized approach that
makes sense in certain scenarios where you need highly dynamic user
interfaces. You load part of the user interface from a XAML file at runtime using
the XamlReader class from the System.Windows.Markup namespace.
• Code and compiled markup (BAML). This is the preferred approach for WPF
and the one that Visual Studio supports. You create a XAML template for each
window, and this XAML is compiled into BAML and embedded in the final
assembly. At runtime the compiled BAML is extracted and used to regenerate
the user interface.

15. XAML 2009
• New standard released
• Still needs to incorporated in next release of WPF
• Limitation will be removed like
o Built in types
o References(one element to refer to other)
o Advanced object creation(Argument constructor)

16. Layout
• History
• Net 1.x – Fixed layout with Anchoring and Docking
• Net 2.0 – Flow Layout Panel and Table Layout Panel
• WPF – Flow based layout as standard with support to coordinates. In WPF, you
shape layout using different containers. Each container has its own layout
logic—some stack elements, others arrange them in a grid of invisible cells,
and so on.

17. Layout
• The WPF Layout Philosophy
• A WPF window can hold only a single element. To fit in more than one element
and create a more practical user interface, you need to place a container in
your window and then add other elements to that container.
• the ―ideal‖ WPF window follows a few key principles:
o Elements (such as controls) should not be explicitly sized.
o Elements do not indicate their position with screen coordinates.
o Layout containers ―share‖ the available space among their children.
o Layout containers can be nested.

18. Layout
• The Layout Process
• WPF layout takes place in two stages: a measure stage and an arrange stage.
In the measure stage, the container loops through its child elements and asks
them to provide their preferred size. In the arrange stage, the container places
the child elements in the appropriate position.
• The Layout Containers
• All the WPF layout containers are panels that derive from the abstract
System.Windows.Controls.Panel class.The Panel class adds a small set of
members, including the three public properties: Background, Children,
IsItemsHost

19. Layout

20. Layout – Core Layout Panels
• StackPanel - Places elements in a horizontal or vertical stack. This layout
container is typically used for small sections of a larger, more complex window.
• WrapPanel - Places elements in a series of wrapped lines. In horizontal
orientation, the WrapPanel lays items out in a row from left to right and then
onto subsequent lines. In vertical orientation, the WrapPanel lays out items in a
top-to-bottom column and then uses additional columns to fit the remaining
items.
• DockPanel - Aligns elements against an entire edge of the container.
• Grid - Arranges elements in rows and columns according to an invisible table.
This is one of the most flexible and commonly used layout containers.
• UniformGrid - Places elements in an invisible table but forces all cells to have
the same size. This layout container is used infrequently.
• Canvas - Allows elements to be positioned absolutely using fixed coordinates.
This layout container is the most similar to traditional Windows Forms, but it
doesn’t provide anchoring or docking features. As a result, it’s an unsuitable
choice for a resizable window unless you’re willing to do a fair bit of work.

21. Layout - Properties
• HorizontalAlignment - Determines how a child is positioned inside a layout
container when there’s extra horizontal space available. You can choose
Center, Left, Right, or Stretch.
• VerticalAlignment - Determines how a child is positioned inside a layout
container when there’s extra vertical space available. You can choose Center,
Top, Bottom, or Stretch.
• Margin - Adds a bit of breathing room around an element. The Margin property
is an instance of the System.Windows.Thickness structure, with separate
components for the top, bottom, left, and right edges.
• MinWidth and MinHeight - Sets the minimum dimensions of an element. If an
element is too large for its layout container, it will be cropped to fit.
• MaxWidth and MaxHeight - Sets the maximum dimensions of an element. If the
container has more room available, the element won’t be enlarged beyond
these bounds, even if the HorizontalAlignment and VerticalAlignment properties
are set to Stretch.

22. Layout - Properties
• Width and Height - Explicitly sets the size of an element. This setting overrides
a Stretch value for the HorizontalAlignment or VerticalAlignment properties.
However, this size won’t be honored if it’s outside of the bounds set by the
MinWidth, MinHeight, MaxWidth, and MaxHeigh.
• Note - Think twice before setting an explicit size in WPF. In a well-designed
layout, it shouldn’t be necessary. If you do add size information, you risk
creating a more brittle layout that can’t adapt to changes (such as different
languages and window sizes) and truncates your content.

23. Layout
• Layout rounding