{"id":16687138,"url":"https://github.com/redth/maui.contentbutton","last_synced_at":"2025-03-21T18:33:16.941Z","repository":{"id":256232133,"uuid":"854674052","full_name":"Redth/Maui.ContentButton","owner":"Redth","description":"WIP: Button that can take any content inside of it while still acting like a native button","archived":false,"fork":false,"pushed_at":"2024-12-06T20:49:48.000Z","size":312,"stargazers_count":20,"open_issues_count":3,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-15T01:05:00.254Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/Redth.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":"2024-09-09T15:28:31.000Z","updated_at":"2025-03-14T08:51:06.000Z","dependencies_parsed_at":"2024-09-09T19:16:49.824Z","dependency_job_id":"3041792e-43e1-4203-9209-6cb3e6692b64","html_url":"https://github.com/Redth/Maui.ContentButton","commit_stats":null,"previous_names":["redth/maui.contentbutton"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Redth%2FMaui.ContentButton","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Redth%2FMaui.ContentButton/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Redth%2FMaui.ContentButton/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Redth%2FMaui.ContentButton/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Redth","download_url":"https://codeload.github.com/Redth/Maui.ContentButton/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244849442,"owners_count":20520715,"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":[],"created_at":"2024-10-12T15:07:55.780Z","updated_at":"2025-03-21T18:33:16.635Z","avatar_url":"https://github.com/Redth.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Maui.ContentButton\nButton that can take any content inside of it while still acting like a native button\n\n![NuGet Version](https://img.shields.io/nuget/v/Plugin.Maui.ContentButton?style=flat\u0026logo=nuget\u0026logoColor=ffffff\u0026color=0b6cff)\n\n\n\n| Android | Windows | iOS |\n|---------|---------|-----|\n| ![Maui ContentButton Android](https://github.com/user-attachments/assets/1a9a8872-6901-411d-9e9f-c462f0fbd8d8) | ![Maui ContentButton Windows](https://github.com/user-attachments/assets/de9c5bef-d2c6-491e-a9f8-9d3f0f5bd773) | ![Maui ContentButton iOS](https://github.com/user-attachments/assets/46a9508c-43e8-4d68-bfa1-d4724bd92689) |\n\n\n## Platform Support\n\n### Windows\nWindows allows content nested in the `Button` control, so that's what we are using here.  You have a real genuine native button with this control on Windows.\n\n### iOS / MacCatalyst\nApple's platforms have a `UIButton` which also allows adding nested content (subviews).  Just like with windows, we are using a real native `UIButton` to implement this control.\n\n### Android\nAndroid is the trickiest, since its `Button` (and `MaterialButton`) derive from `View` which does _not_ allow directly nested content.  Luckily Android is pretty flexible about making arbitrary views (and `ViewGroup`s) act like a button.  In this case we use `MaterialCardView` to help with the ripple effect, shape, etc and then add click/touch listeners to make it behave like a button.  Android seems to consider this a real authentic button as far as the system and accessibility interations are concerned, it even plays the system 'click' sound when you press it!\n\n## Usage\n\nAdd `.AddMauiContentButtonHandler()` to your app builder in your MauiProgram.cs:\n\n```csharp\n builder\n     .UseMauiApp\u003cApp\u003e()\n      // Register the handler\n     .AddMauiContentButtonHandler()\n     .ConfigureFonts(fonts =\u003e\n     {\n         fonts.AddFont(\"OpenSans-Regular.ttf\", \"OpenSansRegular\");\n         fonts.AddFont(\"OpenSans-Semibold.ttf\", \"OpenSansSemibold\");\n     });\n```\n\nImport the xml namespace in the XAML file you would like to use the Content Button in:\n`xmlns:mcb=\"http://schemas.microsoft.com/dotnet/2024/maui/contentbutton\"`\n\nUse the button with whatever content you wish!\n\n```xml\n\u003cmcb:ContentButton\n    x:Name=\"CounterBtn\"\n    Clicked=\"OnCounterClicked\"\n    HorizontalOptions=\"Fill\"\u003e\n    \u003cGrid ColumnDefinitions=\"Auto,*,Auto,Auto\" RowDefinitions=\"*,*\"\u003e\n        \u003cImage\n            Source=\"dotnet_bot.png\"\n            Grid.Row=\"0\" Grid.RowSpan=\"2\" Grid.Column=\"0\"\n            HeightRequest=\"30\" Margin=\"6,0,2,0\" /\u003e\n        \u003cLabel \n            Text=\"Content Button\"\n            FontSize=\"Subtitle\"\n            TextColor=\"{DynamicResource White}\"\n            FontAttributes=\"Bold\"\n            Padding=\"0,6,0,0\"\n            Grid.Column=\"1\" Grid.Row=\"0\"\n            VerticalOptions=\"End\"\n            HorizontalOptions=\"Start\" /\u003e\n\n        \u003cLabel \n            x:Name=\"labelCounter\" \n            Text=\"Click the button...\"\n            FontSize=\"Body\"\n            TextColor=\"{DynamicResource Gray100}\"\n            Padding=\"0,0,0,6\"\n            Grid.Column=\"1\" Grid.Row=\"1\"\n            VerticalOptions=\"Start\"\n            HorizontalOptions=\"Start\" /\u003e\n\n        \u003cContentView\n            WidthRequest=\"1.1\" \n            VerticalOptions=\"FillAndExpand\" BackgroundColor=\"{DynamicResource Tertiary}\"\n            Grid.Column=\"2\" Grid.Row=\"0\" Grid.RowSpan=\"2\" /\u003e\n\n        \u003cEllipse\n            x:Name=\"ellipseState\"\n            WidthRequest=\"14\" HeightRequest=\"14\"\n            Grid.Column=\"3\" Grid.Row=\"0\" Grid.RowSpan=\"2\"\n            VerticalOptions=\"Center\"\n            Margin=\"10,0,12,0\"\n            Fill=\"{DynamicResource Tertiary}\"\n            /\u003e\n    \u003c/Grid\u003e\n\u003c/mcb:ContentButton\u003e\n```\n\n\nYou may want to add a style to your app's `Resources/Styles/Styles.xaml` to make the defaults more like the normal `Button`\n(remember to add the `xmlns:mcb=\"http://schemas.microsoft.com/dotnet/2024/maui/contentbutton\"` namespace to your `\u003cResourceDictionary\u003e` element):\n```xml\n\u003cStyle TargetType=\"mcb:ContentButton\"\u003e\n   \u003cSetter Property=\"BackgroundColor\" Value=\"{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}\" /\u003e\n   \u003cSetter Property=\"CornerRadius\" Value=\"8\"/\u003e\n   \u003cSetter Property=\"MinimumHeightRequest\" Value=\"44\"/\u003e\n   \u003cSetter Property=\"MinimumWidthRequest\" Value=\"44\"/\u003e\n   \u003cSetter Property=\"VisualStateManager.VisualStateGroups\"\u003e\n       \u003cVisualStateGroupList\u003e\n           \u003cVisualStateGroup x:Name=\"CommonStates\"\u003e\n               \u003cVisualState x:Name=\"Normal\" /\u003e\n               \u003cVisualState x:Name=\"Disabled\"\u003e\n                   \u003cVisualState.Setters\u003e\n                       \u003cSetter Property=\"BackgroundColor\" Value=\"{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray600}}\" /\u003e\n                   \u003c/VisualState.Setters\u003e\n               \u003c/VisualState\u003e\n               \u003cVisualState x:Name=\"PointerOver\" /\u003e\n           \u003c/VisualStateGroup\u003e\n       \u003c/VisualStateGroupList\u003e\n   \u003c/Setter\u003e\n\u003c/Style\u003e\n```\n\n## Known Issues\n- Due to some recent changes in MAUI itself, this currently requires .NET MAUI 8.0.90 (SR9) or newer\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredth%2Fmaui.contentbutton","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fredth%2Fmaui.contentbutton","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredth%2Fmaui.contentbutton/lists"}