Lekce 9 - Relative panel a SplitView
V minulé lekci, Základní kontrolky UWP, jsme se zabývali popisem XAML kontrolek univerzálních Windows aplikací.
Dnes si v tutoriálu vysvětlíme práci s dvěma dalšími prvky. Práci s relative panelem si vysvětlíme za pomoci tagu rectangle, který pouze vytvoří obdélník. V životě jsem nepřišel na to, jaký by tag rectangle mohl mít využití v reálné aplikaci, ale myslím, že pro výukové účely je to geniální způsob pro pochopení chování kontejnerů.
Relative panel
Tento párový tag nám umožňuje udávat pozici prvků umístěných v tomto elementu relativně k panelu, nebo k ostatním prvkům v tomto panelu. Připravíme si tedy relative panel, do kterého budeme vkládat obdélníky.
<RelativePanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch"> </RelativePanel>
Nyní umístíme obdélník doprostřed relative panelu. V relative panelu je
dobré uvádět atributy MinHeight
a MinWidth
, aby
nám obdélníky téměř nezmizely, když budeme okno stahovat do malých
rozměrů.
<Rectangle x:Name="Blue" Fill="Blue" MinWidth="50" MinHeight="50" RelativePanel.AlignHorizontalCenterWithPanel="True" RelativePanel.AlignVerticalCenterWithPanel="True" />
Abychom mohli zadávat pozici prvků relativně, musíme tyto vlastnosti
volat s prexifem RelativePanel
. Když udáváme relativní pozici
vůči panelu, jak se znázorněno výše, musíme předat logickou hodnotu
(tedy true
nebo false
). Pokud ale udáváme relativní
pozici prvku vůči jinému prvku v relative panelu, tak udáváme jako parametr
jméno daného prvku. Pojďme si vytvořit fialový obdélník, který bude
zleva přilepený k hraně relative panelu a pravou stranu bude mít zarovnanou
s naším modrým obdélníkem.
<Rectangle x:Name="Purple" Fill="Purple" MinHeight="50" MinWidth="50" RelativePanel.AlignRightWith="Blue" RelativePanel.AlignLeftWithPanel="True"/>
Ve značkovacím jazyce XAML můžeme také řadit prvky v relative panelu i
pod sebe. Vytvoříme si obdélník, který bude pod fialovým obdélníkem, a
bude zabírat všechnu šířku relative panelu. Tím nám vznikne prázdné
místo napravo od fialového obdélníku. Rovnou ho zaplníme zeleným
obdélníkem, kterému nastavíme vlastnost RelativePanel.RightOf
na Purple
. Kód bude následující:
<Rectangle x:Name="Yellow" Fill="Yellow" MinHeight="50" MinWidth="50" RelativePanel.Below="Purple" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True" /> <Rectangle x:Name="Green" Fill="Green" MinHeight="50" MinWidth="50" RelativePanel.RightOf="Purple" RelativePanel.AlignRightWithPanel="True" />
Dále si přidáme poslední obdélník a ten bude zespoda nalepený na relative panel a horní hranu bude mít zároveň s obdélníkem uprostřed. Jelikož na tento obdélník nebudou žádné návaznosti, nemusíme ho tedy pojmenovávat.
<Rectangle MinWidth="50" MinHeight="50" Fill="Black" RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignTopWith="Blue" />
Nyní si zkuste změnit kód výše na následující:
<Rectangle MinWidth="50" MinHeight="50" Fill="Black" RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignBottomWith="Blue" RelativePanel.AlignTopWith="Blue" />
Nic se nestalo, že? Je to tím, že XAML dává přednost při zarovnávání určitým elementům.
Přednosti řazení
1. S panelem
- AlignTopWithPanel
- AlignLeftWithPanel
- atd...
2. Vůči jiným prvkům
- AlignTopWith
- AlignLeftWith
- atd...
3. "Sourozenecná" pozice
- LeftOf
- Below
- atd...
SplitView
Pod pojmem splitView si můžeme představit panel, který je v levé či pravé části aplikace a při kliknutí na tlačítko se nám panel zvětší nebo zmenší tak, že se vysune zkraje aplikace.
SplitView zapíšeme jednoduše:
<SplitView x:Name="SplitView" DisplayMode="CompactInline" CompactPaneLength="15" OpenPaneLength="60" > <SplitView.Pane> <StackPanel> <Button Content="Home" /> <Button Content="Sign In" /> <Button Content="Sign Up" /> </StackPanel> </SplitView.Pane> <SplitView.Content> <StackPanel> <TextBlock Text="Text" /> <TextBlock Text="Text" /> <TextBlock Text="Text" /> </StackPanel> </SplitView.Content> </SplitView>
Do SplitView.Pane zapíšeme obsah, který bude ve vysouvacím panelu. Do SplitView.Content zapíšeme obsah, který bude před panelem.
Atributy SpliView:
- CompactPaneLength - délka panelu, když je zatažený
- OpenPaneLength - délka otevřeného panelu
- DisplayMode - Může nabývat dvou hodnot. CompactInLine - odsune obsah SplitView.Content. CompactOverlay - překryje ho.
Nakonec už sem někam přihodíme tlačítko s následující funkcí:
private void Button_Click(object sender, RoutedEventArgs e) { SplitView.IsPaneOpen = !SplitView.IsPaneOpen; }
Stáhnout
Stažením následujícího souboru souhlasíš s licenčními podmínkamiStaženo 629x (11.55 MB)