Přizpůsobení položky nastavení v UWP NavigationView

V tomto článku se podíváme, jak můžeme přizpůsobit vzhled položky nastavení v ovladacím prvku NavigationView v UWP aplikacích.

Custom settings item
Vlastní vzhled položky settings

“Zadrátované” settings

Fakt, že položka nastavení je v NavigationView zabudována “natvrdo” jsem si poprvé uvědomil, když jsem se pokoušel zodpovědět tuto otázku od @Xinpeng na Stack Overflow a zaskočilo mě to. Tato konkrétní položka není součástí NavigationView.PaneFooter, nýbrž je umístně ještě pod ním. A přesto, že vývojář může rozhodnout zda je zobrazena, není možné přímo manipulovat s jejími vlastnostmi.

Prvním nápadem, který jsem dostal, bylo jednoduše vytvořit vlastní položku v sekci PaneFooter. Tím však ztrácíme důležitou funkci – indikátor vybraného prvku v NavigationView a s ním spojenou animaci.

Podíval jsem se tedy místo toho do výchozí šablony NavigationView a našel následující:

Položka nastavení je zde definována spolu se svou ikonou, takže její upravení je snadné. To samé se však nedá říci o textu. Ukazuje se, že ovladací prvek nastavuje vlastnost NavigationViewItem.Content v kódu na lokalizovaný text Settings.

Vlastní NavigationView

Ideální řešení problému vyžaduje zdědit vlastní třídu od NavigationView. Systém aplikuje výchozí šablonu v OnApplyTemplate a v té samé chvíli nastaví Content položky nastavení na lokalizovaný text. Zde přicházíme na řadu my.

Nejprve vytvořme tříduCustomizableNavigationView:

Přidáme dvě dependency properties – jednu pro ikonu a jednu pro požadovaný text. Kód zatím nelze zkompilovat, protože používáme metodu SettingsItemChanged kterou implementujeme později.

Nyní můžeme přepsat virtuální metodu OnApplyTemplate. Nejdříve necháme pracovat samotný ovladací prvek voláním base implementace a pak z šablony vezmeme položku dle jména a modifikujeme ho.

Aktualizace položky je přímočará, pomocí aktuálních hodnot našich dependency properties.

Nakonec pro plnohodnotnou podporu dependency properties implementujeme také property changed callback a aktualizujeme naši položku i zde.

Použití výsledného ovladacího prvku je snadné. Přidáme deklaraci XML namespace do hlavičky stránky:

A nyní použijeme místo NavigationView:

Zdrojový kód

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

Shrnutí

I když NavigationView obsahuje zabudovanou položku pro nastavení, není jednoduché její vzhled přizpůsobit. Stejného výsledku však naštěstí můžeme dosáhnout modifikací samotného ovladacího prvku.

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.