XAML basics in VB.NET

Encode Quick Response Code in VB.NET XAML basics

XAML is a declarative language that enables you to create and initialize .NET objects in XML. Everything you can do in XAML you can do in code. But to make the most of the

platform and its tooling, you ll want to embrace the code-plus-markup philosophy rather than go with a 100 percent code solution. The XAML format enables you to easily visualize a hierarchy of elements while separating presentation from code. This separation is possible because each XAML element maps to a .NET type. Each attribute within an element corresponds to a property within a .NET type. This concept is illustrated in figure 2.1. Figure 2.1 shows three code equivalents of an XAML segment. Note that the TextBlock element in the XAML code corresponds to an initialization statement within the code segments. This initialization occurs because, each time an element is created in XAML, the corresponding .NET type s default constructor is called behind the scenes. To understand the structure of an XAML file, it s important to understand the representation and use of objects, namespaces, properties, and events.

tb = wpf.TextBlock() tb.Text = "Hello, World" tb.FontFamily = "Verdana"

Dim tb As New TextBlock tb.Text = "Hello, World" tb.FontFamily = "Verdana"

TextBlock tb = new TextBlock(); tb.Text = "Hello, World"; tb.FontFamily = "Verdana";

Objects (or instances of types) are represented in XAML using XML elements. The elements have the same name as the associated class and are considered instantiated upon declaration in the markup.

NOTE Any type you use in XAML must have a default (parameterless) constructor. Silverlight XAML currently has no provision for passing arguments into a constructor or an initialization function, so you ll need to make sure your types can be initialized using defaults and properties alone.

Certain types of objects may contain one or more of other nested objects. For example, a button may contain a single content object, which itself may contain one or more other objects. In listing 2.1, the UserControl contains the Grid, the Grid contains the Button, and the Button contains a StackPanel, which is a panel that by default lays its children out in a vertical list. The StackPanel itself contains three TextBlock elements.

Result:

XAML basics XAML:

<UserControl x:Class="XamlElements.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> Nested Grid <Grid x:Name="LayoutRoot"> <Button Height="100" Width="150"> Button nested in Grid <StackPanel> <TextBlock Text="First Line" /> StackPanel Three inside Button <TextBlock Text="Second Line" /> TextBlocks in StackPanel <TextBlock Text="Third Line" /> </StackPanel> </Button> </Grid> </UserControl>

The UserControl and Button are both content controls, a concept we ll discuss in greater detail in chapter 10. For now, it s important to understand that a content control may only have one direct child element, typically a panel that holds other elements. The x:Name and x:Class properties are part of the namespace specified by the xmlns:x statement. More on that in a moment The Grid and StackPanel are both Panels, which is a type that has a Children collection to allow multiple contained elements. We ll discuss panels in chapter 7. The ability to flexibly nest objects permits a composition approach to UI design. Rather than having to purchase or custom-code a button control that allows, say, three lines of text and an image, you can simply compose those into an appropriate layout panel and make that panel the content of the button control. The nesting of objects is part of what gives us an object tree. We ll cover that in more detail shortly. Now that we ve covered the basic structure of an XAML file, let s talk about how you differentiate your SuperButton control from my SuperButton control, even though we used the same control name: namespaces.

Namespaces A namespace provides a way of organizing related objects within a common grouping. These groupings, or namespaces, give you a way to define where the compiler should look for a type. Namespaces in XAML are similar to namespaces in other languages such as C# and Java. To specify where to look, you reference a namespace within an element of an XAML file, typically the root or outermost element. Listing 2.2 illustrates the use of the two default namespaces.