{"id":626,"date":"2016-11-17T10:59:45","date_gmt":"2016-11-17T10:59:45","guid":{"rendered":"https:\/\/ibex.tech\/windows-iot\/?p=79"},"modified":"2016-11-17T10:59:45","modified_gmt":"2016-11-17T10:59:45","slug":"grid","status":"publish","type":"post","link":"https:\/\/ibex.tech\/csharp\/uwp-programming-in-c\/windows-and-pages\/grid","title":{"rendered":"Grid"},"content":{"rendered":"<p>\n\t&nbsp;\n<\/p>\n<h4>\n\tProportional Sizing (star sizing)<br \/>\n<\/h4>\n<p>\n\tWhen a single row&rsquo;s height or column&rsquo;s width is set to *, it occupies all the remaining space.\n<\/p>\n<p>\n\tWhen multiple rows or columns use *, the remaining space is divided equally between them.\n<\/p>\n<p>\n\tRows and columns can place a coefficient in front of the asterisk (like 2* or 5.5*) to take proportionately more space than other columns using the asterisk notation. A column with width 2* is always twice the width of a column with width * (which is 1*) in the same Grid.&nbsp;\n<\/p>\n<h4>\n\tPercentage Sizing<br \/>\n<\/h4>\n<p>\n\tStretch = 100%\n<\/p>\n<p>\n\tOtherwise you need to use the * star sizing, percentage values&nbsp;are not supported.\n<\/p>\n<h4>\n\tGrid cells background&nbsp;colour, padding, borders, etc<br \/>\n<\/h4>\n<p>\n\tBackground color and border\n<\/p>\n<p style=\"margin-left: 40px\">\n\tAdd a Rectangle which stretches to fill the cell with the fill and&nbsp;stroke (border) you want. &nbsp;Or&nbsp;you can use a Border element and set its BorderBrush appropriately (gives better performance). &nbsp;Be sure to add these to the grid before adding any of the other children (or explicitly mark them with the ZIndex attached property), so their Z order puts them behind the main content.\n<\/p>\n<p>\n\tCell padding\n<\/p>\n<p style=\"margin-left: 40px\">\n\tUse autosizing and set the Margin on the child element.\n<\/p>\n<p>\n\t&nbsp;\n<\/p>\n<p>\n\t&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; Proportional Sizing (star sizing) When a single row&rsquo;s height or column&rsquo;s width is set to *, it occupies all the remaining space. When multiple rows or columns use *, the remaining space is divided equally between them. Rows and columns can place a coefficient in front of the asterisk (like 2* or 5.5*) to [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[67],"tags":[],"class_list":["post-626","post","type-post","status-publish","format-standard","hentry","category-windows-and-pages"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/posts\/626","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/comments?post=626"}],"version-history":[{"count":0,"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/posts\/626\/revisions"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/media?parent=626"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/categories?post=626"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/tags?post=626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}