Wpf-Xaml And Layout Basics


Published on

Some insight to how XAML and layout works in WPF apps

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Wpf-Xaml And Layout Basics

  1. 1. Technology Services WPF – XAML & Layout www.sungard.com/sts
  2. 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. 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. 4. XAML - IntorductionLimitation 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. 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. 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. 7. Is it worth spending time for XAML• Wiring up event handlers.• Writing data binding expressions• Defining resources• Defining animations• Defining control templatesSo, these are some tasks which are far easier to accomplish—only withhandwritten XAML.
  8. 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. 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. 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 XAMLnamespaces.• 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. 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. 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 PanelGrid and textbox both use this content property in different ways.Note As a general rule of thumb, all controls that derive from ContentControlallow a single nested element.All controls that derive from ItemsControl allow a collection of items that map tosome 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 organizegroups of controls. The ContentControl, ItemsControl, and Panel base classes alluse the ContentProperty attribute.• Events
  13. 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. 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. 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. 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. 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. 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. 19. Layout
  20. 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. 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. 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. 23. Layout• Layout rounding