Wpf-Xaml And Layout Basics
0 likes2,275 views
The document discusses XAML and layout in WPF applications. It provides an overview of XAML including its introduction, basics, compilation, and subsets. It also covers the different types of layout in WPF including the layout process, core layout panels like stack panel and grid, and important layout properties.
![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](https://image.slidesharecdn.com/wpfxamlandlayoutbasics-13400834867397-phpapp02-120619002720-phpapp02/85/Wpf-Xaml-And-Layout-Basics-12-320.jpg)
Wpf-Xaml And Layout Basics
- 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 cant control any of these details. Theres no intrinsic connection between the different graphical elements, so its easy to end up with an unmatched set of images. Tracking all these items adds complexity. Bitmaps cant be resized without compromising their quality. For that reason, a bitmap-based user interface is resolution-dependent. That means it cant 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, its the most significant application of XAML. XPS XAML is the part of WPF XAML that defines an XML representation for formatted electronic documents. Its been published as the separate XML Paper Specification (XPS) standard. Silverlight X XAML is a subset of WPF XAML thats 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 its 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 accomplishonly 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 youll 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 isnt powerful enough to handle the job. In these cases, youll 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 arent really properties at all. Theyre 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 thats 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 isnt 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, heres 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 logicsome 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 doesnt provide anchoring or docking features. As a result, its an unsuitable choice for a resizable window unless youre willing to do a fair bit of work.
- 21. Layout - Properties HorizontalAlignment - Determines how a child is positioned inside a layout container when theres extra horizontal space available. You can choose Center, Left, Right, or Stretch. VerticalAlignment - Determines how a child is positioned inside a layout container when theres 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 wont 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 wont be honored if its 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 shouldnt be necessary. If you do add size information, you risk creating a more brittle layout that cant adapt to changes (such as different languages and window sizes) and truncates your content.
- 23. Layout Layout rounding