(podstawa programowa INF.04 – projektowanie i tworzenie interfejsu użytkownika aplikacji)

1. Wprowadzenie

Każda aplikacja, nawet najprostsza, potrzebuje okna i rozmieszczonych elementów: przycisków, pól tekstowych, etykiet, menu itp.
Samo dodanie przycisków to za mało — użytkownik musi się w tym łatwo odnaleźć.
Dlatego w aplikacjach używa się layoutów (układów) i paneli, które pomagają uporządkować interfejs.

Można powiedzieć, że:

Layout to sposób ułożenia mebli w pokoju, a panele to szafki, w których trzymasz przyciski i pola formularza.

W tej lekcji nauczysz się:

jak działają układy i panele,
jak rozmieścić kontrolki w oknie,
jak użyć grup, menu i podziałów,
oraz jak to wygląda w WPF i Windows Forms.

CZĘŚĆ A – Layouty i układy w WPF

2. Co to są layouty w WPF?

Layouty to specjalne kontrolki kontenerowe, które rozmieszczają inne elementy.
Zamiast przesuwać przyciski ręcznie, mówisz panelowi „ułóż wszystko pionowo” albo „podziel okno na dwie kolumny”.

Dzięki temu:

interfejs dopasowuje się do rozmiaru okna,
nie musisz liczyć pikseli,
układ jest czytelny i elastyczny.

3. Główne panele układu w WPF

Nazwa panelu	Opis działania	Przykład użycia
Grid	Dzieli okno na wiersze i kolumny. Najczęściej używany panel.	Formularze, układ kolumnowy.
StackPanel	Ustawia elementy w pionie lub poziomie.	Listy, grupy przycisków.
WrapPanel	Ustawia elementy obok siebie i „zawija” w nowy rząd, gdy brak miejsca.	Przyciski, miniatury, kafelki.
DockPanel	Przypina elementy do krawędzi okna (góra, dół, lewo, prawo).	Paski narzędzi, menu, status.
Canvas	Umożliwia ręczne ustawienie pozycji (X,Y).	Rysowanie, gry, diagramy.
GroupBox	Ramka z nagłówkiem, w środku inny panel.	Grupowanie pól formularza.

4. Przykład – Formularz użytkownika w WPF

MainWindow.xaml

<Window x:Class="UkładyApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Formularz użytkownika" Height="300" Width="400">

    <DockPanel>
        <!-- Pasek menu -->
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="_Plik">
                <MenuItem Header="Nowy"/>
                <MenuItem Header="Zapisz"/>
                <Separator/>
                <MenuItem Header="Zamknij"/>
            </MenuItem>
            <MenuItem Header="_Pomoc">
                <MenuItem Header="O programie"/>
            </MenuItem>
        </Menu>

        <!-- Główna sekcja -->
        <GroupBox Header="Dane użytkownika" Margin="10">
            <StackPanel Margin="10">
                <StackPanel Orientation="Horizontal">
                    <Label Content="Imię:" Width="70"/>
                    <TextBox Width="200" x:Name="txtImie"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal" Margin="0,5,0,0">
                    <Label Content="Nazwisko:" Width="70"/>
                    <TextBox Width="200" x:Name="txtNazwisko"/>
                </StackPanel>
                <WrapPanel HorizontalAlignment="Center" Margin="0,10,0,0">
                    <Button Content="Zapisz" Width="100" Margin="5"/>
                    <Button Content="Wyczyść" Width="100" Margin="5"/>
                </WrapPanel>
            </StackPanel>
        </GroupBox>
    </DockPanel>
</Window>

Efekt:
Okno z menu, ramką „Dane użytkownika” i dwoma przyciskami ułożonymi obok siebie.

5. Cechy i właściwości paneli WPF

Właściwość	Opis
`Orientation`	Kierunek elementów (`Horizontal`, `Vertical`).
`Margin`	Odstęp od innych elementów.
`Padding`	Wewnętrzny odstęp.
`DockPanel.Dock`	Przyklejenie elementu do krawędzi okna.
`HorizontalAlignment`	Wyrównanie w poziomie (`Left`, `Right`, `Center`, `Stretch`).
`VerticalAlignment`	Wyrównanie w pionie.
`Header`	Tytuł w GroupBox lub MenuItem.
`Grid.RowDefinitions` / `Grid.ColumnDefinitions`	Podział siatki na wiersze i kolumny.

CZĘŚĆ B – Układy i panele w Windows Forms

6. Panele w Windows Forms

W Windows Forms rozmieszczenie elementów opiera się na panelach i kontenerach.
Tutaj nie używa się XAML, tylko projektanta graficznego w Visual Studio.

Nazwa	Działanie	Zastosowanie
Panel	Kontener dla innych elementów.	Grupowanie pól i przycisków.
GroupBox	Ramka z tytułem.	Sekcje formularzy.
FlowLayoutPanel	Ustawia elementy jeden po drugim (jak StackPanel).	Paski przycisków.
TableLayoutPanel	Dzieli przestrzeń w wiersze i kolumny (jak Grid).	Formularze z równymi kolumnami.
SplitContainer	Dzieli okno na dwie części z możliwością zmiany szerokości.	Panel boczny / główny.
MenuStrip	Tworzy menu górne.	Nawigacja i polecenia.
ToolStrip	Pasek narzędzi z ikonami.	Skróty do funkcji.

7. Przykład – Okno użytkownika w Windows Forms

Kroki w Visual Studio:

Utwórz nowy projekt Windows Forms App (.NET).
Z Toolboxa przeciągnij na formę:
- MenuStrip,
- GroupBox,
- FlowLayoutPanel,
- Dwa TextBoxy i dwa Buttony.
Ustaw nazwy:
- txtImie, txtNazwisko, btnZapisz, btnWyczysc.
W MenuStrip dodaj: Plik → Nowy, Zapisz, Zamknij.

Kod Form1.cs

using System;
using System.Windows.Forms;

namespace UkładyWinForms
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void btnZapisz_Click(object sender, EventArgs e)
        {
            string imie = txtImie.Text;
            string nazwisko = txtNazwisko.Text;
            MessageBox.Show($"Zapisano: {imie} {nazwisko}");
        }

        private void btnWyczysc_Click(object sender, EventArgs e)
        {
            txtImie.Clear();
            txtNazwisko.Clear();
        }
    }
}

8. Najważniejsze właściwości paneli (Windows Forms)

Właściwość	Opis
`Dock`	Ustawienie przy krawędzi (`Top`, `Bottom`, `Left`, `Right`, `Fill`).
`Anchor`	Zachowanie elementu przy zmianie rozmiaru okna.
`FlowDirection`	Kierunek ułożenia w FlowLayoutPanel.
`RowCount`, `ColumnCount`	Liczba wierszy i kolumn w TableLayoutPanel.
`SplitterDistance`	Pozycja podziału w SplitContainer.
`Text`	Tytuł GroupBoxa.

9. Porównanie WPF i Windows Forms

Element / pojęcie	WPF	Windows Forms
Język interfejsu	XAML	Projektant (designer)
Główny układ	Grid, StackPanel	TableLayoutPanel, FlowLayoutPanel
Ramka grupująca	GroupBox	GroupBox
Menu	Menu	MenuStrip
Elastyczność układu	automatyczna (rozciąga się)	statyczna (piksele)
Dostosowanie do rozdzielczości	bardzo dobre	ograniczone
Projektowanie UI	deklaratywne	wizualne (przeciąganie)

10. Podsumowanie

Układy (layouty) i panele to podstawa projektowania interfejsu:

pozwalają utrzymać porządek i czytelność okna,
dopasowują rozmieszczenie do rozmiaru okna,
ułatwiają grupowanie i logiczne dzielenie elementów,
są niezbędne na egzaminie INF.04 przy projektowaniu aplikacji desktopowych.

W WPF pracujesz głównie z Grid, StackPanel, WrapPanel, DockPanel,
a w Windows Forms z TableLayoutPanel, FlowLayoutPanel, GroupBox i SplitContainer.

11. Zadania dla ucznia

Zadanie 1

Zaprojektuj w WPF okno „Dane ucznia”, zawierające:

GroupBox „Dane osobowe” z polami: Imię, Nazwisko, Klasa,
WrapPanel z przyciskami: Zapisz, Wyczyść,
menu główne z pozycjami Plik, Pomoc.

Zadanie 2

W Windows Forms zaprojektuj podobne okno „Dane klienta”, używając:

TableLayoutPanel dla pól tekstowych,
FlowLayoutPanel dla przycisków,
MenuStrip u góry formularza.

Zadanie 3

Dodaj do aplikacji WPF DockPanel z menu u góry, panelem bocznym po lewej (np. lista klientów) i główną częścią z formularzem po prawej.
Sprawdź, jak zmienia się układ przy zmianie szerokości okna.

Layouty i panele interfejsu w aplikacjach desktopowych (WPF i Windows Forms)