Teorie: Popis základních kontrolek na WPF formuláři

1. Shrnutí základních poznatků

(Dílčí příklady jsou převzaty z https://wpf-tutorial.com/ )

Jakým způsobem se pracuje s jednotlivými kontrolkami bylo vysvětleno u prvního příkladu v rámci cvičení. Doporučujeme se nejprve podívat na tento příklad. Tuto kapitolu lze také použít jako referenci (tj. v tento okamžik se seznámit s obsahem a během zpracovávání příkladů se k této kapitole vracet).

Shrňme si základní poznatky:

- Pro design formulářů ve WPF je používán značkovací jazyk XAML (eXtensible Application Markup Language)

- XAML je ve svých základních rysech obdobný jazyku HTML, který se využívá pro webové stránky, nebo XML, který se využívá k identifikaci a strukturování dat (např. elektronicky zpracovávané/přenášené údaje formulářů)

- Na formuláři (Window) mohou být umístěny různé kontrolky. Tyto kontrolky mohou být libovolně vnořené (kontrolka může být kontejnerem pro jinou kontrolku)

- Formálně se tyto kontrolky do XAML zapisují pomocí značek – Tagů. Pro zahájení definice kontrolky je definován tag uvedený ve špičatých závorkách, tj např. <TextBlock>. Pro ukončení definice kontrolky také existuje tag ukončovací s lomítkem </TextBlock>

- V rámci tagu mohou být definovány vlastnosti (properties) kontrolky, např. <TextBlock Text=”ahoj” Width=”100”> znamená, že v kontrolce textový blok bude text ahoj s šířkou 100. Zápis tohoto tagu je potřeba v XAML ukončit ukončovacím tagem, zde </TextBlock>

- Dílčí kontrolky mají jednu vlastnost výchozí. Její hodnotu je možné napsat mezi zahajovací tag a ukončovací tag. U TextBlocku je to vlastnost Text, tedy např.: <TextBlock>ahoj</TextBlock> je to samé jako <TextBlock Text=”ahoj”></TextBlock>

- Pokud mezi zahajovací a ukončovací tag nechceme nic napsat, je možné místo <TextBlock Text=”ahoj”></TextBlock> napsat jen <TextBlock Text=”ahoj”/>

- Další možnost zápisu je pomocí tečkové notace. To je velmi užitečné pro komplexní vlastnosti (zde se jedná jen o „školní“ ukázku, ale následně budeme tuto formu využívat):

<TextBlock>

<TextBlock.Text>

Ahoj

</TextBlock.Text>

<TextBlock.Width>

100

</TextBlock.Width>

</TextBlock>

- Veškerý kód je „case sensitive“, tj. je citlivý na malá a velká písmena – je nutné dbát na dodržování velkých a malých písmen

- Veškeré kontrolky jsou v kódu ve skutečnosti třídy – tj. šablony kontrolek, které mají určité předdefinované vlastnosti a chování. V okamžiku, kdy kontrolku využijeme, vytváří se její instance – tj. konkretizace (např. Bankomat je třída, je v ní popsáno chování, ale Bankomat na Americké ulici je instance třídy – tento bankomat má konkrétní vlastnosti)

- Každá vlastnost je určitého datového typu, např. Text je string a Width je int. U vlastností jsou využívány i složité datové typy.

2. Window

Značka <Window> slouží pro definování okna. Zpravidla touto značkou začíná Váš XAML kód (pozn.: to není pravidlo, XAML může začínat např. značkou UserControl nebo Resource – to je však mimo obsah tohoto kurzu). Ukažme si a popišme následující jednoduchý kód, který je generován Visual Studiem po založení WPF aplikace:

<Window x:Class="WpfApplication1.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Window1" Height="300" Width="300">

<Grid>

</Grid>

</Window>

Pomocí Window se de facto definuje hlavní třída, v rámci, které jsou pak definovány další kontrolky (ve skutečnosti jako instance tříd kontrolek). V XAML je definována jen část třídy, další část nalezneme v Code-Behind:

using System;

using System.Windows;

using System.Windows.Controls;

//…more using statements

namespace WpfApplication1

{

/// <summary>

/// Interaction logic for Window1.xaml

/// </summary>

public partial class Window1 : Window

{

public Window1()

{

InitializeComponent();

}

Povšimněte si slova partial u definice třídy. Toto klíčové slovo definuje, že tato třída může být (a v tomto případě i je) rozšířena o jinou definici stejné třídy – tato definice je na základě XAML automaticky generována (do souboru s příponou g.i.cs – tento soubor je v rámci projektu skrytý, ale lze zobrazit). Tento automaticky generovaný soubor obsahuje i metodu InitializeComponent, která je volána v konstruktoru standardního Code-Behind (důležité – toto volání nikdy nemažte).

Vraťme se nyní do XAML. Jako každá jiná značka Window má začátek a konec. Jsou zde některé velmi důležité vlastnosti, které se dají považovat za povinné:

xmlns – znamená XML namespace. Jedná se alternativu za using v kódu C#. Jaký namespace má být využit pro značky a jejich vlastnosti. Zápis se provádí trochu jinak nežli u using. Lze se samozřejmě odkázat na libovolný namespace do libovolného projektu. Je možné však využít i některé standardní namespace – typicky od Microsoftu. xmlns zapsána takto znamená odkaz na standardní třídy obsahující kontrolky a jejich vlastnosti. Naproti tomu xmls:x je odkaz na jiný namespace, pokud chceme někde v XAML kódu využít tento namespace, je třeba jej uvést prefixem x: (zde např. hned další vlastnost x:Class). Je přípustné využít i vlastní namespace, např. xmlns:usercontrols="clr-namespace:MujProjekt.UserControls" je odkaz na uživatelský namespace s vlastními kontrolkami. Kontrolku pak lze v XAML volat např. <usercontrols:FlagsComboBox …..
x:Class – název třídy včetně namespace. Namespace a třída jsou odděleny tečkou. POZOR – ČASTÁ CHYBA: Názvy musí korespondovat s kódem v Code-Behind. V této ukázce je WpfApplication1 název namespace a Window1 je název třídy.

Tyto dvě vlastnosti MUSÍ být definovány. Uveďme ukázku dalších zajímavých (nepovinných, ale užitečných) vlastností okna:

Title – text v záhlaví formuláře
Height – výška formuláře (pokud není u kontrolky nastavena výška, roztáhne se do celého formuláře na výšku)
Width – šířka formuláře (pokud není u kontrolky nastavena šířka, roztáhne se do celého formuláře na šířku)
ResizeMode – definuje, zda je možné měnit rozměry okna. Zde lze také zakázat maximalizaci okna
ShowInTaskbar – definuje, zda je okno viditelné v hlavním panelu Windows
WindowStartupLocation – definuje, kde bude okno umístěno na obrazovce při startu – standardně dle Windows, uprostřed obrazovky, nebo relativně k oknu, které toto okno spustilo

3. Základní kontrolky

V rámci podkapitol této kapitoly budou ukázány tyto základní kontrolky:

TextBlock - výpis textu
TextBox - vstup textu
Button - tlačítko
CheckBox - zaškrtávací políčko
RadioButton - rádiové tlačítko pro výběr jedné položky z více

Pozn.: zejména formátovací vlastnosti, které jsou společné pro všechny kontrolky budou ukázány u kontrolky první - TextBlock

3.1. TextBlock

Textový blok slouží pro výpis textu. Alternativně lze použít i značku Label, která má rozšířené možnosti, které jsou však nad rámec tohoto kurzu. Ukažme si nejprve nejjednodušší zápis:

<Window x:Class="WpfTutorialSamples.Basic_controls.TextBlockSample"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="TextBlockSample" Height="100" Width="200">

<Grid>

<TextBlock>This is a TextBlock</TextBlock>

</Grid>

</Window>

Na základě kódu bude vytvořeno následující okno s textem:

Text v TextBlocku může být definován, tak jak je uvedeno ve výše uvedeném příkladu, anebo pomocí vlastnosti Text - <TextBlock Text=“ahoj“/>. Samozřejmě v této i dalších popisovaných kontrolkách je možné použít vlastnosti šířka a výška, tj. Width a Height.

Na TextBlocku si můžeme ukázat některé obecné vlastnosti, které jsou dostupné i v jiných kontrolkách:

Margin – definice volného prostoru kolem kontrolky v pixelech (bodech obrazovky). Tento prostor může být definován jedním číslem, např. <TextBlock Text=“ahoj“ Margin=“10“/> znamená vypiš text ahoj a okolo něj za všech okolností ponechej prázdné místo. Margin však může být definován i čtyřmi čísly ve formátu „vlevo, nahoře, vpravo, dole“, takže Margin=“5,12,5,20“, znamená zleva a zprava ponech 5 pixelů volný, shora 12 a zdola 20.
HorizontalAlignment – vodorovné zarovnání. Může být Left, Center, Right nebo Stretch. Pokud není uvedeno jinak, je ve výchozím stavu Stretch znamená, že kontrolka se bude vodorovně roztahovat ve vztahu k oknu, nebo např. buňce v Gridu (viz dále). To je např. velmi zřejmé u kontrolky TextBox (zadání hodnoty) – pokud se nedefinuje vlastnost Stretch je vhodné zadat šířku, jinak se šířka přizpůsobuje obsahu. Stretch tuto kontrolku roztáhne přes celou šířku okna nebo buňky Grid. Stretch má v případě TextBlocku zejména u použití víceřádkového textu.
VerticalAlignment – svislé zarovnání. Může nabývat hodnot Top, Center, Bottom a Stretch Výchozí hodnota je Stretch.
Foreground – barva textu (pro jiné kontrolky obecně barva popředí)
Background – barva pozadí, zde tedy zvýraznění textu (spíše se používá např. v souvislosti s Window nežli se samotným textem)
FontFamily – typ písma
FontSize – velikost písma
FontWeight – stupeň „tučnosti“ písma
ToolTip – nápověda, která se zobrazí při „přejetí“ myší

Ukažme si ještě, jak je možné si poradit s dlouhými texty. Možnosti jsou celkem tři:

Vložení tagu <LineBreak/> do textu, kterým docílíme vložení mezery na místo požadované programátorem
“Useknutí“ textu pomocí TextTrimming="CharacterEllipsis"
Nebo nejčastější automatické zalamování: TextWrapping="Wrap"

Vše ilustruje následující příklad (kontrolka StackPanel bude ukázána později – slouží pro formátování):

<Window x:Class="WpfTutorialSamples.Basic_controls.TextBlockSample"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="TextBlockSample" Height="200" Width="250">

This is a TextBlock control<LineBreak />

with multiple lines of text.

</TextBlock>

This is a TextBlock control with text that may not be rendered completely, which will be indicated with an ellipsis.

</TextBlock>

This is a TextBlock control with automatically wrapped text, using the TextWrapping property.

</TextBlock>

</StackPanel>

</Window>

3.2. TextBox

TextBox je využíván pro uživatelský vstup. Ukažme si jednoduchý příklad:

<Window x:Class="WpfTutorialSamples.Basic_controls.TextBoxSample"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="TextBoxSample" Height="80" Width="250">

</Window>

Nejpodstatnější je vlastnost Text, ve které je v textovém formátu uložen „obsah“ TextBox. Pokud bychom chtěli pracovat s čísly, je nutné si tato čísla v programu převést z textu (tj. konvertovat na daný číselný datový typ).

Veškeré nutné formátování je shodné s kontrolkou TextBlock – Margin, VerticalAlignment, HorizonatlAlignment, Foreground, Backgroud, FontFamily, FontSize, FontWeight. To vše platí i pro kontrolky následující.

Je možné zařídit, aby TextBox na vstupu pracoval s novou řádkou, tj. na vstupu pracoval i s klávesou ENTER. Jen je potřeba vhodně nastavit vlastnosti: TextWrapping (ukázáno u TextBlocku) a vlastnost AcceptsReturn.

V rámci TextBoxu je možné i text označit. Označený text nalezneme ve vlastnosti SelectedText.

3.3. Button

Button neboli tlačítko může být na formulář přidáno pomocí tagu <Button>. Text tlačítka může být uveden mezi značkami:

<Button>Hello, world!</Button>

Nebo pomocí vlastnosti Content:

Anebo definování Content pomocí tagů:

<Button.Content>

Hello, world!

<Button.Content>

</Button>

Tato možnost se ale nepoužívá, neboť Content je výchozí vlastnost a není nutné ji tudíž v tomto kontextu uvádět. Výsledek ve všech případech vypadá stejně:

U tlačítka je velmi důležitá jeho základní funkčnost, tj. je nutné, aby se po klinutí na tlačítko „něco stalo“. V rámci tlačítka je tedy vhodné definovat, jaká metoda se má spustit po kliknutí. To vše se definuje ve vlastnosti Click. Takže například:

<Button Click="HelloWorldButton_Click">Hello, World!</Button>

definuje, že se má po kliknutí na tlačítko spustit metoda HelloWorldButton_Click. Tu je potřeba ještě implementovat v Code-Behind:

private void HelloWorldButton_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Hello, world!");
}

Tato metoda zajistí, že po kliknutí na tlačítko se objeví okno s textem Hello, world!.

Tlačítko je možné naformátovat, pak např. XAML kód:

<Button Background="Beige" Foreground="Blue" FontWeight="Bold">Formatted Button</Button>

Vytvoří takovéto tlačítko:

Do vlastnosti Content (respektive) mezi značky Button je možné vložit i komplexní XAML kód. Jen pozor: je nutné vše zapouzdřit do nějakého panelu – např. Grid, StackPanel, WrapPanel – viz dále. Ukažme si tedy, jak do tlačítka vložit text s obrázkem:

Do panelu StackPanel byly vloženy dvě kontrolky – Image a TextBlock. Aby vše fungovalo, musíme v projektu mít složku Images a v ní soubor help.png.

Velice zajímavá a hojně využívaná vlastnost je Padding. Jedná se o možnost vynechání volného místa uvnitř tlačítka. Jedná o „Margin naruby“.

3.4. CheckBox

Checkbox je tzv. zaškrtávací tlačítko, které může nabývat dvou stavů – zaškrtnuté (True), nezaškrtnuté (False), popř. při nastavení vlastnosti IsThreeState na true i tří stavů.

Využití je velmi snadné. Důležité vlastnosti jsou:

Content – obsah, tj. text, který je uvnitř zaškrtávacího tlačítka. Opět je možno content vypsat přímo mezi tagy <CheckBox> a </CheckBox>
IsChecked – informace, zda je zaškrtávací tlačítko zaškrtnuto či nikoliv. Jedná se o vlastnost s datovým typem bool, tj. nabývá hodnot true nebo false

Podívejme se na příklad (StackPanel – viz dále):

<Window x:Class="WpfTutorialSamples.Basic_controls.CheckBoxSample"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="CheckBoxSample" Height="140" Width="250">

<Label FontWeight="Bold">Application Options</Label>

<CheckBox>Enable feature ABC</CheckBox>

<CheckBox IsChecked="True">Enable feature XYZ</CheckBox>

<CheckBox>Enable feature WWW</CheckBox>

</StackPanel>

</Window>

Opět je možné uživatelsky upravit obsah textu uvnitř CheckBoxu, např. pomocí vložení více TextBlock za sebou:

                <CheckBox>
                    <CheckBox.Content>
                        <WrapPanel>
                            <TextBlock Text="Zvolit "/>
                            <TextBlock Text="tuto možnost" FontWeight="Bold" 
			                  Foreground="Red"/>
                        </WrapPanel>
                    </CheckBox.Content>
                </CheckBox>

Řádku CheckBox.Content a /CheckBox.Content je možné vypustit – Content je výchozí vlastnost.

3.5. RadioButton

Rádiové tlačítko slouží pro výběr jedné možnosti z více možností. Např.:

<Window x:Class="WpfTutorialSamples.Basic_controls.RadioButtonSample"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="RadioButtonSample" Height="150" Width="250">

<Label FontWeight="Bold">Are you ready?</Label>

<RadioButton IsChecked="True">Maybe</RadioButton>

</StackPanel>

</Window>

Přes vlastnost IsChecked je pak možné přistupovat ke každému (pojmenovanému) rádiovému tlačítku.

Pro účely tohoto kurzu je tato ukázka dostačující, nicméně na tomto místě si uvedeme navíc dvě poznámky:

Standardně všechna do okna vložená radiová tlačítka patří k sobě, je tedy možné vybrat jen jedno z nich. Pokud bychom chtěli více skupin rádiových tlačítek, je vhodné použít vlastnost GroupName

Do Rádiového tlačítka lze také vložit vlastní Content – stejně, jak bylo popisováno u CheckBoxu

4. Panely

Panely slouží pro vytvoření designu (uspořádání) kontrolek na formuláři - Window (popř. uvnitř jiných kontrolek).

Ukážeme si tyto panely:

Grid - mřížka
StackPanel - uspořádání kontrolek pod sebou
WrapPanel - uspořádání kontrolek vedle sebe

4.1. Grid

Grid (mřížka) je nejčastěji používaný nástroj pro řešení layoutu (rozložení) okna. Tento panel je dokonce automaticky generován na každé nové okno. Nabízí mřížku, kterou lze pomocí různých strategií rozdělit na řádky a sloupce tak, aby okno vypadalo dobře v různých velikostech (potažmo rozlišeních obrazovky). Při troše snahy se pak obsah vykreslovaný do okna proporčně přizpůsobuje při změně velikosti okna např. myší.

Podívejme se nejprve na základní problém. Když napíšeme následující kód:

<Window x:Class="WpfTutorialSamples.Panels.Grid"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Grid" Height="300" Width="300">

<Grid>

<Button>Button 1</Button>

<Button>Button 2</Button>

</Grid>

</Window>

bude výsledek vypadat takto:

Obě tlačítka budou zobrazena přes sebe.

Pokud bychom chtěli zobrazit obě tlačítka vedle sebe, mohli bychom například zkusit následující možnost:

<Button Width="150" HorizontalAlignment="Left">Button 1</Button>

<Button Margin="150,0,0,0">Button 2</Button>

To samozřejmě zobrazí tlačítka vedle sebe, ale vše bude fungovat jen pro formulář o velikost 300x300 pixelů. Levé tlačítko si bude „držet“ šířku 150 pixelů i po zvětšení formuláře a pravé pak bude vždy vzdálené přesně 150 pixelů od levého okraje.

Co kdybychom však chtěli okno „rozpůlit“ shora-dolů a stanovit, že v levé části bude jedno tlačítko a v pravé druhé, tak, aby vše fungovalo pro libovolnou velikost okna. Zde je nutné použít právě Grid – mřížku. Definice je na první pohled poněkud obtížnější. S jejím častějším využíváním však poznáme její jednoduchost.

Ukažme si vše na zmíněném příkladu. Chceme „rozpůlit“ okno a v levé části zobrazit jedno tlačítko a v pravé druhé tlačítko.

<Window x:Class="WpfTutorialSamples.Panels.Grid"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Grid" Height="300" Width="300">

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Button>Button 1</Button>

<Button Grid.Column="1">Button 2</Button>

</Grid>

</Window>

Takto vytvořený layout bude fungovat nezávisle na velikosti okna. Popišme si tento zápis:

Grid obsahuje nejdůležitější vlastnosti ColumnDefinition a RowDefinitions, pomocí kterých se definují vlastnosti řádků a sloupců. Tato vlastnost je typu kolekce, je nutné ji tedy definovat pomocí tečkové notace (Grid.ColumnDefinition).
Jakmile jsou definovány řádky a sloupce, je možné mezi značky <Grid> a </Grid> vložit kontrolky (nebo jiné panely – vnořený Grid, WrapPanel, StackPanel). U každé vložené kontrolky, nebo panelu, je možné nově přidat vlastnost:
1. Grid.Column – v jakém sloupečku se má kontrolka nacházet
2. Grid.Row – v jakém řádku se má kontrolka nacházet
Číslování řádků a sloupců začíná 0. Grid.Column=“0“ nebo Grid.Row=“0“ není potřeba psát, neboť 0 je výchozí hodnota. Pokud u kontrolky není uveden ani Grid.Column a ani Grid.Row automaticky se předpokládá, že má být kontrolka umístěna v první buňce horní zleva.

Pozastavme se ještě u ColumnDefinition a RowDefinition. Ukažme si příklad, kde jsou předvedeny řádky i sloupce:

<Window x:Class="WpfTutorialSamples.Panels.TabularGrid"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="TabularGrid" Height="300" Width="300">

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Button>Button 1</Button>

<Button Grid.Column="1">Button 2</Button>

<Button Grid.Column="2">Button 3</Button>

<Button Grid.Row="1">Button 4</Button>

<Button Grid.Column="1" Grid.Row="1">Button 5</Button>

<Button Grid.Column="2" Grid.Row="1">Button 6</Button>

<Button Grid.Row="2">Button 7</Button>

<Button Grid.Column="1" Grid.Row="2">Button 8</Button>

<Button Grid.Column="2" Grid.Row="2">Button 9</Button>

</Grid>

</Window>

Zde vidíme, jak je možné řádky a sloupce vzájemně kombinovat. Zajímavá je zejména * u vlastnosti Width-šířka u ColumnDefinition resp. RowDefinition (zde vlastnost Height-výška). Ta značí tzv. poměrové uspořádání. V tomto případě jsou řádky i sloupce v poměru: 2*, 1*, 1*. V obecné mluvě bychom spíše napsali v poměru 2:1:1. To znamená, že si rozdělíme formulář na 4 stejné dílky a poměrově je rozdělíme. V případě, kdy je formulář široký 200 pixelů, bude jeden dílek představovat 50 pixelů, tj. první sloupec bude široký 100 pixelů a další dva po 50 pixelech (v případě tohoto příkladu to platí i pro řádky).

Šířku i výšku v rámci panelu Grid je možné definovat třemi způsoby:

Absolutně – uvedení celého čísla. To znamená počet pixelů na řádek nebo sloupec
Poměrově – číslo a hvězdička (např. 4*). To je právě ukázané poměrové uspořádání. Je výhodné vždy na formuláři mít v tomto uspořádání alespoň jednu řádku a jeden sloupec.
Automaticky (Auto) – výška řádku nebo šířka sloupce je stanovena dle obsahu

Ukažme si opět příklad:

<Window x:Class="WpfTutorialSamples.Panels.GridUnits"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="GridUnits" Height="200" Width="400">

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Button>Button 1</Button>

<Button Grid.Column="1">Button 2 with long text</Button>

<Button Grid.Column="2">Button 3</Button>

</Grid>

</Window>

Zde vidíme všechny možnosti nastavení šířky sloupce (výška řádku se nastavuje stejně). Třetí sloupec, který má nastavenou šířku 100 pixelů si ji bude držet za všech okolností. Šířka tlačítka 2 ve druhém sloupci je určena textem uvnitř tlačítka. Text můžeme samozřejmě v programu změnit – pak se bude měnit i šířka druhého sloupce. První sloupec vyplní zbývající plochu okna.

Je přípustné (a také velmi využívané), aby byla kontrolka roztažena přes více buněk (analogie – slučování buněk v Excelu). Ukažme si princip na příkladu, kde chceme, aby v prvním řádku byla dvě tlačítka a v druhém jen jedno:

<Window x:Class="WpfTutorialSamples.Panels.GridColRowSpan"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="GridColRowSpan" Height="110" Width="300">

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Button>Button 1</Button>

<Button Grid.Column="1">Button 2</Button>

<Button Grid.Row="1" Grid.ColumnSpan="2">Button 3</Button>

</Grid>

</Window>

Vše je zařízeno pomocí vlastnosti Grid.ColumnSpan, kde je definováno kolik buněk v rámci sloupců chceme spojit. Obdobně funguje i vlastnost Grid.RowSpan. Obojí lze samozřejmě kombinovat.

4.2. WrapPanel

WrapPanel (panel = kontejner) používáme všude tam, kde potřebujeme kontrolky vložit za sebe, např.

		<WrapPanel>
                    <TextBlock Text="Zadej poloměr:"/>
                    <TextBox Width="200"/>
                </WrapPanel>

Výhodou tohoto přístupu je možnost vložit jej do jakékoliv jiné kontrolky nebo panelu, např.:

Vnitřek (Content) tlačítka
Obsah buňky Grid
Nebo např. šablona pro datovou mřížku - DataGrid (mimo rozsah tohoto kurzu)

Tento přístup má i své nevýhody: výše uvedené je doporučené řešit spíše pomocí Gridu, neboť u TextBoxu je nutné uvést šířku, která bude konstantní.

Ukažme si ještě jednu zajímavou vlastnost na příkladu:

<Window x:Class="WpfTutorialSamples.Panels.WrapPanel"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="WrapPanel" Height="300" Width="300">

<Button>Test button 1</Button>

<Button>Test button 2</Button>

<Button>Test button 3</Button>

<Button Height="40">Test button 4</Button>

<Button>Test button 5</Button>

<Button>Test button 6</Button>

</WrapPanel>

</Window>

Povšimněte si, jak je přizpůsobena výška všech tlačítek v řadě dle jedné kontrolky a také jak dochází k automatickému zalamování (wrap) kontrolek dle šířky okna.

4.3. StackPanel

StackPanel je obdobný jako WrapPanel, ale s jedním rozdílem: Místo toho, aby byly kontrolky řazeny za sebou, jsou řazeny pod sebou.

<Window x:Class="WpfTutorialSamples.Panels.StackPanel"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="StackPanel" Height="160" Width="300">

<Button>Button 1</Button>

<Button>Button 2</Button>

<Button>Button 3</Button>

<Button>Button 4</Button>

<Button>Button 5</Button>

<Button>Button 6</Button>

</StackPanel>

</Window>

Jednoduchým trikem je možné ze StackPanelu vyrobit WrapPanel:

Standartní hodnota vlastnosti HorizontalAlignment je Stretch. Podívejme se, co se stane, když ji budeme měnit v rámci StackPanelu:

<Window x:Class="WpfTutorialSamples.Panels.StackPanel"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="StackPanel" Height="160" Width="300">

<Button HorizontalAlignment="Left">Button 1</Button>

<Button HorizontalAlignment="Center">Button 2</Button>

<Button HorizontalAlignment="Right">Button 3</Button>

<Button HorizontalAlignment="Right">Button 4</Button>

<Button HorizontalAlignment="Center">Button 5</Button>

<Button HorizontalAlignment="Left">Button 6</Button>

</StackPanel>

</Window>

Stránky:	Moodle ZČU
Kurz:	KPV/TI Technická informatika ve strojírenství - cvičení
Kniha:	Teorie: Popis základních kontrolek na WPF formuláři

Vytiskl(a):	Nepřihlášený host
Datum:	neděle, 8. listopadu 2026, 20.12

Teorie: Popis základních kontrolek na WPF formuláři

Popis

Obsah

1. Shrnutí základních poznatků

2. Window

3. Základní kontrolky

3.1. TextBlock

3.2. TextBox

3.3. Button

3.4. CheckBox

3.5. RadioButton

4. Panely

4.1. Grid

4.2. WrapPanel

4.3. StackPanel