{"id":94,"date":"2015-05-06T22:15:52","date_gmt":"2015-05-06T22:15:52","guid":{"rendered":"http:\/\/gkokot.com\/?p=94"},"modified":"2017-02-05T18:41:21","modified_gmt":"2017-02-05T18:41:21","slug":"how-to-set-xaml-listview-size-to-100-in-windows-universal-application","status":"publish","type":"post","link":"https:\/\/gkokot.com\/?p=94","title":{"rendered":"How to set XAML ListView size to 100% in Windows universal application."},"content":{"rendered":"<p>We\u00a0have a ListView with ItemTemplate. In each item\u00a0We use a Grid with two rows and two columns.<br \/>\nWe want 1st column have 80% and 2nd column 20% of the total container size (in my case it is a HubSection).<\/p>\n<p>To make design based on percentage<br \/>\n1. We should add style to ListViewItem :<\/p>\n<blockquote><p><em>&lt;ListView.ItemContainerStyle&gt;<\/em><br \/>\n<em>\u00a0\u00a0\u00a0 &lt;Style TargetType=&#8221;ListViewItem&#8221;&gt;<\/em><br \/>\n<em>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;Setter Property=&#8221;HorizontalContentAlignment&#8221; Value=&#8221;Stretch&#8221;\/&gt;<\/em><br \/>\n<em>\u00a0\u00a0\u00a0 &lt;\/Style&gt;<\/em><br \/>\n<em> &lt;\/ListView.ItemContainerStyle&gt;<\/em><\/p><\/blockquote>\n<p><a href=\"https:\/\/gkokot.com\/wp-content\/uploads\/2015\/05\/GridStrechPourcentage1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-95\" src=\"https:\/\/gkokot.com\/wp-content\/uploads\/2015\/05\/GridStrechPourcentage1-300x189.png\" alt=\"GridStrechPourcentage1\" width=\"300\" height=\"189\" srcset=\"https:\/\/gkokot.com\/wp-content\/uploads\/2015\/05\/GridStrechPourcentage1-300x189.png 300w, https:\/\/gkokot.com\/wp-content\/uploads\/2015\/05\/GridStrechPourcentage1.png 529w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>2. We should change Grid columns width and use &#8220;*&#8221; as percentage:<br \/>\n(8* = 80% and 2* = 20%)<\/p>\n<blockquote><p><em>&lt;Grid.ColumnDefinitions&gt;<\/em><br \/>\n<em>\u00a0\u00a0\u00a0 &lt;ColumnDefinition Width=&#8221;8*&#8221; \/&gt;<\/em><br \/>\n<em>\u00a0\u00a0\u00a0 &lt;ColumnDefinition Width=&#8221;2*&#8221; \/&gt;<\/em><br \/>\n<em> &lt;\/Grid.ColumnDefinitions&gt;<\/em><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/gkokot.com\/wp-content\/uploads\/2015\/05\/GridStrechPourcentage2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-96\" src=\"https:\/\/gkokot.com\/wp-content\/uploads\/2015\/05\/GridStrechPourcentage2-300x136.png\" alt=\"GridStrechPourcentage2\" width=\"300\" height=\"136\" srcset=\"https:\/\/gkokot.com\/wp-content\/uploads\/2015\/05\/GridStrechPourcentage2-300x136.png 300w, https:\/\/gkokot.com\/wp-content\/uploads\/2015\/05\/GridStrechPourcentage2.png 388w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>XAML does not support percentage directly but 8* and 2* works as ratio.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We\u00a0have a ListView with ItemTemplate. In each item\u00a0We use a Grid with two rows and<a class=\"readmore btn btn-info\" href=\"https:\/\/gkokot.com\/?p=94\" rel=\"nofollow\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":1,"featured_media":99,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,7],"tags":[],"class_list":["post-94","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-windows-apps","category-xaml"],"_links":{"self":[{"href":"https:\/\/gkokot.com\/index.php?rest_route=\/wp\/v2\/posts\/94"}],"collection":[{"href":"https:\/\/gkokot.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gkokot.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gkokot.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gkokot.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=94"}],"version-history":[{"count":3,"href":"https:\/\/gkokot.com\/index.php?rest_route=\/wp\/v2\/posts\/94\/revisions"}],"predecessor-version":[{"id":101,"href":"https:\/\/gkokot.com\/index.php?rest_route=\/wp\/v2\/posts\/94\/revisions\/101"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gkokot.com\/index.php?rest_route=\/wp\/v2\/media\/99"}],"wp:attachment":[{"href":"https:\/\/gkokot.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=94"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gkokot.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=94"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gkokot.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=94"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}