This article demonstrates how to assign values to Syncfusion theme keys for different themes in a .NET MAUI Syncfusion controls. Syncfusion provides theme keys that allow developers to customize the appearance of controls, and this article focuses on how to define and apply custom values to these keys for both light and dark themes. App.xaml Configuration Ensure that your App.xaml includes the SyncfusionThemeResourceDictionary: <Application ... xmlns:theme="clr-namespace:Syncfusion.Maui.Themes;assembly=Syncfusion.Maui.Core"> <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <theme:SyncfusionThemeResourceDictionary /> ... </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources> </Application> Define Custom Resource Dictionaries for Light and Dark Themes Create separate resource dictionaries for light and dark themes and assign different values to Syncfusion theme keys for each. Here we have customized the SfChatIncomingMessageAuthorTextColor key for .NET MAUI Chat control. Dark Theme: <ResourceDictionary … x:Class="ThemeSample.Resources.Styles.DarkTheme" > <Color x:Key="SfChatIncomingMessageAuthorTextColor">HotPink</Color> </ResourceDictionary> Light Theme: <ResourceDictionary … x:Class="ThemeSample.Resources.Styles.LightTheme"> <Color x:Key="SfChatIncomingMessageAuthorTextColor">Green</Color> </ResourceDictionary> XAML Initialize the Maui control. <ContentPage.Content> <Grid RowDefinitions="50,*"> <HorizontalStackLayout Grid.Row="0" Spacing="5" HorizontalOptions="End"> <Label Text="Switch Theme" VerticalTextAlignment="Center"/> <Switch Toggled="Switch_Toggled" /> </HorizontalStackLayout> <sfChat:SfChat x:Name="sfChat" Grid.Row="1" Messages="{Binding Messages}" CurrentUser="{Binding CurrentUser}"/> </Grid> </ContentPage.Content> C- Sharp You can switch between the light and dark themes dynamically based on the system’s theme or user preferences. For instance, by using the RequestedThemeChanged event, you can update the SyncfusionThemeResourceDictionary at runtime to reflect the correct theme. public partial class MainPage : ContentPage { DarkTheme darkTheme = new DarkTheme(); LightTheme lightTheme = new LightTheme(); ICollection<ResourceDictionary> mergedDictionaries; SyncfusionThemeResourceDictionary theme ; public MainPage() { InitializeComponent(); mergedDictionaries = Application.Current.Resources.MergedDictionaries; theme = mergedDictionaries.OfType<SyncfusionThemeResourceDictionary>().FirstOrDefault(); } protected override void OnAppearing() { if (Application.Current != null) { this.ApplyTheme(Application.Current.RequestedTheme); Application.Current.RequestedThemeChanged += Current_RequestedThemeChanged; } base.OnAppearing(); } private void Current_RequestedThemeChanged(object? sender, AppThemeChangedEventArgs e) { this.ApplyTheme(e.RequestedTheme); } public void ApplyTheme(AppTheme appTheme) { if (Application.Current != null) { if (mergedDictionaries != null) { if (theme != null) { if (appTheme is AppTheme.Light) { theme.VisualTheme = SfVisuals.MaterialLight; if (darkTheme != null ) { mergedDictionaries.Remove(darkTheme); } mergedDictionaries.Add(lightTheme); } else { theme.VisualTheme = SfVisuals.MaterialDark; if (lightTheme != null) { mergedDictionaries.Remove(lightTheme); } mergedDictionaries.Add(darkTheme); } } } } } private void Switch_Toggled(object sender, ToggledEventArgs e) { if (theme.VisualTheme is SfVisuals.MaterialDark) { this.ApplyTheme(AppTheme.Light); } else { this.ApplyTheme(AppTheme.Dark); } } } Output Download the complete sample from GitHub
This article explains how to automatically switch .NET MAUI Syncfusion control themes based on the device-selected theme. This can be achieved by using SyncfusionThemeResourceDictionary. To enable automatic theme switching for Syncfusion controls based on the device’s selected theme in a .NET MAUI application, you can utilize the OnAppearing method to assign the Syncfusion VisualTheme. Additionally, handling the RequestedThemeChanged event allows for dynamic updates to the Syncfusion controls’ theme when the device’s theme changes at runtime. App.xaml Configuration Ensure that your App.xaml includes the SyncfusionThemeResourceDictionary: <Application ... xmlns:themes="clr-namespace:Syncfusion.Maui.Themes;assembly=Syncfusion.Maui.Core"> <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <themes:SyncfusionThemeResourceDictionary /> ... </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources> </Application> XAML //Mainpage.xaml <buttons:SfButton Text="Click me"/> C# Override the OnAppearing method to apply the current theme and set up an event handler for theme changes. Implement the OnRequestedThemeChanged event handler to respond to theme changes during runtime. Define the ApplyTheme method to update the Syncfusion theme based on the current application theme. //Mainpage.xaml.cs protected override void OnAppearing() { if (Application.Current != null) { this.ApplyTheme(Application.Current.RequestedTheme); Application.Current.RequestedThemeChanged += OnRequestedThemeChanged; } base.OnAppearing(); } private void OnRequestedThemeChanged(object? sender, AppThemeChangedEventArgs e) { this.ApplyTheme(e.RequestedTheme); } public void ApplyTheme(AppTheme appTheme) { if (Application.Current != null) { ICollection<ResourceDictionary> mergedDictionaries = Application.Current.Resources.MergedDictionaries; if (mergedDictionaries != null) { var syncTheme = mergedDictionaries.OfType<SyncfusionThemeResourceDictionary>().FirstOrDefault(); if (syncTheme != null) { if (appTheme is AppTheme.Light) { syncTheme.VisualTheme = SfVisuals.MaterialLight; } else { syncTheme.VisualTheme = SfVisuals.MaterialDark; } } } } } Output Download the complete sample from the GitHub
You can use FontAwesome icons in Xamarin.Forms Accordion. Please follow the steps below to work with FontAwesome icons, STEP 1: Download the font icons on FontAwesome.com. You can also refer to the document here. STEP 2: Place the ttf/otf file in the shared code project and set the Build action as follows, Project Location Build action Android Assets AndroidAsset iOS Resources BundleResource UWP Assets Content In addition, add the name of the font file to the info.plist file of iOS project. <key>UIAppFonts</key> <array> <string>ExpanderIcons.ttf</string> </array> To use custom fonts in Xamarin.Forms, refer to the document here. STEP 3: Define the font as StaticResource, in the ResourceDictionary. <ContentPage.Resources> <ResourceDictionary> <OnPlatform x:TypeArguments="x:String" x:Key="FontAwesome"> <On Platform="Android" Value="FontAwesomeRegular.otf#Regular" /> <On Platform="iOS" Value="FontAwesome5Free-Regular" /> <On Platform="UWP" Value="/Assets/FontAwesomeRegular.otf#Font Awesome 5 Free" /> </OnPlatform> </ResourceDictionary> </ContentPage.Resources> STEP 4: Bind the FontFamily to the FontImageSource of Button.ImageSource using resource key. Also, bind the icon value to the Glyph property. You can also use Button.Command to update the icon at run time. <accordion:SfAccordion x:Name="accordion" BindableLayout.ItemsSource="{Binding Info}" ExpandMode="SingleOrNone" HeaderIconPosition="Start"> <BindableLayout.ItemTemplate> <DataTemplate> <accordion:AccordionItem > <accordion:AccordionItem.Header> <Grid> <Label TextColor="#495F6E" Text="{Binding Name}" VerticalOptions="Center" HorizontalOptions="StartAndExpand" HeightRequest="50" VerticalTextAlignment="Center"/> <Button Grid.Column="1" HeightRequest="50" WidthRequest="50" Command="{Binding Path=BindingContext.FavouriteCommand, Source={x:Reference accordion}}" CommandParameter="{Binding .}" HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="Transparent"> <Button.ImageSource> <FontImageSource Glyph="{Binding FavouriteIcon}" FontFamily="{StaticResource FontAwesome}" Color="#ea2c62" Size="18" /> </Button.ImageSource> </Button> </Grid> </accordion:AccordionItem.Header> <accordion:AccordionItem.Content> <Grid BackgroundColor="#e8e8e8" Padding="5,0,0,0"> <Label Text="{Binding Description}" VerticalOptions="Center"/> </Grid> </accordion:AccordionItem.Content> </accordion:AccordionItem> </DataTemplate> </BindableLayout.ItemTemplate> </accordion:SfAccordion> STEP 5: Change the icon in the Button execution handler. public class ItemInfoRepository { public Command<object> FavouriteCommand { get; set; } public ItemInfoRepository() { FavouriteCommand = new Command<object>(OnFavouriteClicked); } private void OnFavouriteClicked(object obj) { var item = obj as ItemInfo; item.FavouriteIcon = item.FavouriteIcon == "\uf005" ? "\uf004" : "\uf005"; } } View sample in GitHub ConclusionI hope you enjoyed learning about how to use font awesome icons in Xamarin.Forms Accordion (SfAccordion).You can refer to our Xamarin.Forms Accordion feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
You can dynamically change the themes by removing the dark theme and adding the light theme in Xamarin.Forms SfSchedule. XAML Add the SchedulerBehavior class to the Schedule. <Grid> <Grid.RowDefinitions> <RowDefinition Height="0.1*"/> <RowDefinition Height="0.9*"/> </Grid.RowDefinitions> <Button x:Name="theme" Text="change theme"/> <syncfusion:SfSchedule x:Name="schedule" Grid.Row="1" ScheduleView="MonthView"> </syncfusion:SfSchedule> </Grid> <ContentPage.Behaviors> <local:SchedulerBehavior/> </ContentPage.Behaviors> C# You can change the theme at runtime by removing the dark theme and adding the light theme. public class SchedulerBehavior : Behavior<ContentPage> { SfSchedule schedule; Button button; protected override void OnAttachedTo(ContentPage bindable) { base.OnAttachedTo(bindable); this.schedule = bindable.FindByName<SfSchedule>("schedule"); this.button = bindable.FindByName<Button>("theme"); this.WireEvents(); } private void WireEvents() { this.button.Clicked += Theme_Clicked; } private void Theme_Clicked(object sender, EventArgs e) { ICollection<ResourceDictionary> mergedDictionaries = Application.Current.Resources.MergedDictionaries; var darkTheme = mergedDictionaries.OfType<DarkTheme>().FirstOrDefault(); var lightTheme = mergedDictionaries.OfType<LightTheme>().FirstOrDefault(); if (darkTheme != null) { mergedDictionaries.Remove(darkTheme); mergedDictionaries.Add(new LightTheme()); } else { mergedDictionaries.Remove(lightTheme); mergedDictionaries.Add(new DarkTheme()); } } protected override void OnDetachingFrom(ContentPage bindable) { base.OnDetachingFrom(bindable); this.UnWireEvents(); } private void UnWireEvents() { this.button.Clicked -= Theme_Clicked; } } View sample in GitHub
