Właściwości wspólne kontrolek

Czego się dziś nauczysz

Po co wspólne właściwości

W arkuszu egzaminacyjnym często czytasz: „przycisk wyrównany do prawej, szerokość 120, odstęp 10 od pola”, „po zatwierdzeniu formularz ma zniknąć”, „przycisk nieaktywny, dopóki…”. Każde z tych wymagań to jedna z właściwości, które mają wszystkie kontrolki — bo dziedziczą je po wspólnej klasie bazowej FrameworkElement. Nie trzeba ich uczyć się osobno dla napisu i dla przycisku.

Margin i Padding

Margin to odstęp na zewnątrz kontrolki — odsuwa ją od sąsiadów. Padding to odstęp wewnątrz — między ramką kontrolki a jej zawartością (np. tekstem przycisku).

przycisk: przerywana linia to granica marginesu, ramka to krawędź przycisku

Te same trzy zapisy działają dla Padding. Pamiętaj, że marginesy sąsiadów się sumują: dwa przyciski z Margin="10" jeden pod drugim są odsunięte o 20. Padding mają kontrolki z ramką lub tłem — Button, TextBlock; panele (StackPanel) go nie mają, więc ich zawartość odsuwasz marginesem panelu.

Wyrównanie w poziomie i w pionie

Każda kontrolka dostaje od panelu obszar. HorizontalAlignment i VerticalAlignment mówią, jak ma się w nim ułożyć:

<StackPanel Margin="15">
    <Button Content="Left"    HorizontalAlignment="Left"    Margin="0,0,0,6"/>
    <Button Content="Center"  HorizontalAlignment="Center"  Margin="0,0,0,6"/>
    <Button Content="Right"   HorizontalAlignment="Right"   Margin="0,0,0,6"/>
    <Button Content="Stretch" HorizontalAlignment="Stretch"/>
</StackPanel>

Stretch to wartość domyślna — dlatego przyciski w pionowym panelu rozciągają się na całą szerokość

Rozmiar: stały, minimalny, maksymalny

Widoczność i dostępność

Visibility — trzy wartości, nie dwie

ten sam panel — zmienia się tylko Visibility drugiego przycisku

IsEnabled, Opacity, ToolTip

IsEnabled="False" wyszarza kontrolkę i blokuje ją — przycisku nie da się kliknąć. Ustawione na panelu blokuje cały panel z zawartością. Opacity (lekcja 02) tylko zmienia przezroczystość — kontrolka z Opacity="0" jest niewidoczna, ale nadal działa. Do ukrywania używaj Visibility. ToolTip="…" pokazuje dymek z podpowiedzią po najechaniu myszą.

Dziedziczenie czcionki

Właściwości czcionki (FontSize, FontFamily, FontWeight) i Foreground są dziedziczone: ustawione na oknie przechodzą na wszystkie elementy w środku, które nie mają własnej wartości. Kontrolka z własnym FontSize zachowa swoją wartość.

<Window … FontSize="16">
    <StackPanel Margin="15">
        <TextBlock Text="Ma rozmiar 16 — odziedziczył po oknie"/>
        <Button Content="Też 16"/>
        <TextBlock Text="Ma własne 24" FontSize="24"/>
    </StackPanel>
</Window>

Background nie jest dziedziczony. Przyciski mają tło i kolor tekstu ze stylu systemu, więc kolor okna ich nie zmienia — ale czcionkę po oknie dziedziczą.

Zmiana z kodu C#

Odczyt działa tak samo: if (Opis.Visibility == Visibility.Visible). Klasy Thickness, Visibility i HorizontalAlignment są w przestrzeni nazw System.Windows, dołączonej w każdym pliku okna.

Karta produktu w sklepie

Karta słuchawek: nazwa, cena, opis i przyciski. Ukryj opis zwija opis, a karta robi się krótsza. A+ i A− zmieniają czcionkę okna. Dodaj do koszyka blokuje się po kliknięciu, żeby nie dodać produktu dwa razy.

po lewej stan startowy, po prawej — po zwinięciu opisu i dodaniu do koszyka

<Window x:Class="Lekcja05.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Karta produktu" Height="430" Width="420"
        WindowStartupLocation="CenterScreen">

    <StackPanel Margin="20">
        <TextBlock Text="Słuchawki X200" FontSize="22" FontWeight="Bold"/>
        <TextBlock Text="199 zł" FontSize="18" Foreground="Green" Margin="0,4,0,10"/>

        <TextBlock x:Name="Opis" TextWrapping="Wrap" Margin="0,0,0,10"
                   Text="Bezprzewodowe słuchawki z redukcją szumów. Do 30 godzin pracy na baterii, ładowanie przez USB-C."/>

        <StackPanel Orientation="Horizontal">
            <Button x:Name="OpisPrzycisk" Content="Ukryj opis" Padding="8,4" Margin="0,0,8,0" Click="Opis_Click"/>
            <Button Content="A+" Padding="8,4" Margin="0,0,8,0" Click="Wieksza_Click" ToolTip="Większa czcionka"/>
            <Button Content="A−" Padding="8,4" Click="Mniejsza_Click" ToolTip="Mniejsza czcionka"/>
        </StackPanel>

        <Button x:Name="Kup" Content="Dodaj do koszyka"
                Margin="0,15,0,0" Padding="10,6"
                Background="Orange" ToolTip="Dodaje produkt do koszyka"
                Click="Kup_Click"/>

        <TextBlock x:Name="Status" Margin="0,10,0,0"/>
    </StackPanel>
</Window>

using System.Windows;

namespace Lekcja05;

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

    private void Opis_Click(object sender, RoutedEventArgs e)
    {
        if (Opis.Visibility == Visibility.Visible)
        {
            Opis.Visibility = Visibility.Collapsed;   // znika i nie zajmuje miejsca
            OpisPrzycisk.Content = "Pokaż opis";
        }
        else
        {
            Opis.Visibility = Visibility.Visible;
            OpisPrzycisk.Content = "Ukryj opis";
        }
    }

    // FontSize okna dziedziczą wszystkie elementy, które nie mają własnego FontSize
    private void Wieksza_Click(object sender, RoutedEventArgs e)
    {
        if (FontSize < 24)
        {
            FontSize += 2;
        }
    }

    private void Mniejsza_Click(object sender, RoutedEventArgs e)
    {
        if (FontSize > 10)
        {
            FontSize -= 2;
        }
    }

    private void Kup_Click(object sender, RoutedEventArgs e)
    {
        Kup.IsEnabled = false;
        Kup.Content = "W koszyku";
        Status.Text = "Produkt dodany do koszyka.";
    }
}

Co dzieje się po kolei

• Cena ma Margin="0,4,0,10": mały odstęp od nazwy i większy od opisu — wizualnie należy do nazwy.
• Małe przyciski mają Padding="8,4": 8 po bokach, 4 u góry i dołu, więc tekst nie przykleja się do ramki.
• Przycisk koszyka nie ma HorizontalAlignment — domyślne Stretch rozciąga go na całą szerokość, jak w sklepach internetowych.
• Opis_Click sprawdza aktualną widoczność i ustawia przeciwną. Z jednego przycisku powstaje przełącznik, a jego napis zawsze mówi, co się stanie po kliknięciu.
• Collapsed, a nie Hidden: po zwinięciu opisu przyciski przesuwają się w górę.
• FontSize += 2; bez nazwy przed kropką zmienia czcionkę okna. Opis, status i przyciski ją dziedziczą; nazwa i cena mają własne FontSize, więc się nie zmieniają.
• Warunki FontSize < 24 i FontSize > 10 nie pozwalają rozsypać układu zbyt dużą albo nieczytelną czcionką.
• Kup.IsEnabled = false; zostawia przycisk widoczny, ale wyszarzony — użytkownik widzi, że akcja została wykonana.

Zestawienie elementów

Zanim utkniesz

Zadania

Każde zadanie wykonaj w nowym projekcie Aplikacja WPF. Wskazówkę otwórz dopiero wtedy, gdy utkniesz.

Co trzeba zapamiętać

• Margin — odstęp na zewnątrz, Padding — w środku. Zapis: 1, 2 albo 4 liczby (lewo, góra, prawo, dół).
• Wyrównanie domyślnie Stretch; Width ma pierwszeństwo przed rozciąganiem.
• MinWidth / MaxWidth ograniczają rozmiar, nie blokując dopasowania do treści.
• Hidden zostawia miejsce, Collapsed — nie. Opacity="0" nie wyłącza kontrolki.
• IsEnabled="False" blokuje kontrolkę, a na panelu — całą zawartość.
• Czcionka i Foreground są dziedziczone po oknie; własna wartość kontrolki ma pierwszeństwo.
• W C#: new Thickness(…), Visibility.Collapsed, HorizontalAlignment.Right, double.NaN.

Dokumentacja: Microsoft Learn — klasa FrameworkElement, wyrównanie, marginesy i odstępy.