{"id":287,"date":"2017-10-12T15:51:04","date_gmt":"2017-10-12T15:51:04","guid":{"rendered":"http:\/\/sezeromer.com\/?p=287"},"modified":"2018-03-04T21:50:33","modified_gmt":"2018-03-04T21:50:33","slug":"xamarin-sayfa-duzenleri-layout","status":"publish","type":"post","link":"https:\/\/sezeromer.com\/en\/xamarin-sayfa-duzenleri-layout\/","title":{"rendered":"Xamarin Layout"},"content":{"rendered":"<p>One of the most important issues in <strong>Xamarin<\/strong> is page layouts. It must be very well known in terms of design. Otherwise you may face a disgusting design. For this, <strong>Xamarin<\/strong> offers us 9 Layouts. You can use the 9 layouts below, depending on what layout you want.<\/p>\n<ol>\n<li><strong> Content Presenter<\/strong><\/li>\n<li><strong>Content View<\/strong><\/li>\n<li><strong>Scroll View<\/strong><\/li>\n<li><strong>Frame\u00a0<\/strong><\/li>\n<li><strong>Templated View<\/strong><\/li>\n<li><strong>Stack Layout<\/strong><\/li>\n<li><strong>Absolute Layout<\/strong><\/li>\n<li><strong>Realtive Layout<\/strong><\/li>\n<li><strong>Grid Layout<\/strong><\/li>\n<\/ol>\n<p>Short brief information about these is below.<\/p>\n<h2>1-Content Presenter<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-289\" src=\"http:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Content-Presenter.png\" alt=\"\" width=\"1000\" height=\"499\" srcset=\"https:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Content-Presenter.png 1000w, https:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Content-Presenter-300x150.png 300w, https:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Content-Presenter-768x383.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p>We can use the <strong>Content Presente<\/strong>r to display views in the form of a template. It separates the page completely as it covers the information in the upper bar of the page. It must be used in the Control Template to determine where the content to be displayed is located. You can use it if you want to show an image or video in your application or talk about an important post.<\/p>\n<h2>2- Content View<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-290\" src=\"http:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Content-View.png\" alt=\"\" width=\"1000\" height=\"500\" srcset=\"https:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Content-View.png 1000w, https:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Content-View-300x150.png 300w, https:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Content-View-768x384.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p><strong>Content View<\/strong> is a page layout that we can find in almost every application we know. The Content Presenter has a setup so that the upper bar is visible. It has a single content. The purpose is to provide a base class for user-defined composite views. You can also use it visually.<\/p>\n<h2>3- Frame<\/h2>\n<p>The <strong>frame<\/strong> is designed to automatically paddle 20 paddings. So if you are going to use <strong>Frame<\/strong>, you should be prepared for this. All page layouts are similar and there are only a few minor changes. If you need what you need, you can use Layoutu.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-292\" src=\"http:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Frame.png\" alt=\"\" width=\"1000\" height=\"500\" srcset=\"https:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Frame.png 1000w, https:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Frame-300x150.png 300w, https:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Frame-768x384.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h2>4- Scroll View<\/h2>\n<p><strong>Scroll<\/strong> <strong>View<\/strong> is probably one of the most important <strong>Layouts<\/strong>. Unlike other pages, we can drag the page down. This feature also gives us more page space. If you have a long letter or if you make a registration screen and get a lot of information, you can use this scheme. It&#8217;s not just limited to these. You can use it as you like.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-293\" src=\"http:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Svroll-View.png\" alt=\"\" width=\"1000\" height=\"500\" srcset=\"https:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Svroll-View.png 1000w, https:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Svroll-View-300x150.png 300w, https:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Svroll-View-768x384.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h2>5- Templated View<\/h2>\n<p>Almost the same as <strong>Templated View<\/strong> Content Presenter. Even though their usage is different, the two page structure is very similar. So you can choose both. I do not think there&#8217;s going to be a problem.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-294\" src=\"http:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Templated-View.png\" alt=\"\" width=\"1000\" height=\"499\" srcset=\"https:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Templated-View.png 1000w, https:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Templated-View-300x150.png 300w, https:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Templated-View-768x383.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h2>6- Absolute Layout<\/h2>\n<p>With <strong>Absolute Layout<\/strong> you can give the X, Y coordinates to decide where the page will stop. It is, of course, controversial how much relative prominence the progeny will have. They have users but it makes more sense to use them for small projects. Because there are many devices with different resolution. There is not much to say about the resolution difference between a 3-inch device and a TV, but of course you can only develop it for devices of the following size.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-295\" src=\"http:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Absolute-Layout.png\" alt=\"\" width=\"1000\" height=\"500\" srcset=\"https:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Absolute-Layout.png 1000w, https:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Absolute-Layout-300x150.png 300w, https:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Absolute-Layout-768x384.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h2>7- Grid<\/h2>\n<p>By giving the number of rows and columns with the <strong>Grid<\/strong>, you actually get a relative view.<\/p>\n<div>\n<div>&lt;Grid&gt;<\/div>\n<div>\u00a0 \u00a0 &lt;Grid.ColumnDefinitions&gt;<\/div>\n<div>\u00a0 \u00a0 \u00a0 \u00a0 &lt;ColumnDefinitionWidth=&#8221;*&#8221;\/&gt;<\/div>\n<div>\u00a0 \u00a0 \u00a0 \u00a0 &lt;ColumnDefinitionWidth=&#8221;80&#8243;\/&gt;<\/div>\n<div>\u00a0 \u00a0 &lt;\/Grid.ColumnDefinitions&gt;<\/div>\n<div>\u00a0 \u00a0 &lt;Grid.RowDefinitions&gt;<\/div>\n<div>\u00a0 \u00a0 \u00a0 \u00a0 &lt;RowDefinitionHeight=&#8221;*&#8221;\/&gt;<\/div>\n<div>\u00a0 \u00a0 &lt;\/Grid.RowDefinitions&gt;<\/div>\n<\/div>\n<div><\/div>\n<div>In this way, we add rows and columns. We also specify the row and column with the Grid.Row or Grid.Column in the properties of the item to specify.<\/div>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-297\" src=\"http:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Grid.png\" alt=\"\" width=\"1000\" height=\"500\" srcset=\"https:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Grid.png 1000w, https:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Grid-300x150.png 300w, https:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Grid-768x384.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/div>\n<h2>8- Relative Layout<\/h2>\n<p>If you want your application to be completely relative, you need to use <strong>Relative<\/strong> <strong>Layout<\/strong>. This arrangement tells you where an item is to be found in the other item, making it look the same whether it is a very large screen or a very small phone. This makes it very easy for you from the visual point of view.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-298\" src=\"http:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Relative-Layout.png\" alt=\"\" width=\"1000\" height=\"500\" srcset=\"https:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Relative-Layout.png 1000w, https:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Relative-Layout-300x150.png 300w, https:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Relative-Layout-768x384.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h2>9- Stack Layout<\/h2>\n<p>When you use Xamarin you will use layout <strong>Stack Layout.<\/strong> Because when you use the grid, you use the relative layout, ie you use the stack layout what you use. You can only use <strong>stack<\/strong> <strong>layout<\/strong> on a page. If you are going to use a flat page.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-299\" src=\"http:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Stack-Layout.png\" alt=\"\" width=\"1000\" height=\"500\" srcset=\"https:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Stack-Layout.png 1000w, https:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Stack-Layout-300x150.png 300w, https:\/\/sezeromer.com\/wp-content\/uploads\/2017\/10\/Xamarin-Layout-Stack-Layout-768x384.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p>&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>One of the most important issues in Xamarin is page layouts. It must be very well known in terms of design. Otherwise you may face a disgusting design. For this, Xamarin offers us 9 Layouts. You can use the 9 layouts below, depending on what layout you want. Content Presenter Content View Scroll View Frame\u00a0 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":300,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[289,288,3],"tags":[133,137,136,135,132,129,7,131,128,134,130,22],"class_list":["post-287","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-android","category-ios","category-xamarin-ile-yapilmis-projeler","tag-absolute-layout","tag-content-presenter","tag-content-view","tag-frame","tag-grid","tag-layout","tag-omer-sezer","tag-relative-layout","tag-sayfa-duzenleri","tag-scroll-view","tag-stack-layout","tag-xamarin"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/posts\/287"}],"collection":[{"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/comments?post=287"}],"version-history":[{"count":5,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/posts\/287\/revisions"}],"predecessor-version":[{"id":1042,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/posts\/287\/revisions\/1042"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/media\/300"}],"wp:attachment":[{"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/media?parent=287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/categories?post=287"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/tags?post=287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}