.NET MAUI Controls & Dialogs for iOS, and Android. Still being developed not released yet.
- Download the NuGet Package and install it in your .NET MAUI project.
- Make sure to use
.UseMauiCommunityToolkit()in yourMauiProgram.cs. - Checkout the Sample Application.
IsActionButtonVisible - Activate/Deactivate Action Button
ActionButtonSize - The Action Button's size
ActionButtonLayoutOptions - Controls the action button's position.
ActionButtonImageSource - The Action Button's ImageSource
ActionButtonBackground - The Action Button's Background: Color or Gradient
ActionButtonCommand - The Action Button's Command
TopView - The Action Card's Top View
BottomView - The Action Card's bottom view
BorderColor - The Action Card's Border Color
CornerRadius - The Action Card's Corner Radius
<cards:UfoActionCard IconSize="60"
IconLayoutOptions="End">
<cards:UfoActionCard.IconBackground>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="{StaticResource Primary}" Offset="0.5" />
<GradientStop Color="#fa05c9" Offset="0.8" />
</LinearGradientBrush>
</cards:UfoActionCard.IconBackground>
<cards:UfoActionCard.IconImageSource>
<FontImageSource FontFamily="{StaticResource MaterialFont}"
Glyph="{x:Static icon:IconFont.Ufo}"
Color="White"
Size="30"/>
</cards:UfoActionCard.IconImageSource>
<cards:UfoActionCard.TopView>
<Image Source="cardimage.png" Aspect="AspectFill"/>
</cards:UfoActionCard.TopView>
<cards:UfoActionCard.BottomView>
<Grid/>
</cards:UfoActionCard.BottomView>
</cards:UfoActionCard>
AvatarBackgroundColor - The color of the Avatar's background
AvatarBorderColor - The Color of the Avatar's Border
AvatarBorderWidth - Border Width of the Avatar
AvatarSize - Size of the Avatar
AvatarText - Text of the Avatar
AvatarImageSource - Sources for the Avatar's Image: File, Font, Web
AvatarPadding - Padding of the Avatar
AvatarTextColor - The text color of the avatar
BorderColor - Color of the Card's Border
CornerRadius - Radius of the Card's Corners
TopView - The Card's top view
BottomView - The Card's bottom view
Command - The Card's tapped command
CloseButtonImageSource - The Image Source of the Close Button
CloseButtonBackground - The Background of the Close Button
CloseButtonCommand - The Close Button tapped command
CloseButtonSize - The Size of the Close Button
<cards:UfoAvatarCard AvatarTextColor="Black"
AvatarBorderWidth="20"
AvatarBorderColor="{StaticResource Primary}"
AvatarSize="80"
AvatarText="JD"
CloseButtonSize="20">
<cards:UfoAvatarCard.CloseButtonImageSource>
<FontImageSource FontFamily="{StaticResource MaterialFont}"
Size="15"
Glyph="{x:Static icon:IconFont.Close}"
Color="White"/>
</cards:UfoAvatarCard.CloseButtonImageSource>
<cards:UfoAvatarCard.CloseButtonBackground>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="{StaticResource Primary}" Offset="0.5" />
<GradientStop Color="#fa05c9" Offset="0.8" />
</LinearGradientBrush>
</cards:UfoAvatarCard.CloseButtonBackground>
<cards:UfoAvatarCard.TopView>
<Image Source="cardimage.png" Aspect="AspectFill"/>
</cards:UfoAvatarCard.TopView>
<cards:UfoAvatarCard.BottomView>
<Grid/>
</cards:UfoAvatarCard.BottomView>
</cards:UfoAvatarCard>The device's orientation sensor is used to create the parallax effect, checkout DeviceOrientation Documentation
ForegroundView - The View seen in the Foreground
BackgroundView - The View seen in the Background
IsParallaxActive - Activate/deactivate the parallax effect
<cards:UfoParallaxCard IsParallaxActive="True">
<cards:UfoParallaxCard.ForegroundView>
<Image Source="img_fg.png"
Aspect="AspectFill"/>
</cards:UfoParallaxCard.ForegroundView>
<cards:UfoParallaxCard.BackgroundView>
<Image Source="img_bg.jpeg"
Aspect="Fill"
Margin="-200, 0, -200, 0"/>
</cards:UfoParallaxCard.BackgroundView>
</cards:UfoParallaxCard>
IconImageSource - The Card icon's source
IconVerticalOptions - Vertical Options for the Card Icon
Title - Title Text
TitleFontFamily - Title Font Family
TitleTextColor - Title Text Color
TitleFontFamily - Title Font Attributes
TitleFontAttributes - Title Font Attributes
Description - Description Text
DescriptionFontFamily - Description Font Family
DescriptionTextColor - Description Text Color
DescriptionFontAttributes - Description Font Attributes
SettingsView - The view where your check boxes and switches are located
<cards:UfoSettingsCard Title="Setting"
TitleFontAttributes="Bold"
TitleFontSize="14"
TitleTextColor="White"
Margin="5,0,5,0"
DescriptionFontSize="10"
IconVerticalOptions="Center"
DescriptionTextColor="White"
Description="Lorem ipsum dolor sit amet"
Background="{StaticResource Gradient}">
<cards:UfoSettingsCard.IconImageSource>
<FontImageSource FontFamily="{StaticResource MaterialFont}"
Glyph="{x:Static icon:IconFont.Tools}"
Color="White"
Size="20"/>
</cards:UfoSettingsCard.IconImageSource>
<cards:UfoSettingsCard.SettingsView>
<Switch VerticalOptions="Center"
HorizontalOptions="Center"
ThumbColor="White"
OnColor="GreenYellow"/>
</cards:UfoSettingsCard.SettingsView>
</cards:UfoSettingsCard>Text - CheckBox Text
IsChecked - CheckBox Is Checked
FontFamily - CheckBox Font Family
TextColor - CheckBox Text Color
Color - CheckBox Checked Color
CheckedChangedCommand - CheckBox Command when IsChecked Changed
<selectionControls:UfoCheckBox Color="Red"
Text="Text"
TextColor="Red"
IsChecked="{Binding IsChecked}"
CheckedChangedCommand="{Binding CheckBoxChangedCommand}"/>
ChipBorderColor - Color of the Chip's Border
ChipBackground - Chip's Background: Color, Gradient
IconImageSource - Image Source of the Chip's Icon
CloseButtonIconImageSource - Image Source of the Chip's Close Icon
CloseButtonCommand - Chips's Close Command
Command - Chips's Command
Text - Chips's Text
FontFamily - Chips's Font Family
TextColor - Chips's Text Color
<controls:UfoChip ChipBackground="{StaticResource Primary}"
Text="Chip 3"
HorizontalOptions="Center"
TextColor="White">
<controls:UfoChip.IconImageSource>
<FontImageSource FontFamily="{StaticResource MaterialFont}"
Glyph="{x:Static icon:IconFont.Ufo}"
Color="White"/>
</controls:UfoChip.IconImageSource>
<controls:UfoChip.CloseButtonIconImageSource>
<FontImageSource FontFamily="{StaticResource MaterialFont}"
Glyph="{x:Static icon:IconFont.Close}"
Color="White"
Size="16"/>
</controls:UfoChip.CloseButtonIconImageSource>
</controls:UfoChip>In your MauiProgram.cs file, register the IUfoDialog Service.
builder.Services.AddSingleton<IUfoDialog, UfoDialog>();Simply inject IUfoDialog into your ViewModel
private readonly IUfoDialog _ufoDialog;
public ViewModel(IUfoDialog ufoDialog)
{
_ufoDialog = ufoDialog;
}
var result = await _ufoDialog.ShowConfirmDialogAsync("Title", "Description");
var config = new ConfirmDialogConfig { ShowCheckBox = true };
var result = await _ufoDialog.ShowConfirmDialogAsync("Title", "Description", config: config);
var config = new ConfirmDialogConfig
{
IconSource = new FileImageSource() { File = "headerimage.png" },
IconHorizontalOptions = LayoutOptions.Start,
IconHeight = 30,
IconWidth = 30
};
var result = await _ufoDialog.ShowConfirmDialogAsync("Title", "Description", config: config);
await _ufoDialog.ShowAlertDialogAsync("Title", "Description");
var config = new AlertDialogConfig
{
IconSource = new FileImageSource() { File = "headerimage.png" },
IconHorizontalOptions = LayoutOptions.Start
};
await _ufoDialog.ShowAlertDialogAsync("Title", "Description", config: config);