About
This project is a shared style library for .NET MAUI applications containing recurring styles for
core controls and for the Syncfusion .NET MAUI controls (https://www.syncfusion.com/maui-controls).
This project bases on the SharedXamarinXamlStyles (https://github.com/AndreasReitberger/SharedXamarinXamlStyles)
Nugets
Get the latest version from nuget.org<br>
Package |
Nuget |
Downloads |
SharedMauiXamlStyles |
|
|
SharedMauiXamlStyles.Syncfusion |
|
|
IMPORTANT CHANGE
Since putting all FontKeys
in a ResourceDictionary
leads to poor performance of the app, we moved all FontKeys
to a static class instead.
For a migration guide, please see here:
https://github.com/AndreasReitberger/SharedMauiXamlStyles/wiki/Use-Icons-in-XAML-content#reference-icons
Used fonts
All used fonts are available from the SharedFonts.Fonts
property.
public class SharedFonts
{
#region Properties
public static Dictionary<string, string> Fonts = new()
{
{ "FontAwesome5Brands.otf", "FontAwesome5Brands" },
{ "FontAwesome5Regular.otf", "FontAwesome5Regular" },
{ "FontAwesome5Solid.otf", "FontAwesome5Solid" },
{ "materialdesignicons-webfont.ttf", "MaterialDesignIcons" },
{ "Montserrat-Bold.ttf", "MontserratBold" },
{ "Montserrat-Medium.ttf", "MontserratMedium" },
{ "Montserrat-Regular.ttf", "MontserratRegular" },
{ "Montserrat-SemiBold.ttf", "MontserratSemiBold" },
{ "UIFontIcons.ttf", "UIFontIcons" },
};
#endregion
}
In order to register all shared fonts, add following function to the MauiAppBuilder
.
Note! Don't forget to add the fonts also to your main MAUI app!
https://github.com/AndreasReitberger/SharedMauiXamlStyles/tree/main/source/SharedMauiXamlStylesLibrary/SharedMauiXamlStylesLibrary/Resources/Fonts
public static MauiApp CreateMauiApp()
{
MauiAppBuilder builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.UseMauiCommunityToolkit()
.ConfigureFonts(fonts =>
{
// Your custom used fonts
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
})
// Initializes the library
.InitializeSharedMauiStyles(); // <== Add this line
}
Available control styles
Control |
Core |
Syncfusion |
BoxView |
✅ |
❌ |
Button |
✅ |
❌ |
CheckBox |
✅ |
❌ |
Editor |
✅ |
❌ |
Entry |
✅ |
❌ |
Frame |
✅ |
❌ |
Grid |
✅ |
❌ |
Label |
✅ |
❌ |
Switch |
✅ |
❌ |
StackPanel |
✅ |
❌ |
RefreshView |
✅ |
❌ |
SfTabView |
❌ |
✅ |
SfListVirew |
❌ |
✅ |
An overview of the corresponding MAUI controls if you migrate from Syncfusion.XForm
to Syncfusion.MAUI
.
Syncfusion.XForms |
MAUI (Core) |
Syncfusion.MAUI |
SfButton |
Button |
❌ |
SfCheckBox |
CheckBox |
❌ |
SfComboBox |
Picker?! |
❌ |
SfBorder |
Border |
❌ |
SfPullToRefresh |
RefreshView |
❌ |
SfBusyIndicator |
ActivityIndicator |
❌ |
SfSwitch |
Switch |
❌ |
SfCircularGauge |
❌ |
SfRadialGauge |
SfBadgeView |
❌ |
SfBadgeView |
SfTabView |
❌ |
SfTabView |
SfListVirew |
❌ |
SfListVirew |
RoadMap
https://www.syncfusion.com/products/roadmap/maui-controls
List to be continued...
Usage
This library combines all styles in the DefaultTheme.xaml
, which can be merged into your LightTheme.xaml
/ DarkTheme.xaml
.
<ResourceDictionary
x:Class="KlipperRemoteControl.Themes.LightTheme"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:shared="clr-namespace:AndreasReitberger.Shared;assembly=SharedMauiXamlStylesLibrary"
>
<ResourceDictionary.MergedDictionaries>
<shared:DefaultTheme/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
Same applies to the DarkTheme.
Style Keys
Due to a bug in MAUI (or Visual Studio), InteliSense doesn't suggest the style keys if using a nuget.
https://github.com/AndreasReitberger/SharedMauiXamlStyles/issues/43
ActivityIndicator
Key |
TargetType |
Library |
DefaultActivityIndicator |
ActivityIndicator |
Core |
Border
Key |
TargetType |
Library |
ProfileBorderStyle |
Border |
Core |
CardViewBorderStyle |
Border |
Core |
PanelCardViewBorderStyle |
Border |
Core |
MinimalPanelCardViewBorderStyle |
Border |
Core |
BrightMinimalPanelCardViewBorderStyle |
Border |
Core |
CircleBorderStyle |
Border |
Core |
MenuSeparatorBorderStyle |
Border |
Core |
BoxView
Key |
TargetType |
Library |
SeparatorStyle |
BoxView |
Core |
Key |
TargetType |
Library |
DefaultButtonStyle |
Button |
Core |
ImageButton |
Button |
Core |
IconButtonStyle |
Button |
Core |
MaterialDesignIconButtonStyle |
Button |
Core |
PrimaryMaterialDesignIconButtonStyle |
Button |
Core |
LinkButtonStyle |
Button |
Core |
LinkRoundButtonStyle |
Button |
Core |
RoundIconButtonStyle |
Button |
Core |
RoundedLongButtonStyle |
Button |
Core |
SwipeTemplateBorderStyle |
Button |
Core |
SwipeTemplateButtonStyle |
Button |
Core |
RoundMaterialDesignIconButtonStyle |
Button |
Core |
RoundEmergencyStopIconButtonStyle |
Button |
Core |
GoogleLoginButtonStyle |
Button |
Core |
CheckBox
Key |
TargetType |
Library |
DefaultCheckBoxStyle |
CheckBox |
Core |
DatePicker
Key |
TargetType |
Library |
DefaultDatePickerStyle |
DatePicker |
Core |
Editor / BorderlessEditor
Key |
TargetType |
Library |
DefaultEditorStyle |
Editor |
Core |
DefaultBorderlessEditorStyle |
BorderlessEditor |
Core |
Entry / BorderlessEntry
Key |
TargetType |
Library |
DefaultEntryStyle |
Entry |
Core |
NumericEntryStyle |
Entry |
Core |
PasswordEntryStyle |
Entry |
Core |
Frame
Key |
TargetType |
Library |
DefaultFrameStyle |
Frame |
Core |
ListViewItemFrameStyle |
Frame |
Core |
Grid / TapAnimationGrid
Key |
TargetType |
Library |
DefaultGridStyle |
Grid |
Core |
DefaultSettingsGridStyle |
Grid |
Core |
WarningGridStyle |
Grid |
Core |
CriticalErrorGridStyle |
Grid |
Core |
DefaultPanelGridStyle |
Grid |
Core |
ModalPanelGridStyle |
Grid |
Core |
ShellTitleViewGridStyle |
Grid |
Core |
DefaultTapAnimationGridStyle |
TapAnimationGrid |
Core |
IndicatorView
Key |
TargetType |
Library |
DefaultIndicatorViewStyle |
IndicatorView |
Core |
Label
Key |
TargetType |
Library |
DefaultLabelStyle |
Label |
Core |
LabelStyle |
Label |
Core |
IconLabelStyle |
Label |
Core |
MaterialSettingsIconLabelStyle |
Label |
Core |
TextInputLayoutMaterialIconLabelStyle |
Label |
Core |
MaterialFontFamilyIconLabelStyle |
Label |
Core |
PrimaryMaterialFontFamilyIconLabelStyle |
Label |
Core |
MediumLabelStyle |
Label |
Core |
SmallLabelStyle |
Label |
Core |
VerySmallLabelStyle |
Label |
Core |
SetupLabelStyle |
Label |
Core |
LinkLabelStyle |
Label |
Core |
PrimaryLabelStyle |
Label |
Core |
PrimaryDarkLabelStyle |
Label |
Core |
WarningLabelStyle |
Label |
Core |
ErrorLabelStyle |
Label |
Core |
ShellLabelStyle |
Label |
Core |
SettingsLabelStyle |
Label |
Core |
SettingsSmallLabelStyle |
Label |
Core |
HeadlineLabelStyle |
Label |
Core |
PrimaryHeadlineLabelStyle |
Label |
Core |
TitleViewHeadlineLabelStyle |
Label |
Core |
PrimaryDarkHeadlineLabelStyle |
Label |
Core |
SwipeTemplateButtonStyle |
Label |
Core |
OptionButtonLabelStyle |
Label |
Core |
GroupingHeaderLabelStyle |
Label |
Core |
SwipeTemplateMaterialButtonStyle |
Label |
Core |
MaterialFontIconSpanStyle |
Label |
Core |
FontIconSpanStyle |
Label |
Core |
MaterialFontFamilyIconSmallLabelStyle |
Label |
Core |
MaterialSwipeTemplateButtonStyle |
Label |
Core |
ListView
Key |
TargetType |
Library |
DefaultListViewStyle |
ListView |
Core |
Page
Key |
TargetType |
Library |
DefaultPageStyle |
Page |
Core |
ModalPageStyle |
Page |
Core |
SettingsPageStyle |
Page |
Core |
Picker
Key |
TargetType |
Library |
DefaultPickerStyle |
Picker |
Core |
ProgressBar
Key |
TargetType |
Library |
DefaultProgressBarStyle |
ProgressBar |
Core |
Key |
TargetType |
Library |
DefaultRadioButtonStyle |
RadioButton |
Core |
RefreshView
Key |
TargetType |
Library |
DefaultRefreshViewStyle |
RefreshView |
Core |
SearchBar
Key |
TargetType |
Library |
DefaultSearchBarStyle |
SearchBar |
Core |
SearchHandler
Key |
TargetType |
Library |
DefaultSearchHandlerStyle |
SearchHandler |
Core |
Shadow
Key |
TargetType |
Library |
DefaultShadowStyle |
Shadow |
Core |
CardViewShadowStyle |
Shadow |
Core |
Shell
Key |
TargetType |
Library |
BaseStyle |
Element |
Core |
DefaultShellStyle |
Shell |
Core |
DefaultFlyoutItemStyle |
FlyoutItem |
Core |
Slider
Key |
TargetType |
Library |
DefaultSliderStyle |
Slider |
Core |
StackLayout
Key |
TargetType |
Library |
StackLayoutHeaderStyle |
StackLayout |
Core |
ModalInputPageStackLayoutStyle |
StackLayout |
Core |
VerticalStackLayoutHeaderStyle |
VerticalStackLayout |
Core |
VerticalModalInputPageStackLayoutStyle |
VerticalStackLayout |
Core |
HorizontalStackLayoutHeaderStyle |
HorizontalStackLayout |
Core |
HorizontalModalInputPageStackLayoutStyle |
HorizontalStackLayout |
Core |
SwipeItem
Key |
TargetType |
Library |
DefaultSwipeItemStyle |
SwipeItem |
Core |
Switch
Key |
TargetType |
Library |
DefaultSwitchStyle |
Switch |
Core |
TimePicker
Key |
TargetType |
Library |
DefaultTimePickerStyle |
TimePicker |
Core |
SfAccordion
Key |
TargetType |
Library |
DefaultAccordionStyle |
SfAccordion |
Syncfusion |
DefaultAccordionItemStyle |
AccordionItem |
Syncfusion |
SfAutocomplete
Key |
TargetType |
Library |
DefaultAutocompleteStyle |
SfAutocomplete |
Syncfusion |
DefaultMultiSelectAutoCompleteStyle |
MultiSelectAutoComplete |
Syncfusion |
SfBadgeView
Key |
TargetType |
Library |
DefaultBadgeViewStyle |
SfBadgeView |
Syncfusion |
HyperlinkBadgedViewStyle |
SfBadgeView |
Syncfusion |
SfBusyIndicator
Key |
TargetType |
Library |
DefaultBusyIndicatorStyle |
SfBusyIndicator |
Syncfusion |
SfCartesianChart
Key |
TargetType |
Library |
NumericOnlySfCartesianChartStyle |
SfCartesianChart |
Syncfusion |
DefaultChartAxisLabelStyle |
ChartAxisLabelStyle |
Syncfusion |
DefaultMajorGridChartLineStyle |
ChartLineStyle |
Syncfusion |
DefaultAxisChartLineStyle |
ChartLineStyle |
Syncfusion |
DefaultMinorGridChartLineStyle |
ChartLineStyle |
Syncfusion |
DefaultMajorChartAxisTickStyle |
ChartAxisTickStyle |
Syncfusion |
SfChip
Key |
TargetType |
Library |
DefaultChipStyle |
SfChip |
Syncfusion |
ColorSelectionChipStyle |
SfChip |
Syncfusion |
DefaultChipGroupStyle |
SfChipGroup |
Syncfusion |
SfComboBox
Key |
TargetType |
Library |
DefaultComboBoxStyle |
SfComboBox |
Syncfusion |
DefaultMultiSelectComboBox |
MultiSelectComboBox |
Syncfusion |
SfExpander
Key |
TargetType |
Library |
DefaultExpanderStyle |
SfExpander |
Syncfusion |
SfListView
Key |
TargetType |
Library |
DefaultSfListViewStyle |
SfListView |
Syncfusion |
ListViewDeleteEditGestureSwipeableStyle |
SfListView |
Syncfusion |
SfMaskedEntry
Key |
TargetType |
Library |
DefaultMaskedEntryStyle |
SfMaskedEntry |
Syncfusion |
SfNumericEntry
Key |
TargetType |
Library |
DefaultSfNumericEntryStyle |
SfNumericEntry |
Syncfusion |
CurrencySfNumericEntryStyle |
SfNumericEntry |
Syncfusion |
PercentageSfNumericEntryStyle |
SfNumericEntry |
Syncfusion |
SfRadialGauge
Key |
TargetType |
Library |
DefaultSfRadialGaugeStyle |
SfRadialGauge |
Syncfusion |
DefaultRadialLineStyle |
RadialLineStyle |
Syncfusion |
SfRangeSlider
Key |
TargetType |
Library |
DefaultSfRangeSliderStyle |
SfRangeSlider |
Syncfusion |
SfRating
Key |
TargetType |
Library |
DefaultRatingStyle |
SfRating |
Syncfusion |
SfSlider
Key |
TargetType |
Library |
DefaultSfSliderStyle |
SfSlider |
Syncfusion |
PrimraySliderStyle |
SfSlider |
Syncfusion |
PercentageSliderStyle |
SfSlider |
Syncfusion |
SfTabView
Key |
TargetType |
Library |
DefaultSfTabViewStyle |
SfTabView |
Syncfusion |
DefaultSfTabViewItemStyle |
SfTabItem |
Syncfusion |
SfTextInputLayout
Key |
TargetType |
Library |
DefaultTextInputLayoutStyle |
SfTextInputLayout |
Syncfusion |
Licenses & Thirdparty
This project uses thirdparty fonts. All licenses can be found in the project folder under Licenses → LicenseFiles.
It's mandatory to also add those licenses to your final App. In this case you can use the LicenseManager class to get a List of all
used libraries and their licenses.
https://github.com/AndreasReitberger/SharedMauiXamlStyles/tree/main/source/SharedMauiXamlStylesLibrary/SharedMauiXamlStylesLibrary/Licenses/LicenseFiles