https://github.com/redth/maui.contentbutton
WIP: Button that can take any content inside of it while still acting like a native button
https://github.com/redth/maui.contentbutton
Last synced: over 1 year ago
JSON representation
WIP: Button that can take any content inside of it while still acting like a native button
- Host: GitHub
- URL: https://github.com/redth/maui.contentbutton
- Owner: Redth
- License: mit
- Created: 2024-09-09T15:28:31.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-06T20:49:48.000Z (over 1 year ago)
- Last Synced: 2025-03-15T01:05:00.254Z (over 1 year ago)
- Language: C#
- Size: 305 KB
- Stars: 20
- Watchers: 2
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Maui.ContentButton
Button that can take any content inside of it while still acting like a native button
| Android | Windows | iOS |
|---------|---------|-----|
|  |  |  |
## Platform Support
### Windows
Windows 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.
### iOS / MacCatalyst
Apple'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.
### Android
Android 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!
## Usage
Add `.AddMauiContentButtonHandler()` to your app builder in your MauiProgram.cs:
```csharp
builder
.UseMauiApp()
// Register the handler
.AddMauiContentButtonHandler()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
});
```
Import the xml namespace in the XAML file you would like to use the Content Button in:
`xmlns:mcb="http://schemas.microsoft.com/dotnet/2024/maui/contentbutton"`
Use the button with whatever content you wish!
```xml
```
You may want to add a style to your app's `Resources/Styles/Styles.xaml` to make the defaults more like the normal `Button`
(remember to add the `xmlns:mcb="http://schemas.microsoft.com/dotnet/2024/maui/contentbutton"` namespace to your `` element):
```xml
<Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}" />
<Setter Property="CornerRadius" Value="8"/>
<Setter Property="MinimumHeightRequest" Value="44"/>
<Setter Property="MinimumWidthRequest" Value="44"/>
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray600}}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOver" />
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
```
## Known Issues
- Due to some recent changes in MAUI itself, this currently requires .NET MAUI 8.0.90 (SR9) or newer