StackPanel — wiele elementów w oknie

Czego się dziś nauczysz

Jedno miejsce w oknie

W lekcji 01 próba wstawienia dwóch napisów do okna kończyła się błędem The property 'Content’ is set more than once. Okno ma jedną zawartość — i tak zostanie. Rozwiązaniem jest wstawienie do okna panelu, a do panelu dowolnej liczby elementów:

<Window …>
    <StackPanel>                         <!-- jedyna zawartość okna -->
        <TextBlock Text="Pierwszy"/>     <!-- a w panelu — ile chcesz -->
        <TextBlock Text="Drugi"/>
        <TextBlock Text="Trzeci"/>
    </StackPanel>
</Window>

Elementy w panelu to jego dzieci (ang. children). StackPanel ustawia je w jednym rzędzie, w kolejności z XAML.

Pionowo i poziomo

Kierunek układania ustawia Orientation: Vertical (domyślnie) — jeden pod drugim, Horizontal — jeden obok drugiego.

<StackPanel Orientation="Horizontal">
    <TextBlock Text="Pon" Width="60"/>
    <TextBlock Text="Wt"  Width="60"/>
    <TextBlock Text="Śr"  Width="60"/>
</StackPanel>

te same trzy napisy w dwóch orientacjach

Width="60" nadaje napisom stałą szerokość — dzięki temu w poziomym panelu stoją w równych kolumnach.

Odstępy: Margin

Bez odstępów elementy w panelu stykają się ze sobą, a panel dotyka krawędzi okna. Margin to odstęp na zewnątrz elementu. Ma dwa podstawowe zapisy:

Jak StackPanel mierzy elementy

Wynikają z tego dwie rzeczy, o których trzeba pamiętać:

• Nic się nie zawija ani nie przewija. Gdy elementów jest więcej, niż mieści okno, wystają poza jego krawędź i są ucinane. Przewijanie poznasz w lekcji 11.
• Nic nie „wypełnia reszty”. Element, który ma rosnąć razem z oknem, potrzebuje innego panelu (lekcja 09 i 13). StackPanel jest do elementów w naturalnym rozmiarze: formularzy, list, menu.

Panele w panelach

Panel jest elementem jak każdy inny, więc może stać w innym panelu. Pionowy panel z poziomymi w środku daje prostą tabelkę:

<StackPanel Margin="15">
    <TextBlock Text="Oceny" FontSize="18" FontWeight="Bold" Margin="0,0,0,8"/>

    <StackPanel Orientation="Horizontal" Margin="0,0,0,4">
        <TextBlock Text="Matematyka" Width="120"/>
        <TextBlock Text="5, 4, 5"/>
    </StackPanel>

    <StackPanel Orientation="Horizontal" Margin="0,0,0,4">
        <TextBlock Text="Programowanie" Width="120"/>
        <TextBlock Text="6, 5"/>
    </StackPanel>
</StackPanel>

stała szerokość pierwszej kolumny wyrównuje drugą

Elementy dodawane z kodu

Gdy dane są w tablicy, nie musisz przepisywać każdego wiersza do XAML. Daj panelowi nazwę, a w konstruktorze — pod InitializeComponent() — twórz napisy i dodawaj je do kolekcji Children panelu:

// w XAML: <StackPanel x:Name="Lista"/>

public MainWindow()
{
    InitializeComponent();

    string[] dni = { "poniedziałek", "wtorek", "środa" };

    foreach (string dzien in dni)
    {
        TextBlock napis = new TextBlock();   // jak <TextBlock …/> w XAML
        napis.Text = dzien;
        napis.Margin = new Thickness(0, 0, 0, 4);
        Lista.Children.Add(napis);           // dopiero teraz napis jest w oknie
    }
}

Inne przydatne operacje: Children.Count — liczba elementów, Children.Insert(0, element) — wstawienie na początek, Children.Clear() — usunięcie wszystkich. Klasy TextBlock, StackPanel i Orientation są w przestrzeni nazw System.Windows.Controls — dopisz using System.Windows.Controls; na górze pliku.

Plan lekcji na dziś

Nagłówek, dzisiejsza data i nagłówki kolumn są w XAML. Wiersze planu tworzy konstruktor z dwóch tablic: godzin i przedmiotów. Na dole podsumowanie liczy wiersze w panelu.

okno po uruchomieniu

<Window x:Class="Lekcja03.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Plan lekcji" Height="420" Width="360"
        WindowStartupLocation="CenterScreen">

    <StackPanel Margin="15">
        <TextBlock Text="Plan lekcji — 3 TP" FontSize="22" FontWeight="Bold"/>
        <TextBlock x:Name="Dzien" Foreground="Gray" Margin="0,0,0,12"/>

        <!-- Nagłówek tabeli: dwa napisy obok siebie -->
        <StackPanel Orientation="Horizontal" Margin="0,0,0,6">
            <TextBlock Text="Godzina" Width="110" FontWeight="Bold"/>
            <TextBlock Text="Przedmiot" FontWeight="Bold"/>
        </StackPanel>

        <!-- Pusty panel — wiersze doda konstruktor -->
        <StackPanel x:Name="Plan"/>

        <TextBlock x:Name="Podsumowanie" Margin="0,12,0,0"/>
    </StackPanel>
</Window>

using System.Windows;
using System.Windows.Controls;

namespace Lekcja03;

public partial class MainWindow : Window
{
    private string[] godziny = { "8:00–8:45", "8:55–9:40", "9:50–10:35", "10:55–11:40", "11:50–12:35", "12:45–13:30" };
    private string[] przedmioty = { "Matematyka", "Programowanie", "Programowanie", "Język polski", "Wychowanie fizyczne", "Język angielski" };

    public MainWindow()
    {
        InitializeComponent();

        Dzien.Text = DateTime.Now.ToString("dddd, d MMMM");

        for (int i = 0; i < godziny.Length; i++)
        {
            // Jeden wiersz = poziomy StackPanel z dwoma napisami
            StackPanel wiersz = new StackPanel();
            wiersz.Orientation = Orientation.Horizontal;
            wiersz.Margin = new Thickness(0, 0, 0, 4);

            TextBlock godzina = new TextBlock();
            godzina.Text = godziny[i];
            godzina.Width = 110;

            TextBlock przedmiot = new TextBlock();
            przedmiot.Text = przedmioty[i];

            wiersz.Children.Add(godzina);
            wiersz.Children.Add(przedmiot);
            Plan.Children.Add(wiersz);
        }

        Podsumowanie.Text = $"Lekcji: {Plan.Children.Count}, koniec o {godziny[godziny.Length - 1].Split('–')[1]}";
    }
}

Co dzieje się po kolei

• Jedyną zawartością okna jest pionowy StackPanel z marginesem 15 — cała treść jest odsunięta od krawędzi.
• Nagłówek kolumn to poziomy panel. Napis „Godzina” ma Width="110", tak samo jak godziny w wierszach — dzięki temu przedmioty zaczynają się w jednej linii.
• <StackPanel x:Name="Plan"/> jest w XAML pusty. Stoi między nagłówkiem a podsumowaniem, więc wiersze dodane z kodu pojawią się właśnie tam.
• Tablice godziny i przedmioty są polami klasy. Element o indeksie i w jednej odpowiada elementowi o tym samym indeksie w drugiej.
• Pętla for idzie po indeksach. W każdym obiegu powstaje nowy poziomy panel i dwa nowe napisy — każdy wiersz to osobne obiekty.
• wiersz.Children.Add wkłada napisy do wiersza, a Plan.Children.Add(wiersz) — wiersz do planu. Kolejność dodawania to kolejność na ekranie.
• Podsumowanie liczy wiersze przez Plan.Children.Count, a godzinę końca bierze z ostatniej godziny po znaku „–” (Split('–')[1]).
• DateTime.Now.ToString("dddd, d MMMM") daje polską nazwę dnia i miesiąca, np. „czwartek, 8 października”.

Zestawienie elementów

Zanim utkniesz

Zadania

Każde zadanie wykonaj w nowym projekcie Aplikacja WPF. Używaj tylko napisów i paneli — przyciski poznasz w następnej lekcji. Wskazówkę otwórz dopiero wtedy, gdy utkniesz.

Co trzeba zapamiętać

• Okno ma jedną zawartość — wstaw do niego panel, a do panelu dowolnie wiele elementów.
• StackPanel układa dzieci w rzędzie: Vertical (domyślnie) albo Horizontal.
• W kierunku układania element dostaje tylko tyle miejsca, ile potrzebuje; nic się nie zawija ani nie przewija.
• Margin — odstęp na zewnątrz: jedna liczba albo cztery (lewo, góra, prawo, dół).
• Panele można zagnieżdżać; stała szerokość napisów wyrównuje kolumny.
• Z kodu: new TextBlock(), ustawienie właściwości i Children.Add — zawsze pod InitializeComponent().

Dokumentacja: Microsoft Learn — klasa StackPanel.