Xamarin.Forms – Změna barvy vybrané položky v UWP

Xamarin.Forms obsahuje ovladací prvek ListView, který nabízí bohaté funkce včetně výběru položky seznamu. V případě UWP je barva výběru udávána aktuálním nastavením barveného motivu operačního systému. Obvyklým požadavkem však je lépe přizpůsobit aplikaci vlastnímu brandingu. V tomto článku se podíváme, jak na to.

Nahlédnutí do výchozího stylu

Pokud chceme zjistit jak je implementován výchozí vzhled zabudovaných ovladacích prvků, nejlepší místo pro to jsou výchozí styly v samotném SDK. Můžeme buď najít trochu zastaralou verzi v on-line dokumentaci, nebo aktuální přímo na našem hard disku.

V prohlížeči souborů přejděte na cestu:

C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP

V této složce najdeme podsložku pro každou nainstalovanou verzi UWP SDK. Vybereme tu, na kterou náš projekt cílí a přejděte do složky Generic kde otevřeme generic.xaml ve našem oblíbeném textovém editoru. V tomto poměrně velkém souboru vyhledáme TargetType="ListViewItem", díky čemuž bychom měli najít výchozí styl prvku ListViewItem , který poskytuje obálku pro každou položku v našem ListView.

V tomto stylu zjistíme, že mnoho různých resource založených na třídě Brush, mimojiné také vlastnost SelectedBackground . Ta je nastavena takto:

Odkud vlastně  ListViewItemBackgroundSelected pochází? Na to tu máme druhý soubor ve složce Genericthemeresources.xaml. Otevřeme jej:

Takže pouze další odkaz! Pokračujeme v hledání:

Zjistili jsme tedy, že vybraná položka je skutečně zobrazena barvou motivu systému s viditelností 0.6. Jak můžeme toto výchozí chování v Xamarin.Forms změnit?

Změna výchozí barvy

Resource pro celou aplikaci

Jednodušší, ale výrazně méně ideální cestou je přepsání resource na úrovni aplikace. Poskytneme-li vlastní SystemControlHighlightListAccentLowBrush, nahradí výchzozí náš brush všechny výskyty kde se resource používá – tedy včetně jiných ovladacích prvků.

Pokud je to to co chceme, můžeme v UWP projektu otevřít soubor App.xaml a přidat resource do resource dictionary Application:

Protože má brush stejný klíč jako ten nastavený systémem ale je výše v hierarchii, přepíše automaticky výchozí hodnotu v naší aplikaci. Všechny ListView a další prvky v naší aplikaci budou nyní namísto barvy motivu používat výraznou barvu DodgerBlue.

Custom renderer

Méně invazivní cestou je použití Xamarin custom rendereru na vytvoření nové verze ListView s custom rendererem na UWP. Nejprve vytvoříme novout třídu SelectionColorListView ve sdíleném nebo .NET Standard projektu:

Nyní napíšeme vlastní custom renderer který při prvním načtení zjistí barvu pro výběr a nahradí resource právě pro tento control.

Nyní můžeme použít náš vlastní ListView v XAMLu:

Kde local: musí být deklarovaný XAML jmený prostor v elementu ContentPage:

Poznamenejme že aktualizace již vybrané barvy za běhu bohužel není možné, protože ListView si po prvním použití brush zapamatuje a bude nadále používat resource který nalezl poprvé.

Další vylepšení

Pro sjednocení přes různé platformy bychom mohli implementovat custom rederer na Androidu a iOS. Není to však povinné, protože Xamarin.Forms jinak bude prostě používat výchozí ListViewRenderer a ignorovat vlastnost SelectionColor.

Navíc bychom také mohli přizpůsobit i ostatní barvy ListViewItem – barvu při přejetí myši nad položkou, barvu při stisknutí, atd. Toho dosáhneme přesně stejným postupem jako výše.

Budoucnost

Na konferenci Build 2018 Microsoft představil připravovaný nástroj, který automaticky vygeneruje pro vaši aplikaci barevné styly odpovídající zadanému brandingu. To naše životy výrazně zjednodušší a přestylování celé aplikace už půjde levou zadní.

Zdrojový kód

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

Shrnutí

Úprava výchozích stylů UWP aplikace v Xamarin.Forms je trochu komplikovanější než v klasických UWP projektech. Pokud nechcete měnit vzhled všech ovladacích prvků, použijte custom renderer a změny aplikujte pouze tam.

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.