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;
}