Składnia XAML i TextBlock

Czego się dziś nauczysz

Znacznik to obiekt, atrybut to właściwość

XAML (eXtensible Application Markup Language) to krótszy zapis tworzenia obiektów. Każdy znacznik tworzy obiekt klasy o tej samej nazwie, każdy atrybut ustawia jedną właściwość. Te dwa zapisy robią dokładnie to samo:

<TextBlock Text="Witaj" FontSize="20" Foreground="DarkBlue"/>

TextBlock napis = new TextBlock();    // <TextBlock
napis.Text = "Witaj";                 //   Text="Witaj"
napis.FontSize = 20;                  //   FontSize="20"
napis.Foreground = Brushes.DarkBlue;  //   Foreground="DarkBlue"/>
Content = napis;                      // włożenie napisu do okna

Zasada „znacznik = new, atrybut = przypisanie” tłumaczy każdy błąd w XAML: jeśli klasa nie ma danej właściwości w C#, to atrybut o tej nazwie też nie zadziała. W kursie wygląd okna opisujemy w XAML, bo od razu widać w nim strukturę. Kolory w C# (Brushes) dokładnie poznasz w lekcji 06 — tu wystarczy, że widzisz odpowiednik.

Zasady zapisu

Jak XAML czyta wartości

Każdy atrybut to tekst, ale właściwości mają różne typy. XAML zamienia tekst na właściwy typ:

Znaki <, >, & i " mają w XAML znaczenie specjalne. W tekście zapisz je jako encje: <, >, &, ". Przykład: Text="Ben & Jerry" wyświetli „Ben & Jerry”. Nową linię w atrybucie zapiszesz encją 
.

Właściwości TextBlock

Fragmenty tekstu w jednym napisie

Atrybut Text daje jeden wygląd dla całego napisu. Gdy część tekstu ma być pogrubiona albo w innym kolorze, zamiast atrybutu wpisz zawartość między znacznikami <TextBlock> i </TextBlock>:

<TextBlock FontSize="16" TextWrapping="Wrap">
    Sprawdzian z <Bold>matematyki</Bold> odbędzie się
    <Run Text="w piątek" Foreground="Red" FontWeight="Bold"/>.
    <LineBreak/>
    <Italic>Przynieś kalkulator.</Italic>
</TextBlock>

jeden TextBlock, cztery różne fragmenty

Właściwość zapisana jako element

Atrybut przyjmuje tylko tekst. Gdy wartość jest złożonym obiektem — np. tłem, którego kolor płynnie się zmienia — zapisujesz właściwość jako element w postaci <Klasa.Właściwość>:

<Window …>
    <Window.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="LightYellow" Offset="0"/>
            <GradientStop Color="Orange" Offset="1"/>
        </LinearGradientBrush>
    </Window.Background>

    <TextBlock Text="Ogłoszenie"/>
</Window>

Kropka w nazwie znacznika oznacza: „to nie jest nowy obiekt, tylko właściwość Background obiektu Window”. LinearGradientBrush to tło z przejściem kolorów: StartPoint i EndPoint wyznaczają kierunek (0,0 — lewy górny róg, 0,1 — lewy dolny, czyli z góry na dół), a każdy GradientStop to kolor w miejscu Offset od 0 do 1.

Zapis jako atrybut Background="Orange" i jako element to dwa sposoby ustawienia tej samej właściwości. Nie wolno użyć obu naraz.

Ogłoszenie kółka programistycznego

Całe ogłoszenie to jeden TextBlock złożony z fragmentów o różnym wyglądzie. Tło okna to gradient od jasnożółtego do pomarańczowego, a data „stan na” ustawia się sama przy uruchomieniu.

okno po uruchomieniu

<Window x:Class="Lekcja02.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Ogłoszenie" Height="360" Width="460"
        WindowStartupLocation="CenterScreen">

    <!-- Właściwość zapisana jako element: tło z gradientem -->
    <Window.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="LightYellow" Offset="0"/>
            <GradientStop Color="Orange" Offset="1"/>
        </LinearGradientBrush>
    </Window.Background>

    <!-- Jeden TextBlock, a w nim fragmenty o różnym wyglądzie -->
    <TextBlock TextAlignment="Center" TextWrapping="Wrap"
               HorizontalAlignment="Center" VerticalAlignment="Center"
               FontSize="16">
        <Run Text="KÓŁKO PROGRAMISTYCZNE" FontSize="26" FontWeight="Bold" Foreground="DarkRed"/>
        <LineBreak/>
        <Italic>Nauczymy Cię pisać aplikacje okienkowe</Italic>
        <LineBreak/>
        <LineBreak/>
        <Run Text="Każdy czwartek, sala 21, godz. 14:30"/>
        <LineBreak/>
        <Bold>Zapisy u wychowawcy</Bold>
        <LineBreak/>
        <LineBreak/>
        <Run Text="Stan na:" Foreground="Gray"/>
        <Run x:Name="Data" Foreground="Gray"/>
    </TextBlock>
</Window>

using System.Windows;

namespace Lekcja02;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        // Run też może mieć nazwę i zmieniać się z kodu
        Data.Text = DateTime.Now.ToString("dd.MM.yyyy");
    }
}

Co dzieje się po kolei

• <Window.Background> ustawia tło okna. Gradient biegnie z góry (0,0) na dół (0,1): na górze jasnożółty, na dole pomarańczowy.
• Jedyną zawartością okna jest TextBlock. Jego wspólne ustawienia — wyśrodkowanie, zawijanie, rozmiar 16 — dotyczą wszystkich fragmentów, chyba że fragment ma własne.
• Pierwszy Run ma własny FontSize="26", kolor i pogrubienie — dlatego tytuł jest większy od reszty.
• Każdy <LineBreak/> to nowa linia. Dwa pod rząd dają pustą linię odstępu.
• <Italic> i <Bold> zawierają zwykły tekst między znacznikami — nie potrzebują Run.
• Ostatni Run ma nazwę Data. Konstruktor wpisuje do niego dzisiejszą datę metodą ToString("dd.MM.yyyy").
• Między „Stan na:” a datą widać spację, choć nie ma jej w żadnym Text — to przejście do nowej linii w kodzie XAML między dwoma Run.

Zestawienie elementów

Zanim utkniesz

Zadania

Każde zadanie wykonaj w nowym projekcie Aplikacja WPF. Okno ma jedno miejsce na zawartość — w tej lekcji wszystko mieści się w jednym TextBlock. Wskazówkę otwórz dopiero wtedy, gdy utkniesz.

TextBlock baner = new TextBlock();
baner.Text = "Promocja: drugi zeszyt gratis!";
baner.FontSize = 28;
baner.FontWeight = FontWeights.Bold;
baner.FontStyle = FontStyles.Italic;
baner.Foreground = Brushes.Crimson;
baner.TextWrapping = TextWrapping.Wrap;
baner.TextAlignment = TextAlignment.Center;
baner.VerticalAlignment = VerticalAlignment.Center;

<Window x:Class="Plakat.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Plakat" Height=300 Width="400" Background="White">
    <window.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="White" Offset="0"/>
            <GradientStop Color="LightGreen" Offset="1"/>
        </LinearGradientBrush>
    </window.Background>
    <TextBlock Text="Dzień Ziemi" FontSize="30" Opacity="0,8"
               HorizontalAlignment="Center" VerticalAlignment="Center">
        <Bold>22 kwietnia & cała szkoła</Bold>
    </TextBlock>
</Window>

Co trzeba zapamiętać

• Znacznik XAML tworzy obiekt, atrybut ustawia jego właściwość — wszystko z XAML da się zrobić w C#.
• XAML rozróżnia wielkość liter, wymaga zamykania znaczników i cudzysłowów.
• Ułamki w XAML zawsze z kropką; znaki < > & " zapisuj encjami.
• Napis z fragmentami: zawartość TextBlock z Run, Bold, Italic, LineBreak.
• Enter w kodzie XAML między fragmentami to spacja, nie nowa linia.
• Złożoną wartość zapisujesz jako element <Klasa.Właściwość>, np. gradient w <Window.Background>.

Dokumentacja: Microsoft Learn — XAML w WPF, klasa TextBlock.