Skrytí hlavičky NavigationView v UWP

Ovladací prvek NavigationView který byl přidán v aktualizaci Fall Creators Update pro Windows 10 je velmi užitečný nástroj pro vytváření uživatelsky přívětivé hamburger menu navigace, která zapadá do UX guidelines UWP aplikací. NavigationView obsahuje prostor pro hlavičku, kam můžete vložit titulek vaší stránky aplikace. Co když však hlavičku nechceme zobrazovat?

Minimální problém

NavigationView má vlastnost AlwaysShowHeader , která nám umožňuje specifikovat, zda chceme hlavičku vždy zobrazovat nebo ne. Tato vlastnost se chová přesně jak potřebujeme až do té doby, kdy okno aplikace zmenšíme a NavigationView se přepne do módu Minimal.

Minimal mode shows the header
V minimálním módu je prostor pro hlavičku zobrazen

Ikdyž je hlavička prázdná, náš obsah je posunut dolů, aby pro ni vytvořil místo. To není úplně uživatelsky přívětivé, především na malých displejích (jako telefonních), kde se každý pixel počítá.

Skrytý v šabloně

Když se zahloubáme do výchozího stylu NavigationView, můžeme zde najít následující XAML definici:

Problém je poměrně zřejmý – vlastnost MinHeight hlavičky je nastavena na 48 efektivních pixelů. V módu Minimal je header vždy zobrazen a i v případě že nic neobsahuje, zabírá cenných 48 pixelů z výšky vaší aplikace.

Řešení je velmi snadné – můžeme vlastnost MinHeight prostě odstranit.

The header is gone!
The header is gone!

S tímto řešením je hlavička “neviditelná”, ale pokud do ni vložíme nějaký obsah, znovu ji můžeme snadno zobrazit.

Samozřejme si musíme nyní dát pozor, že levý horní roh našeho obsahu může být zakryt tlačítkem pro otevření hamburger menu.Tento problém nástává pouze v módu Minimal, takže lze použít VisualStateTrigger a přidat požadované levé odsazení prvkům vaší stránky.

Zde je zdrojový kód celého aktualizovaného Style. Můžete je také najít ve zdrojovém kódu k tomuto článku na GitHubu.

Ukázkový kód

Zdrojový kód k tomuto článku je k dispozici na mém GitHubu.

Shrnutí

Ukázali jsme si jak vynutit v NavigationView skrytí hlavičky i v módu Minimal aby obsah naší aplikace byl úplně bez hranic.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.