Binding w programowaniu aplikacji

1. Co to jest Binding?

Binding (czyli wiązanie danych) to sposób, w jaki aplikacja WPF może automatycznie połączyć dane z interfejsem użytkownika (GUI).
Dzięki bindingowi nie musisz wciąż ręcznie przepisywać danych między kodem a kontrolkami — robi to system za Ciebie.

Binding to most między:

danymi (czyli np. klasą Osoba),
interfejsem (czyli np. TextBox, Label, Slider, Image).

2. Przykład z życia

Wyobraź sobie stację pogodową:

termometr mierzy temperaturę (np. 23 °C),
ekran pokazuje tę samą wartość,
a gdy spadnie temperatura, ekran sam się aktualizuje.

W aplikacji WPF binding działa tak samo — dane i widok są połączone.
Zmiana w jednym miejscu zmienia drugie.

3. Struktura projektu

W tym przykładzie zrobimy aplikację z powitaniem użytkownika.
Po wpisaniu imienia i wieku, w etykiecie automatycznie pojawi się komunikat:

„Cześć, Ania! Masz 17 lat.”

Struktura folderów projektu:

ProjektBindingApp/
│
├── Modele/
│    └── Dane.cs
│
├── Logika/
│    └── PowitanieViewModel.cs
│
├── Walidacja/
│    └── (na razie puste – tu można dodać później walidację danych)
│
├── MainWindow.xaml
└── MainWindow.xaml.cs

4. Kod aplikacji krok po kroku

Plik: Modele/Dane.cs

To nasz model danych — prosta klasa przechowująca imię i wiek.

namespace ProjektBindingApp.Modele
{
    public class Osoba
    {
        public string Imie { get; set; }
        public int Wiek { get; set; }
    }
}

namespace ProjektBindingApp.Modele
{
    public class Osoba
    {
        public string Imie { get; set; }
        public int Wiek { get; set; }
    }
}

Plik: Logika/PowitanieViewModel.cs

To nasza logika – klasa, która łączy dane (Osoba) z interfejsem.
Implementuje INotifyPropertyChanged, dzięki czemu binding odświeża dane w oknie, gdy coś się zmieni.

using System.ComponentModel;
using ProjektBindingApp.Modele;

namespace ProjektBindingApp.Logika
{
    public class PowitanieViewModel : INotifyPropertyChanged
    {
        private Osoba osoba;

        public PowitanieViewModel(Osoba osoba)
        {
            this.osoba = osoba;
        }

        public string Imie
        {
            get => osoba.Imie;
            set
            {
                osoba.Imie = value;
                OnPropertyChanged(nameof(Imie));
                OnPropertyChanged(nameof(Powitanie));
            }
        }

        public int Wiek
        {
            get => osoba.Wiek;
            set
            {
                osoba.Wiek = value;
                OnPropertyChanged(nameof(Wiek));
                OnPropertyChanged(nameof(Powitanie));
            }
        }

        public string Powitanie => $"Cześć, {Imie}! Masz {Wiek} lat.";

        public event PropertyChangedEventHandler PropertyChanged;
        private void OnPropertyChanged(string nazwa)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nazwa));
        }
    }
}

using System.ComponentModel;
using ProjektBindingApp.Modele;

namespace ProjektBindingApp.Logika
{
    public class PowitanieViewModel : INotifyPropertyChanged
    {
        private Osoba osoba;

        public PowitanieViewModel(Osoba osoba)
        {
            this.osoba = osoba;
        }

        public string Imie
        {
            get => osoba.Imie;
            set
            {
                osoba.Imie = value;
                OnPropertyChanged(nameof(Imie));
                OnPropertyChanged(nameof(Powitanie));
            }
        }

        public int Wiek
        {
            get => osoba.Wiek;
            set
            {
                osoba.Wiek = value;
                OnPropertyChanged(nameof(Wiek));
                OnPropertyChanged(nameof(Powitanie));
            }
        }

        public string Powitanie => $"Cześć, {Imie}! Masz {Wiek} lat.";

        public event PropertyChangedEventHandler PropertyChanged;
        private void OnPropertyChanged(string nazwa)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nazwa));
        }
    }
}

Plik główny okna: MainWindow.xaml

Tu tworzymy prosty interfejs użytkownika – dwa pola tekstowe i etykietę z powitaniem.

<Window x:Class="ProjektBindingApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Powitanie użytkownika" Height="200" Width="350">
    <StackPanel Margin="20">
        <TextBox Text="{Binding Imie, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                 PlaceholderText="Podaj imię" Margin="0,5"/>
        <TextBox Text="{Binding Wiek, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                 PlaceholderText="Podaj wiek" Margin="0,5"/>
        <Label Content="{Binding Powitanie}" FontSize="18" FontWeight="Bold" Margin="0,10"/>
    </StackPanel>
</Window>

<Window x:Class="ProjektBindingApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Powitanie użytkownika" Height="200" Width="350">
    <StackPanel Margin="20">
        <TextBox Text="{Binding Imie, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                 PlaceholderText="Podaj imię" Margin="0,5"/>
        <TextBox Text="{Binding Wiek, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                 PlaceholderText="Podaj wiek" Margin="0,5"/>
        <Label Content="{Binding Powitanie}" FontSize="18" FontWeight="Bold" Margin="0,10"/>
    </StackPanel>
</Window>

(Jeśli Visual Studio zgłasza błąd przy PlaceholderText, można go pominąć — to opcjonalna właściwość nowszych wersji WPF.)

Plik: MainWindow.xaml.cs

Tutaj ustawiamy DataContext, czyli źródło danych, z którego korzysta cały binding w oknie.

using System.Windows;
using ProjektBindingApp.Modele;
using ProjektBindingApp.Logika;

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

            // Tworzymy obiekt danych
            Osoba uzytkownik = new Osoba();

            // Przekazujemy go do ViewModelu
            PowitanieViewModel vm = new PowitanieViewModel(uzytkownik);

            // Ustawiamy kontekst danych dla całego okna
            DataContext = vm;
        }
    }
}

using System.Windows;
using ProjektBindingApp.Modele;
using ProjektBindingApp.Logika;

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

            // Tworzymy obiekt danych
            Osoba uzytkownik = new Osoba();

            // Przekazujemy go do ViewModelu
            PowitanieViewModel vm = new PowitanieViewModel(uzytkownik);

            // Ustawiamy kontekst danych dla całego okna
            DataContext = vm;
        }
    }
}

5. Efekt działania

Po uruchomieniu aplikacji:

Użytkownik wpisuje imię i wiek,
Etykieta automatycznie wyświetla komunikat:
„Cześć, Ania! Masz 17 lat.”
Nie trzeba klikać przycisku „Zatwierdź” — binding wszystko aktualizuje sam.

6. Dalsze przykłady użycia Bindingu

a) Połączenie dwóch kontrolek (bez kodu C#)

<Slider x:Name="suwak" Minimum="0" Maximum="1" Value="0.5" />
<Image Source="logo.png" Opacity="{Binding ElementName=suwak, Path=Value}" />

<Slider x:Name="suwak" Minimum="0" Maximum="1" Value="0.5" />
<Image Source="logo.png" Opacity="{Binding ElementName=suwak, Path=Value}" />

Efekt: suwak reguluje przezroczystość obrazka.

b) Binding komendy do przycisku (dla bardziej zaawansowanych)

Plik: Logika/RelayCommand.cs

using System;
using System.Windows.Input;

namespace ProjektBindingApp.Logika
{
    public class RelayCommand : ICommand
    {
        private readonly Action execute;
        public RelayCommand(Action execute) => this.execute = execute;
        public bool CanExecute(object parameter) => true;
        public void Execute(object parameter) => execute();
        public event EventHandler CanExecuteChanged;
    }
}

using System;
using System.Windows.Input;

namespace ProjektBindingApp.Logika
{
    public class RelayCommand : ICommand
    {
        private readonly Action execute;
        public RelayCommand(Action execute) => this.execute = execute;
        public bool CanExecute(object parameter) => true;
        public void Execute(object parameter) => execute();
        public event EventHandler CanExecuteChanged;
    }
}

W PowitanieViewModel.cs:

public ICommand ZapiszCommand => new RelayCommand(Zapisz);

private void Zapisz()
{
    MessageBox.Show("Dane zapisane!");
}

public ICommand ZapiszCommand => new RelayCommand(Zapisz);

private void Zapisz()
{
    MessageBox.Show("Dane zapisane!");
}

W XAML:

<Button Content="Zapisz dane" Command="{Binding ZapiszCommand}" />

<Button Content="Zapisz dane" Command="{Binding ZapiszCommand}" />

7. Podsumowanie

Binding w aplikacjach WPF:

automatyzuje przekazywanie danych między interfejsem a logiką,
wymaga ustawienia DataContext,
pozwala łączyć właściwości, dane, metody, widoczność i inne elementy,
minimalizuje kod i czyni aplikację czytelniejszą,
jest wiedzą obowiązkową na egzaminie INF.04.

8. Zapamiętaj

Na egzaminie, jeśli zobaczysz zadanie z:
zmianą etykiety po wpisaniu danych użyj bindingu zamiast ręcznych przypisań.
Formularzem użytkownika, automatycznym wyliczeniem wyniku,