Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

9. díl - Relative panel a SplitView

C# .NET Formuláře Windows Store Aplikace Relative panel a SplitView

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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ženo 55x (11.55 MB)

 

 

Článek pro vás napsal Jan Blažek
Avatar
Jak se ti líbí článek?
2 hlasů
Autor se věnuje programování webových aplikacích v PHP, konkrétně Laraveru. Neštítí se asi front-endu a občas zabrousí i do Javy. C# se učí z donucení ve škole.
Miniatura
Předchozí článek
Základní kontrolky UWP
Miniatura
Všechny články v sekci
C# Windows Store aplikace
Aktivity (2)

 

 

Komentáře

Avatar
Lako
Člen
Avatar
Lako:4. července 22:23

Relative Panel byl jedna z představovaných nových fíčur UWP.
Vypadá hezky a srozumitelně, ale v praxi jsem pro něj uplatnění příliš nenašel. Nikdy mi nepřišlo, že bych to potřeboval. Jste na tom někdo jinak?

Editováno 4. července 22:23
 
Odpovědět 4. července 22:23
Avatar
Odpovídá na Lako
David Podeszwa:5. července 11:16

No hodí se spíše ve chvíli kdy je třeba poskládat controlky do nějakých neobvyklých tvarů :D. Ale jinak jsem na tom asi stejně, taky to moc nevyužívám.

 
Odpovědět 5. července 11:16
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.