{"id":13691772,"url":"https://github.com/jsuarezruiz/AlohaKit.Layouts","last_synced_at":"2025-05-02T15:32:59.451Z","repository":{"id":60403954,"uuid":"494738728","full_name":"jsuarezruiz/AlohaKit.Layouts","owner":"jsuarezruiz","description":".NET MAUI Layouts Library","archived":false,"fork":false,"pushed_at":"2024-06-04T10:02:04.000Z","size":1106,"stargazers_count":129,"open_issues_count":4,"forks_count":13,"subscribers_count":9,"default_branch":"main","last_synced_at":"2024-12-13T03:30:55.968Z","etag":null,"topics":["alohakit","dotnet","dotnet-maui","layout"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsuarezruiz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["jsuarezruiz"]}},"created_at":"2022-05-21T09:32:17.000Z","updated_at":"2024-11-28T22:12:57.000Z","dependencies_parsed_at":"2024-04-08T02:06:06.314Z","dependency_job_id":"2cf6eea1-875b-4eff-bed0-b68508907d2a","html_url":"https://github.com/jsuarezruiz/AlohaKit.Layouts","commit_stats":{"total_commits":16,"total_committers":1,"mean_commits":16.0,"dds":0.0,"last_synced_commit":"dc6023b3376b8e965dee7280a3c9b26a24cfd105"},"previous_names":["jsuarezruiz/mauipane"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsuarezruiz%2FAlohaKit.Layouts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsuarezruiz%2FAlohaKit.Layouts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsuarezruiz%2FAlohaKit.Layouts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsuarezruiz%2FAlohaKit.Layouts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsuarezruiz","download_url":"https://codeload.github.com/jsuarezruiz/AlohaKit.Layouts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252063140,"owners_count":21688655,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alohakit","dotnet","dotnet-maui","layout"],"created_at":"2024-08-02T17:00:50.274Z","updated_at":"2025-05-02T15:32:58.457Z","avatar_url":"https://github.com/jsuarezruiz.png","language":"C#","funding_links":["https://github.com/sponsors/jsuarezruiz"],"categories":["Components","UI"],"sub_categories":[],"readme":"# AlohaKit Layouts\n\n\u003cdiv align=\"center\"\u003e\n   \u003ca href=\"https://www.nuget.org/packages/AlohaKit.Layouts\"\u003e\u003cimg src=\"https://img.shields.io/nuget/v/AlohaKit.Layouts?color=blue\u0026style=flat-square\u0026logo=nuget\"\u003e\u003c/a\u003e\n   \u003ca href=\"https://www.nuget.org/packages/AlohaKit.Layouts\"\u003e\u003cimg src=\"https://img.shields.io/nuget/dt/AlohaKit.Layouts.svg?style=flat-square\"\u003e\u003c/a\u003e\n   \u003ca href=\"./LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/github/license/jsuarezruiz/AlohaKit.Layouts?style=flat-square\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n.NET MAUI **Layouts** Library.\n\n![AlohaKit.Layouts](https://raw.githubusercontent.com/jsuarezruiz/AlohaKit.Layouts/main/images/alohakit-layouts-promo.png)\n\n_NOTE: This library is a port of [XamPane](https://github.com/jsuarezruiz/Xampane)._\n\n## Usage\n\n**Step 1**: Include the AlohaKit.Layouts package reference in your project. \n\n**Step 2**: Use the **UseAlohaKitLayouts** extension method in your MauiProgram class.\n\n**Step 3**: Enjoy coding!.\n\n### CircularLayout\n\nThe CircularLayout is a simple Panel derivative that lays out its children in a **circular** arrangement. It has some useful properties to allow some customization like the Orientation (Clockwise or Counterclockwise).\n\n```\n\u003calohakit:CircularLayout\n    Orientation=\"Clockwise\"\u003e\n    \u003cBoxView Color=\"Black\" CornerRadius=\"6\" WidthRequest=\"6\" HeightRequest=\"6\" /\u003e       \n    \u003cBoxView Color=\"Red\" CornerRadius=\"12\" WidthRequest=\"12\" HeightRequest=\"12\" alohakit:CircularLayout.Angle=\"0\" alohakit:CircularLayout.Radius=\"120\" /\u003e\n    \u003cBoxView Color=\"Green\" CornerRadius=\"12\" WidthRequest=\"12\" HeightRequest=\"12\" alohakit:CircularLayout.Angle=\"10\" alohakit:CircularLayout.Radius=\"120\" /\u003e\n    \u003cBoxView Color=\"Blue\" CornerRadius=\"12\" WidthRequest=\"12\" HeightRequest=\"12\" alohakit:CircularLayout.Angle=\"20\" alohakit:CircularLayout.Radius=\"120\" /\u003e\n    \u003cBoxView Color=\"Yellow\" CornerRadius=\"12\" WidthRequest=\"12\" HeightRequest=\"12\" alohakit:CircularLayout.Angle=\"30\" alohakit:CircularLayout.Radius=\"120\" /\u003e\n    \u003cLabel Text=\"1\" alohakit:CircularLayout.Angle=\"30\" alohakit:CircularLayout.Radius=\"90\" /\u003e\n    \u003cLabel Text=\"2\" alohakit:CircularLayout.Angle=\"60\" alohakit:CircularLayout.Radius=\"90\" /\u003e\n    \u003cLabel Text=\"3\" alohakit:CircularLayout.Angle=\"90\" alohakit:CircularLayout.Radius=\"90\" /\u003e\n    \u003cLabel Text=\"4\" alohakit:CircularLayout.Angle=\"120\" alohakit:CircularLayout.Radius=\"90\" /\u003e\n    \u003cLabel Text=\"5\" alohakit:CircularLayout.Angle=\"150\" alohakit:CircularLayout.Radius=\"90\" /\u003e\n    \u003cLabel Text=\"6\" alohakit:CircularLayout.Angle=\"180\" alohakit:CircularLayout.Radius=\"90\" /\u003e\n    \u003cLabel Text=\"7\" alohakit:CircularLayout.Angle=\"210\" alohakit:CircularLayout.Radius=\"90\" /\u003e\n    \u003cLabel Text=\"8\" alohakit:CircularLayout.Angle=\"240\" alohakit:CircularLayout.Radius=\"90\" /\u003e\n    \u003cLabel Text=\"9\" alohakit:CircularLayout.Angle=\"270\" alohakit:CircularLayout.Radius=\"90\" /\u003e\n    \u003cLabel Text=\"10\" alohakit:CircularLayout.Angle=\"300\" alohakit:CircularLayout.Radius=\"90\" /\u003e\n    \u003cLabel Text=\"11\" alohakit:CircularLayout.Angle=\"330\" alohakit:CircularLayout.Radius=\"90\" /\u003e\n    \u003cLabel Text=\"12\" alohakit:CircularLayout.Angle=\"360\" alohakit:CircularLayout.Radius=\"90\" /\u003e\n\u003c/alohakit:CircularLayout\u003e\n```\n\n![CircularLayout](https://raw.githubusercontent.com/jsuarezruiz/AlohaKit.Layouts/main/images/circularlayout.png)\n\n### DockLayout\n\nThe DockLayout allows you to **dock** the child controls to the top, bottom, left or right. By default, the last control, if not given a specific dock position, will fill the remaining space. You can achieve the same with the Grid panel, but for the simpler situations, the DockLayout will be easier to use. Use the DockLayout whenever you need to dock one or several controls to one of the sides, like for dividing up the screen into specific areas.\n\n```\n\u003calohakit:DockLayout\n    LastChildFill=\"False\"\u003e\n    \u003cButton alohakit:DockLayout.Dock=\"Top\" Text=\"Top\" HeightRequest=\"50\"/\u003e\n    \u003cButton alohakit:DockLayout.Dock=\"Bottom\" Text=\"Bottom\" HeightRequest=\"50\"/\u003e\n    \u003cButton alohakit:DockLayout.Dock=\"Left\" Text=\"Left\" WidthRequest=\"60\"/\u003e\n    \u003cButton alohakit:DockLayout.Dock=\"Left\" Text=\"Left\" WidthRequest=\"60\"/\u003e\n    \u003cButton alohakit:DockLayout.Dock=\"Right\" Text=\"Right\" WidthRequest=\"80\"/\u003e\n    \u003cButton alohakit:DockLayout.Dock=\"Right\" Text=\"Right\" WidthRequest=\"80\"/\u003e\n\u003c/alohakit:DockLayout\u003e\n```\n\n![DockLayout](https://raw.githubusercontent.com/jsuarezruiz/AlohaKit.Layouts/main/images/docklayout.png)\n\n### UniformGrid\n\nThe UniformGrid is just like the Grid, with the possibility of multiple rows and columns, but with one important difference: All rows and columns will have the **same size**. Use this when you need the Grid behavior without the need to specify different sizes for the rows and columns.\n\n```\n\u003calohakit:UniformGrid\u003e\n    \u003cBoxView Color=\"Red\" /\u003e\n    \u003cBoxView Color=\"Yellow\" /\u003e\n    \u003cBoxView Color=\"Orange\" /\u003e\n    \u003cBoxView Color=\"Purple\" /\u003e\n    \u003cBoxView Color=\"Blue\" /\u003e\n    \u003cBoxView Color=\"Green\" /\u003e\n    \u003cBoxView Color=\"LightGreen\" /\u003e\n    \u003cBoxView Color=\"Gray\" /\u003e\n    \u003cBoxView Color=\"Pink\" /\u003e\n\u003c/alohakit:UniformGrid\u003e\n```\n\n![UniformGrid](https://raw.githubusercontent.com/jsuarezruiz/AlohaKit.Layouts/main/images/uniformgrid.png)\n\n### WrapLayout\n\nThe WrapLayout will position each of its child controls next to the other, horizontally (default) or vertically, until there is no more room, where it will **wrap** to the next line and then continue. Use it when you want a vertical or horizontal collection controls that automatically wraps when there's no more room.\n\n```\n\u003calohakit:WrapLayout \n    Orientation=\"Vertical\"\n    Spacing=\"6\"\n    HorizontalOptions=\"Center\"\u003e\n    \u003cBoxView Color=\"Red\" /\u003e\n    \u003cBoxView Color=\"Yellow\" /\u003e\n    \u003cBoxView Color=\"Orange\" /\u003e\n    \u003cBoxView Color=\"Purple\" /\u003e\n    \u003cBoxView Color=\"Blue\" /\u003e\n    \u003cBoxView Color=\"Green\" /\u003e\n    \u003cBoxView Color=\"LightGreen\" /\u003e\n    \u003cBoxView Color=\"Gray\" /\u003e\n    \u003cBoxView Color=\"Pink\" /\u003e\n\u003c/alohakit:WrapLayout\u003e\n```\n\n![WrapLayout](https://raw.githubusercontent.com/jsuarezruiz/AlohaKit.Layouts/main/images/wraplayout.png)\n\n## Feedback\n\nPlease use [GitHub issues](https://github.com/jsuarezruiz/AlohaKit.Layouts/issues) for questions or comments.\n\n## Copyright and license\n\nCode released under the [MIT license](https://opensource.org/licenses/MIT).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsuarezruiz%2FAlohaKit.Layouts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsuarezruiz%2FAlohaKit.Layouts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsuarezruiz%2FAlohaKit.Layouts/lists"}