Shaunebu.MAUI.Controls.FloatingChatButton
1.0.3
dotnet add package Shaunebu.MAUI.Controls.FloatingChatButton --version 1.0.3
NuGet\Install-Package Shaunebu.MAUI.Controls.FloatingChatButton -Version 1.0.3
<PackageReference Include="Shaunebu.MAUI.Controls.FloatingChatButton" Version="1.0.3" />
<PackageVersion Include="Shaunebu.MAUI.Controls.FloatingChatButton" Version="1.0.3" />
<PackageReference Include="Shaunebu.MAUI.Controls.FloatingChatButton" />
paket add Shaunebu.MAUI.Controls.FloatingChatButton --version 1.0.3
#r "nuget: Shaunebu.MAUI.Controls.FloatingChatButton, 1.0.3"
#:package Shaunebu.MAUI.Controls.FloatingChatButton@1.0.3
#addin nuget:?package=Shaunebu.MAUI.Controls.FloatingChatButton&version=1.0.3
#tool nuget:?package=Shaunebu.MAUI.Controls.FloatingChatButton&version=1.0.3
🚀 FloatingChatButton for .NET MAUI
A fully customizable floating chat button component for .NET MAUI applications with built-in messaging UI and smooth animations.
📦 Installation
dotnet add package Shaunebu.MAUI.Controls.FloatingChatButton
🎯 Features
Drag-and-drop with edge snapping behavior
Smooth expand/collapse animations (spring physics)
Fully bindable properties (MVVM compatible)
Customizable colors, icons and sizing
Optimized performance (60 FPS animations)
Built-in chat UI with message templates
🚀 Basic Usage
- Add the namespace:
xmlns:fc="clr-namespace:Shaunebu.MAUI.Controls;assembly=Shaunebu.MAUI.Controls.FloatingChatButton"
- Add the control:
<fc:FloatingChatButton
PrimaryColor="#2196F3"
BotIcon="chat_icon.png">
<fc:FloatingChatButton.Messages>
<x:Array Type="{x:Type fc:ChatMessage}">
<fc:ChatMessage Text="Welcome!" IsIncoming="true"/>
<fc:ChatMessage Text="How can I help?" IsIncoming="false"/>
</x:Array>
</fc:FloatingChatButton.Messages>
</fc:FloatingChatButton>
⚙️ Core Properties
Property | Type | Description | Default |
---|---|---|---|
PrimaryColor |
Color | Button accent color | #2196F3 |
Messages |
ObservableCollection<ChatMessage> |
Chat messages | Empty |
IsExpanded |
bool | Expanded state | false |
BotIcon |
ImageSource | Custom icon | icon_bot |
ExpandedWidth |
double | Width ratio (0-1) | 0.8 |
ExpandedHeight |
double | Height ratio (0-1) | 0.6 |
EdgePadding |
int | Screen edge margin | 20 |
🎨 Customization
Change Colors
<fc:FloatingChatButton
PrimaryColor="#4CAF50"
MessageIncomingColor="#EEEEEE"
MessageOutgoingColor="#4CAF50"/>
Programmatic Control
// Toggle state
floatingChatButton.IsExpanded = !floatingChatButton.IsExpanded;
// Add messages
floatingChatButton.Messages.Add(new ChatMessage {
Text = "New message!",
IsIncoming = true
});
// Customize animations
floatingChatButton.ExpandDuration = 400;
📱 Screenshots
🛠 Troubleshooting
Common Issues:
Missing icons - Ensure images are in:
Shared:
Resources/Images/
Android:
Resources/drawable/
iOS:
Resources/
Binding not updating - Use:
Messages = new ObservableCollection<ChatMessage>();
- Animation performance - Test in Release mode.
📚 Resources
⁉️ Support
Report issues:
📧 jorge.p@jpdblog.com
🐛 GitHub Issues
📄 License
MIT License © 2025 Jorge Perales Diaz
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net9.0-android35.0 is compatible. net9.0-ios18.0 is compatible. net10.0-android was computed. net10.0-ios was computed. |
-
net9.0-android35.0
- CommunityToolkit.Maui (>= 12.1.0)
- CommunityToolkit.Mvvm (>= 8.4.0)
- Microsoft.Maui.Controls (>= 9.0.90)
-
net9.0-ios18.0
- CommunityToolkit.Maui (>= 12.1.0)
- CommunityToolkit.Mvvm (>= 8.4.0)
- Microsoft.Maui.Controls (>= 9.0.90)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.