hi telerik
i'm use Telerik themes "Fluent" and "FluentDark" in my project. with a "ToggleSwitcher" and below code, change my project theme at runtime without any issue.
but, most controls like button, have image. in "Fluent" i'm use Black image, and must use White image in "FluentDark" theme. Now, have any solution to change all (maybe 100 Controls) image/icon at runtime? or have any solution for switch iamge between Dark and Light theme?
ThemeResolutionService.ApplicationThemeName = "Fluent";
4 Answers, 1 is accepted
Hello Mehdi,
There is no out of the box functionality for this. The possible solution that I can suggest is to iterate the controls in your form and change the picture programmatically according to which theme is set Fluent or FluentDark. A sample approach is demonstrated below:
public RadForm1()
{
InitializeComponent();
this.radButton2.Image = Image.FromFile(@"../../mail2.png");
this.radButton2.Text = "Check mail";
this.radButton2.ImageAlignment = ContentAlignment.MiddleCenter;
this.radButton2.TextImageRelation = TextImageRelation.ImageAboveText;
}
private void radButton1_Click(object sender, EventArgs e)
{
ThemeResolutionService.ApplicationThemeName = "Fluent";
ChaneImage();
}
private void radButton3_Click(object sender, EventArgs e)
{
ThemeResolutionService.ApplicationThemeName = "FluentDark";
ChaneImage();
}
private void ChaneImage()
{
foreach (Control item in this.Controls)
{
RadButton b = item as RadButton;
if (b != null)
{
b.Image = ThemeResolutionService.ApplicationThemeName == "Fluent" ? Image.FromFile(@"../../mail2.png") : Image.FromFile(@"../../mail1.png");
}
}
}I hope this helps. Let me know if I can assist you further.
Regards,
Nadya
Progress Telerik
Rank 1
Hi, Thank Nadya, but this solution is so difficult! i fix it with this solution:
Step 1:
create 2 ImageList, set named "light" and "dark". get icon with "white" and "Black" colored with "Same Name" (like screenshot).
Step 2:
for all component that i'm used, set "imagelist" and "imagekey" to show suitable icon in my control
Step 3:
specially i'm use a "toggleswitch" to change Theme ("Fluent" and "FluentDark")
see code:
01.public IEnumerable<Control> GetAll(Control control, Type type)02. {03. var controls = control.Controls.Cast<Control>();04. 05. return controls.SelectMany(ctrl => GetAll(ctrl, type))06. .Concat(controls)07. .Where(c => c.GetType() == type);08. }09. private void themeswitcher_ValueChanged(object sender, EventArgs e)10. {11. 12. if (themeswitcher.Value)13. {14. var btnlist = GetAll(this, typeof(RadButton));15. foreach (RadButton c in btnlist)16. {17. c.ImageList = light;18. }19. }20. else21. {22. var btnlist = GetAll(this, typeof(RadButton));23. foreach (RadButton c in btnlist)24. {25. c.ImageList = dark;26. }27. }28. ThemeResolutionService.ApplicationThemeName = !themeswitcher.Value ? "FluentDark" : "Fluent";29. 30. }
line 1 to 18, create the method to GetAll controls thats we need change!
line 19 to 30, change theme and image/icon with switch between 2 ImageList thats we created.
i hope this solution is better and easier!
again, thanks Telerik admins
Rank 1
forget to share final result!
see there
Hello Mehdi,
I am glad that you have found a suitable solution that fits your scenario best. Thank you for sharing it with the community! Indeed, the provided code snippet is an elegant alternative approach for changing many images at run time by using the RadToggleSwitch button.
As a reward, I have also updated your Telerik Points.
Regards,
Nadya
Progress Telerik