Change icon/image at runtime

5 posts, 0 answers
  1. Mehdi
    Mehdi avatar
    15 posts
    Member since:
    Jan 2018

    Posted 09 Dec 2019 Link to this post

         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";

     

  2. Nadya
    Admin
    Nadya avatar
    241 posts

    Posted 12 Dec 2019 Link to this post

    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.
  3. Mehdi
    Mehdi avatar
    15 posts
    Member since:
    Jan 2018

    Posted 13 Dec 2019 Link to this post

    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 

     

  4. Mehdi
    Mehdi avatar
    15 posts
    Member since:
    Jan 2018

    Posted 13 Dec 2019 Link to this post

    forget to share final result!

    see there

  5. Nadya
    Admin
    Nadya avatar
    241 posts

    Posted 16 Dec 2019 Link to this post

    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.
Back to Top