Tip: Roztažení položek seznamu v UWP na šířku

Ovládací prvky ListView a ListBox v univerzální platformě Windows je možné snadno využít pro zobrazení seznamů v uživatelském rozhraní aplikace. Ve výchozí podobě zabírají jednotlivé položky seznamu pouze ten prostor, který skutečně potřebují, což se často nehodí, protože je chceme roztáhnout na celou šířku ovládacího prvku. Jak toho dosáhnout?

Ve výchozí podobě jsou prvky zarovnané vlevo. Jak je roztáhnout?

ListView a ListBox: ItemContainerStyle

Očekávali bychom, že chování zarovnání jednotlivých položek ovlivníme vlastností HorizontalContentAlignment  na ovládacím prvku. Překvapivě však tato vlastnost nemá vliv. Pro zarovnání musíme pužít styl ItemContainerStyle .

Tento styl ovlivňuje chování obalu (container) jednotlivých položek seznamu. Tento obal je reprezentován typem ListViewItem  pro ListView  a ListBoxItem  pro ListBox .

Vlastnost HorizontalAlignment  obalu nastavuje horizontální zarovnání obalu samotného. Výchozí hodnotou je Stretch . Díky tomu můžeme aktivovat položku seznamu po celé šířce, ne jen nad samotným obsahem.

Vlastnost HorizontalContentAlignment  obalu nastavuje zarovnání obsahu položky. Výchozí hodnotou je Left  a to je příčina našich problémů. Když vlastnost nastavíme na Stretch , bude položka roztažena na šířku.

Takto by mohly vypadat styly, které lze pro jednotlivé ovládací prvky použít:

A následně tyto styly můžeme využít v ovládacích prvcích:

ItemsControl

UWP XAML obsahuje ještě jeden ovládací prvek pro seznamy – ItemsControl. Ten je z uvedených nejjednodušší – chybí mu mimojiné zabudovaná interaktivita a scrolling.

Na druhou stranu je však obalem jednotlivých položek ItemsControl  pouze jednoduchý ContentPresenter , který má výchozí hodnotu vlastnosti HorizontalContentAlignment  nastavenou na Stretch , takže pro roztažení nemusíme nic dalšího dělat.

Ukázkový kód

Zdrojový kód pro tento článek je dostupný na mém GitHubu.

Shrnutí

Roztažení položek seznamů v univerzální platformě Windows je na první pohled trochu neintuitivní, ale způsob, kterým jsou ovládací prvky sestaveny, nabízí také široké možnosti přizpůsobení.

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="">

*