Basic XAML

I det föregående kapitlet, talade vi om vad XAML är och vad du använder det till, men hur skapar du en kontroller i XAML? Som du kommer att se från nästa exempel, är det lika enkelt att skapa en kontroll i XAML, som att skriva dess namn, omgivet av vinkelparenteser. Till exempel ser en knapp (Button) ut så här:

<Button>

XAML taggar måste avslutas, antingen genom att skriva avslutningstaggen eller genom att sätta ett divisionstecken i slutet av starttaggen:

<Button></Button>

Eller

<Button />

Ett stort antal kontroller tillåter att du sätter in innehåll mellan start- och sluttaggar, vilket då blir innehållet i kontrollern. Till exempel, knappkontrollen, tillåter att man specificerar texten som visas på den mellan start- och sluttaggarna:

<Button>A button</Button>

HTML är inte skiftelägeskänslig, men XAML är det, eftersom kontrollnamnet måste kopplas mot en typ i .NET-ramverket. Samma gäller för attributnamn, vilka kopplas till kontrollerns properties. Här är en knapp där vi har definierat ett antal properties, genom att lägga till attribut till taggen:

<Button FontWeight="Bold" Content="A button" />

Vi sätter FontWeight propertyn, för att få fetstil, och sedan sätter vi Content propertyn, vilket är samma sak som att skriva textem mellan start- och sluttaggen. Men alla attribut till en kontroller kan också definieras så här, så att de dyker upp som barntaggar till huvud kontrollen, genom att använda punktnotation:

<Button>
    <Button.FontWeight>Bold</Button.FontWeight>
    <Button.Content>A button</Button.Content>
</Button>

Resultatet är exakt samma som det ovanför, så i detta fallet handlar det om syntax och inget annat. Hur som helst, flertalet kontroller tillåter annat innehåll än text, till exempel andra kontroller. Här är ett exempel där vi har text i olika färger på samma knapp genom att använda flertalet TextBlock kontroller inuti Button:

<Button>
    <Button.FontWeight>Bold</Button.FontWeight>
    <Button.Content>
        <WrapPanel>
            <TextBlock Foreground="Blue">Multi</TextBlock>
            <TextBlock Foreground="Red">Color</TextBlock>
            <TextBlock>Button</TextBlock>
        </WrapPanel>
    </Button.Content>
</Button>

The Content property only allows for a single child element, so we use a WrapPanel to contain the differently colored blocks of text. Panels, like the WrapPanel, plays an important role in WPF and we will discuss them in much more details later on - for now, just consider them as containers for other controls.

The exact same result can be accomplished with the following markup, which is simply another way of writing the same:

<Button FontWeight="Bold">
    <WrapPanel>
        <TextBlock Foreground="Blue">Multi</TextBlock>
        <TextBlock Foreground="Red">Color</TextBlock>
        <TextBlock>Button</TextBlock>
    </WrapPanel>
</Button>

Kod eller XAML

Förhoppningsvis, visar de ovanstående exemplen att det är ganska lätt att skriva XAML-kod, men med ett antal olika sätt att göra det på, och om du tycker att i exemplet ovan är det mycket kod för att få en knap med text i olika färger, jämför det då med att göra exakt samma sak i C#:

Button btn = new Button();
btn.FontWeight = FontWeights.Bold;

WrapPanel pnl = new WrapPanel();

TextBlock txt = new TextBlock();
txt.Text = "Multi";
txt.Foreground = Brushes.Blue;
pnl.Children.Add(txt);

txt = new TextBlock();
txt.Text = "Color";
txt.Foreground = Brushes.Red;
pnl.Children.Add(txt);

txt = new TextBlock();
txt.Text = "Button";
pnl.Children.Add(txt);

btn.Content = pnl;
pnlMain.Children.Add(btn);

Naturligtvis kunde ovanstående exempel ha skrivits mindre explicit och använda enklare syntax, men jag tror ändå att påståendet att XAML är ett ganska kortfattat och koncist sätt att beskriva interface.