Přizpůsobení jezdce UWP Slideru

Výchozí podoba ovladacího prvku Slider v UWP zahrnuje velmi jednoduchý obdelníkový jezdec. Naštěstí, díky přizpůsobivosti XAML designu můžeme tento výchozí jezdec efektivně nahradit jakýmkoliv jiným ovladacím prvkem dle naší potřeby a dodat tak naší aplikaci svěží a unikátní vzhled.

Custom thumb
Vlastní jezdec

Výchozí šablona ovladacího prvku Slider obsahuje vnitřní styl pro prvek Thumb:

Jak můžeme vidět, Thumb používá Border s malým zaoblením rohů pomocí CornerRadius. Obsah této šablony však můžeme snadno odstranit a nahradit čímkoliv jiným v našem arzenálu. Skvělým příkladem může být jednoduchý Image:

Navíc, pokud je vaše ikona monochromatická, můžeme použít prvek BitmapIcon protože automaticky přejme výhozí barvu motivu systému.

Chybí nám však ještě jedna maličkost. Výchozí Slider explicitně nastavuje Width a Height jezdce na poměrně malé hodnoty to be quite small. Vyhledejme tedy elementy se jmény HorizontalThumb and VerticalThumb a upravme jejich velikost tak, aby více odpovídala našim představám:

Celý styl

Zdrojový kód

Ukázkový kód k tomuto článku najdete na mém GitHubu.

Shrnutí

Podívali jsme se, na to, jak je určen vzhled Thumb uvnitřSlideru. Přestože jde o jednoduchý trik, může být velmi užitečný pro zvýšení uživatelské přívětivosti vaší aplikace.

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.