This is a migrated thread and some comments may be shown as answers.

Change icon/image at runtime

4 Answers 1070 Views
Themes and Visual Style Builder
This is a migrated thread and some comments may be shown as answers.
Mehdi
Top achievements
Rank 1
Mehdi asked on 10 Dec 2019, 12:31 AM

     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

Sort by
0
Nadya | Tech Support Engineer
Telerik team
answered on 12 Dec 2019, 01:27 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Mehdi
Top achievements
Rank 1
answered on 13 Dec 2019, 05:17 PM

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.            else
21.            {
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 

 

0
Mehdi
Top achievements
Rank 1
answered on 13 Dec 2019, 05:40 PM

forget to share final result!

see there

0
Nadya | Tech Support Engineer
Telerik team
answered on 16 Dec 2019, 08:18 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Themes and Visual Style Builder
Asked by
Mehdi
Top achievements
Rank 1
Answers by
Nadya | Tech Support Engineer
Telerik team
Mehdi
Top achievements
Rank 1
Share this question
or