WrapPanel i DockPanel – zawijanie i dokowanie

WrapPanel

Czym jest WrapPanel?

WrapPanel to layout podobny do StackPanel – układa elementy jeden za drugim. Kluczowa różnica: gdy zabraknie miejsca w wierszu, automatycznie przechodzi do nowego wiersza (lub kolumny – zależnie od kierunku).

<WrapPanel>
    <Button Content="Jeden"    Margin="5" Width="80" />
    <Button Content="Dwa"      Margin="5" Width="80" />
    <Button Content="Trzy"     Margin="5" Width="80" />
    <Button Content="Cztery"   Margin="5" Width="80" />
    <Button Content="Pięć"     Margin="5" Width="80" />
    <Button Content="Sześć"    Margin="5" Width="80" />
    <Button Content="Siedem"   Margin="5" Width="80" />
</WrapPanel>
<!-- Gdy okno wąskie – przyciski zawijają się do kolejnych wierszy -->

Orientation – kierunek zawijania

Podobnie jak StackPanel, WrapPanel ma właściwość Orientation. Zmienia ona kierunek, w którym elementy są układane, a co za tym idzie – kierunek zawijania.

<WrapPanel Orientation="Vertical" Height="200">
    <!-- Elementy idą od góry w dół, gdy zapełni się kolumna –
         przechodzą do następnej kolumny po prawej -->
    <Button Content="A" Margin="3" Height="40" Width="60" />
    <Button Content="B" Margin="3" Height="40" Width="60" />
    <Button Content="C" Margin="3" Height="40" Width="60" />
    <Button Content="D" Margin="3" Height="40" Width="60" />
    <Button Content="E" Margin="3" Height="40" Width="60" />
    <Button Content="F" Margin="3" Height="40" Width="60" />
</WrapPanel>

ItemWidth i ItemHeight – jednolite rozmiary

Właściwości ItemWidth i ItemHeight narzucają jednolity rozmiar wszystkim elementom w WrapPanel – niezależnie od tego co ustawisz na poszczególnych kontrolkach. Przydają się do tworzenia równomiernych siatek.

<!-- Wszystkie elementy mają szerokość 100px – tworzą równą siatkę -->
<WrapPanel ItemWidth="100" ItemHeight="100">
    <Border Background="SteelBlue"  Margin="3">
        <TextBlock Text="Kafelek 1" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Border>
    <Border Background="Tomato"     Margin="3">
        <TextBlock Text="Kafelek 2" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Border>
    <Border Background="MediumSeaGreen" Margin="3">
        <TextBlock Text="Kafelek 3" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Border>
    <Border Background="Gold"        Margin="3">
        <TextBlock Text="Kafelek 4" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Border>
    <Border Background="MediumPurple" Margin="3">
        <TextBlock Text="Kafelek 5" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Border>
</WrapPanel>

Praktyczne użycie WrapPanel

WrapPanel świetnie sprawdza się w kilku typowych sytuacjach:

DockPanel

Czym jest DockPanel?

DockPanel to layout, który pozwala przyklejać elementy do krawędzi – góry, dołu, lewej lub prawej strony panelu. Ostatni element domyślnie wypełnia całą pozostałą przestrzeń pośrodku.

DockPanel.Dock – cztery krawędzie

Każdemu elementowi w DockPanel mówisz, do której krawędzi ma się „przykleić” za pomocą attached property DockPanel.Dock.

<DockPanel>

    <!-- Górny pasek -->
    <Border DockPanel.Dock="Top"
            Background="#2d2d3f"
            Height="40">
        <TextBlock Text="Pasek menu"
                   Foreground="White"
                   VerticalAlignment="Center"
                   Margin="10,0" />
    </Border>

    <!-- Dolny pasek stanu -->
    <Border DockPanel.Dock="Bottom"
            Background="#1e7e34"
            Height="25">
        <TextBlock Text="Gotowy"
                   Foreground="White"
                   VerticalAlignment="Center"
                   Margin="10,0" />
    </Border>

    <!-- Panel boczny po lewej -->
    <Border DockPanel.Dock="Left"
            Background="#252535"
            Width="160">
        <TextBlock Text="Panel boczny"
                   Foreground="White"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center" />
    </Border>

    <!-- Główna treść – ostatni element, wypełnia środek -->
    <Border Background="#1a1a2e">
        <TextBlock Text="Główny obszar roboczy"
                   Foreground="White"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center" />
    </Border>

</DockPanel>

LastChildFill – czy ostatni wypełnia środek?

Domyślnie ostatni element w DockPanel wypełnia całą pozostałą przestrzeń – bez potrzeby podawania Dock. To zachowanie kontroluje właściwość LastChildFill.

<!-- LastChildFill="True" jest domyślne – ostatni element wypełnia środek -->
<DockPanel LastChildFill="True">
    <Menu      DockPanel.Dock="Top"></Menu>
    <StatusBar DockPanel.Dock="Bottom"></StatusBar>
    <TextBox   AcceptsReturn="True" />  <!-- ostatni – wypełnia resztę -->
</DockPanel>

<!-- Gdy LastChildFill="False" – ostatni element zachowuje się normalnie -->
<DockPanel LastChildFill="False">
    <Button DockPanel.Dock="Top"    Content="Góra"   />
    <Button DockPanel.Dock="Bottom" Content="Dół"    />
    <Button DockPanel.Dock="Left"   Content="Lewo"   />
    <Button                            Content="Ostatni" />
    <!-- Ostatni NIE wypełnia reszty – jest mały, w lewym rogu -->
</DockPanel>

Kolejność elementów ma znaczenie!

W DockPanel kolejność, w jakiej piszesz elementy, ma ogromne znaczenie. Każdy element „zabiera” kawałek przestrzeni, a następny dostaje to co zostało.

<!-- PRZYKŁAD 1: Top → Bottom → Left → treść
     Panel boczny sięga od menu do pasku stanu -->
<DockPanel>
    <Border DockPanel.Dock="Top"    Height="40"  Background="SteelBlue"  />  <!-- menu -->
    <Border DockPanel.Dock="Bottom" Height="25"  Background="Gray"       />  <!-- pasek stanu -->
    <Border DockPanel.Dock="Left"   Width="150" Background="#2d2d3f"    />  <!-- sidebar -->
    <Border                            Background="#1a1a2e"             />  <!-- treść -->
</DockPanel>
<!-- Sidebar sięga od dołu menu do góry paska stanu ✅ -->

<!-- PRZYKŁAD 2: Left → Top → Bottom → treść
     Panel boczny sięga od góry do dołu okna -->
<DockPanel>
    <Border DockPanel.Dock="Left"   Width="150" Background="#2d2d3f"    />  <!-- sidebar -->
    <Border DockPanel.Dock="Top"    Height="40"  Background="SteelBlue"  />  <!-- menu -->
    <Border DockPanel.Dock="Bottom" Height="25"  Background="Gray"       />  <!-- pasek stanu -->
    <Border                            Background="#1a1a2e"             />  <!-- treść -->
</DockPanel>
<!-- Sidebar sięga od góry do dołu okna (nad menu i pasek stanu) -->

Typowe zastosowania

Kompletny layout okna z DockPanel

DockPanel jest świetny do budowania szkieletu całego okna aplikacji. Oto kompletny przykład prostego notatnika:

<Window Title="Notatnik" Width="700" Height="500"
        WindowStartupLocation="CenterScreen">

  <DockPanel>

    <!-- 1. Menu na górze -->
    <Menu DockPanel.Dock="Top">
      <MenuItem Header="_Plik">
        <MenuItem Header="_Nowy"    x:Name="menuNowy"    Click="MenuNowy_Click"    />
        <MenuItem Header="_Otwórz"  x:Name="menuOtwórz"  Click="MenuOtwórz_Click"  />
        <MenuItem Header="_Zapisz"  x:Name="menuZapisz"  Click="MenuZapisz_Click"  />
        <Separator />
        <MenuItem Header="Za_mknij" Click="MenuZamknij_Click" />
      </MenuItem>
    </Menu>

    <!-- 2. Pasek narzędzi pod menu -->
    <ToolBar DockPanel.Dock="Top">
      <Button Content="📄 Nowy"   Padding="8,3" />
      <Button Content="📂 Otwórz" Padding="8,3" />
      <Button Content="💾 Zapisz" Padding="8,3" />
    </ToolBar>

    <!-- 3. Pasek stanu na dole -->
    <StatusBar DockPanel.Dock="Bottom">
      <StatusBarItem>
        <TextBlock x:Name="lblStatus" Text="Gotowy | Wiersz: 1  Kolumna: 1" />
      </StatusBarItem>
    </StatusBar>

    <!-- 4. Główny obszar – pole tekstowe wypełnia resztę -->
    <TextBox x:Name="txtTresc"
             AcceptsReturn="True"
             TextWrapping="Wrap"
             VerticalScrollBarVisibility="Auto"
             FontFamily="Consolas"
             FontSize="14"
             Padding="5" />

  </DockPanel>
</Window>

Galeria z WrapPanel

WrapPanel idealnie nadaje się do dynamicznej galerii, której elementy dostosowują się do szerokości okna:

<!-- XAML: -->
<ScrollViewer>
    <WrapPanel x:Name="panelGalerii"
               ItemWidth="150"
               ItemHeight="180"
               Margin="10" />
</ScrollViewer>

// C# – wypełniamy galerię kafelkami:
private void Window_Loaded(object sender, RoutedEventArgs e)
{
    string[] nazwy   = { "Jabłko", "Banan", "Gruszka", "Śliwka", "Truskawka", "Winogrono" };
    string[] kolory   = { "Tomato", "Gold", "YellowGreen", "MediumPurple", "HotPink", "MediumSeaGreen" };

    for (int i = 0; i < nazwy.Length; i++)
    {
        // Kafelek produktu
        Border kafelek = new Border();
        kafelek.Margin           = new Thickness(5);
        kafelek.CornerRadius     = new CornerRadius(8);
        kafelek.Background       = (Brush)new BrushConverter().ConvertFromString(kolory[i]);

        // Treść kafelka
        StackPanel zawartosc = new StackPanel();
        zawartosc.VerticalAlignment = VerticalAlignment.Center;

        TextBlock emoji = new TextBlock();
        emoji.FontSize             = 40;
        emoji.HorizontalAlignment  = HorizontalAlignment.Center;
        emoji.Text                 = "🍎";

        TextBlock nazwa = new TextBlock();
        nazwa.Text                 = nazwy[i];
        nazwa.FontSize             = 14;
        nazwa.FontWeight           = FontWeights.Bold;
        nazwa.Foreground           = Brushes.White;
        nazwa.HorizontalAlignment  = HorizontalAlignment.Center;
        nazwa.Margin               = new Thickness(0, 8, 0, 0);

        zawartosc.Children.Add(emoji);
        zawartosc.Children.Add(nazwa);
        kafelek.Child = zawartosc;

        panelGalerii.Children.Add(kafelek);
    }
}

Porównanie wszystkich layoutów WPF

Teraz znasz już wszystkie cztery podstawowe layouty. Oto kompletne podsumowanie:

Częste błędy

❌ Błąd 1: WrapPanel bez ScrollViewer przy wielu elementach

<WrapPanel>
  <!-- 100 kafelków...
       te na dole niewidoczne,
       brak scrolla -->
</WrapPanel>

<ScrollViewer>
  <WrapPanel>
    <!-- 100 kafelków –
         można scrollować -->
  </WrapPanel>
</ScrollViewer>

❌ Błąd 2: Zła kolejność w DockPanel

<DockPanel>
  <!-- Left przed Top/Bottom:
       sidebar jest od góry do dołu,
       menu i status na nim się NIE mieszczą -->
  <Border DockPanel.Dock="Left" />
  <Border DockPanel.Dock="Top" />
  <Border DockPanel.Dock="Bottom" />
  <Border />
</DockPanel>

<DockPanel>
  <Border DockPanel.Dock="Top" />
  <Border DockPanel.Dock="Bottom" />
  <Border DockPanel.Dock="Left" />
  <Border />
</DockPanel>

❌ Błąd 3: Brak Height/Width na elementach WrapPanel

<WrapPanel>
  <Border Background="Red" />
  <!-- Border bez Width i Height
       ma rozmiar 0 – niewidoczny! -->
</WrapPanel>

<WrapPanel ItemWidth="100" ItemHeight="80">
  <Border Background="Red" />
  <!-- ItemWidth/ItemHeight
       narzuca rozmiar wszystkim -->
</WrapPanel>

Zadania do wykonania