{"id":13712744,"url":"https://github.com/Intelliabb/XamCustomLayouts","last_synced_at":"2025-05-06T22:31:26.261Z","repository":{"id":91545626,"uuid":"125798786","full_name":"Intelliabb/XamCustomLayouts","owner":"Intelliabb","description":"Xamarin.Forms Custom Layouts - Cards","archived":false,"fork":false,"pushed_at":"2018-12-04T03:28:51.000Z","size":301,"stargazers_count":18,"open_issues_count":0,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-13T23:32:29.583Z","etag":null,"topics":["card","custom","forms","layouts","xamarin","xaml"],"latest_commit_sha":null,"homepage":null,"language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Intelliabb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2018-03-19T03:53:22.000Z","updated_at":"2023-09-08T17:38:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"f072e9a2-0866-4336-a28f-175b34a21f34","html_url":"https://github.com/Intelliabb/XamCustomLayouts","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intelliabb%2FXamCustomLayouts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intelliabb%2FXamCustomLayouts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intelliabb%2FXamCustomLayouts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intelliabb%2FXamCustomLayouts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Intelliabb","download_url":"https://codeload.github.com/Intelliabb/XamCustomLayouts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252779070,"owners_count":21802876,"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":["card","custom","forms","layouts","xamarin","xaml"],"created_at":"2024-08-02T23:01:22.159Z","updated_at":"2025-05-06T22:31:25.524Z","avatar_url":"https://github.com/Intelliabb.png","language":"C#","funding_links":[],"categories":["UI"],"sub_categories":[],"readme":"# Card View Using Custom Layouts In Xamarin.Forms\nThis sample shows how to create a custom layout (container) that can be reused in the app and can take any `View` as child.\n\nDownload NuGet Package: https://www.nuget.org/packages/IntelliAbb.Xamarin.Controls\n\nBlog post: https://intelliabb.com/2018/03/21/card-view-for-xamarin-forms-using-custom-layouts/\n\n## Card View\n\n### iOS\n\n![iOS](/Screenshots/ios.png)\n\n### Android\n\n![Android](/Screenshots/android.png)\n\n## Parts\n1. Icon\n2. Title\n3. Content View (`ContentPresenter`)\n4. Action View (`ContentPresenter`)\n\nAll parts are optional. You can mix and match to your needs.\n\n## Usage\n\n### In XAML\nDepending on where you place your custom layout/control, bring in the namespace, if needed.\n\n`xmlns:controls=\"clr-namespace:XamCustomLayouts.Controls;assembly=XamCustomLayouts.Controls\" `\n\nthen,\n```\n\u003ccontrols:ShadedCard Icon=\"profile.png\" Title=\"Card With Shadow\" CornerRadius=\"0\" HasShadow=\"true\" TitleStyle=\"{StaticResource SectionTitleText}\"\u003e\n  \u003ccontrols:ShadedCard.CardContent\u003e\n      \u003cLabel Text=\"Welcome to intelliAbb!\" VerticalOptions=\"Center\" HorizontalOptions=\"Center\" /\u003e\n  \u003c/controls:ShadedCard.CardContent\u003e\n  \u003ccontrols:ShadedCard.ActionView\u003e\n      \u003cButton Text=\"Update\"/\u003e\n  \u003c/controls:ShadedCard.ActionView\u003e\n\u003c/controls:ShadedCard\u003e\n\n```\n\n### In C#\n```\nvar card = new ShadedCard {\n  Icon = \"icon.png\",\n  Title = \"My Card\",\n  ContentView = new StackLayout {\n    . . .\n  },\n  ActionView = new StackLayout {\n    . . .\n  },\n};\n\n// assuming you have a child-bearing container as parent,\nParent.Children.Add(card);\n```\n\n## MVVM Data Binding\nIf you are using MVVM in your Xamarin.Forms app (as you should :)), you will find that binding to a control inside a view that is child of this card view, the implicit bindings will not work as the child control does not know about the grandparent control (page) and it's binding context. So, you will have to explicitly bind to the page's binding context by simply doing the following,\n\n1. Name your page. i.e. `\u003c... x:Name=\"MyPage\"/\u003e`\n2. Bind explicitly. i.e. `\u003cLabel Text=\"{Binding BindingContext.PropertyName, Source={x:Reference MyPage}}\"/\u003e`\n\nThat is it. You just told your grand child control/view to bind to `MyPage`'s `BindingContext`, which is your `ViewModel`.\n\nEnjoy!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIntelliabb%2FXamCustomLayouts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FIntelliabb%2FXamCustomLayouts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIntelliabb%2FXamCustomLayouts/lists"}