How to handle the Theme support in the SfStepProgressbar control
How to handle Theme support in the SfStepProgressBar control
Thise article explains how to handle the Theme support in the Step ProgressBar.
Step 1:
Create a SfStepProgressBar sample with all the necessary assemblies. Refer to Getting Started documentation to create and configure a simple SfStepProgressBar sample and configure it.
Step 2:
Use the Theme support in the SfStepProgressBar control.
XAML:
<ContentPage.Resources> <syncCore:SyncfusionThemeDictionary> <syncCore:SyncfusionThemeDictionary.MergedDictionaries> <syncCore:DarkTheme /> </syncCore:SyncfusionThemeDictionary.MergedDictionaries> </syncCore:SyncfusionThemeDictionary> </ContentPage.Resources>
<StackLayout x:Name="stack">
<progressBar:SfStepProgressBar Orientation="Vertical" VerticalOptions="FillAndExpand"> <progressBar:StepView PrimaryText="Step 1" /> <progressBar:StepView PrimaryText="Step 2" /> <progressBar:StepView PrimaryText="Step 3" /> <progressBar:StepView PrimaryText="Step 4" Status="InProgress" /> <progressBar:StepView PrimaryText="Step 5" /> </progressBar:SfStepProgressBar>
<StackLayout HorizontalOptions="CenterAndExpand"> <StackLayout Orientation="Horizontal"> <Label x:Name="darkLabel" Text="Dark" /> <Switch Toggled="Handle_Toggled" /> <Label x:Name="lightLabel" Text="Light" /> </StackLayout> </StackLayout> </StackLayout> |
C#:
private void Handle_Toggled(object sender, ToggledEventArgs e) { var pageResources = Resources; var mergedDictionaries = (pageResources as SyncfusionThemeDictionary)?.MergedDictionaries; if (mergedDictionaries != null) { foreach (var item in mergedDictionaries.Reverse<ResourceDictionary>()) { var dictionary = item as ResourceDictionary; if (dictionary.ContainsKey("SyncfusionTheme")) { var themeType = dictionary["SyncfusionTheme"] as string; mergedDictionaries.Remove(item);
//Remove theing dark theme and apply the Light theme. applied if (themeType == "DarkTheme") { mergedDictionaries.Add(new LightTheme()); } //Remove theing light theme and apply the dark theme. applied else { Resources["SfRichTextEditorFontColor"] = Color.FromHex("#FF5722"); mergedDictionaries.Add(new DarkTheme()); } } } } }
|
The sample that explains how to track the Theme support in the Step ProgressBar control can be downloaded sample here.