RadDock Floating Window Button Images

[Kumaran]

Hello,

I want to change the 'Dock Button' image in the floating window of RadDock. I tried setting it to the RadImageButtonElement.Image and also RadImageButtonElement.ImagePrimitive.Image. But still, it is not working. How do we change it ?

dockButton.AutoSize = false;
dockButton.Size = new Size(24, 14);
dockButton.DisplayStyle = DisplayStyle.Image;
dockButton.Image = Resources.Pin;               
dockButton.ButtonFillElement.BackColor = Color.Transparent;
dockButton.ImagePrimitive.AutoSize = false;
dockButton.ImagePrimitive.Size = new Size(14, 14);
dockButton.ImagePrimitive.Image = Resources.Pin;

[Dimitar]

Hello Kumaran,

If you wish to change the button images in a DocumentWindow, you can achieve that in the DockStateChanged event. First, you can access the DockLayoutPanel that holds a RadButtonElement (close window) and  OverflowDropDownButtonElement (choose an active document). Then, you will be able to set your images to both elements.

Please note that you might also have to set SvgImage = null for both elements because SVG images have priority over raster images.

this.radDock1.DockStateChanged += RadDock1_DockStateChanged;

private void RadDock1_DockStateChanged(object sender, Telerik.WinControls.UI.Docking.DockWindowEventArgs e)
{
    if (e.DockWindow.DockState == DockState.Floating && e.DockWindow != null && e.DockWindow.DockTabStrip != null)
    {
        DockLayoutPanel dockLayoutPanel = e.DockWindow.DockTabStrip.SplitPanelElement.Children[3] as DockLayoutPanel;
        
        RadButtonElement xButton = dockLayoutPanel.Children[0] as RadButtonElement;
        xButton.SvgImage = null;
        xButton.Image = new Bitmap("..\\..\\xButton.png");

        OverflowDropDownButtonElement downArrow = dockLayoutPanel.Children[1] as OverflowDropDownButtonElement;
        downArrow.SvgImage = null;
        downArrow.Image = new Bitmap("..\\..\\downArrow.png");
    }
}

I have attached a sample project ("RadDockButtonImage.zip") and a short .gif file ("DockButtonsImage.gif") in order to demonstrate the behavior.

Please don't hesitate to ask if you have further questions.

Regards,
Dimitar
Progress Telerik

[Kumaran]

Hello Dimitar,

I want to change the button image in the floating window, not the document window.  There is no SvgImage property in the RadButtonElement.

Thanks

[Dimitar]

Hello Kumaran,

I am sorry for the misunderstanding. You can change the FloatingWindow button' images by subscribing to the FloatingWindowCreated event and accessing the TittleBar buttons (RadButtonElements). Once you have accessed the buttons you will be able to set your desired images. 

However, please note that RadButtonElement class inherits the SvgImage property from the RadButtonItem class. If you do not set null value to the SvgImage, the SvgImage set via the current theme will be considered with priority over your Image. That being the case,  you will see the default SvgImage for the current theme. 

this.radDock1.FloatingWindowCreated += RadDock1_FloatingWindowCreated;

private void RadDock1_FloatingWindowCreated(object sender, FloatingWindowEventArgs e)
{
    RadFormTitleBarElement titleBar = e.Window.FormElement.TitleBar;
    RadButtonElement closeButton = titleBar.CloseButton;
    RadButtonElement maximezeButton = titleBar.MaximizeButton;
    closeButton.SvgImage = null;
    closeButton.Image = new Bitmap("..\\..\\xButton.png");
    maximezeButton.SvgImage = null;
    maximezeButton.Image = new Bitmap("..\\..\\downArrow.png");
}

The end result will look like this.

I hope that I have understood your request correctly. If you have a custom scenario where the provided solution is not suitable, please feel free to attach a project of your own so that I will be able to provide further guidance.

I am looking forward to your reply.

Regards,

Dimitar

[Kumaran]

The floating window has the Dock Button and Menu Button which are not accessible directly. I don't see the SvgImage property in those buttons. I checked the theme via ThemeViewer and there as well there's no SvgImage property.

[Dimitar]

Hello Kumaran,

Thank you for the provided screenshot. I would like to point out that SVG image support was introduced in Telerik UI WinForms R2 2020 (version 2020.2.512). It seems that you are using an older version of Telerik assemblies that does not support SVGs.

However, you could still use the exact same approach that I have demonstrated without setting the SvgImage property to null and it should work.

Could you please confirm that you have tested my code snippet and that it does not work in your scenario?

Also, could you please attach your project so that I can see your exact scenario? This will be greatly appreciated. 

I am looking forward to your reply. Thank you in advance for your cooperation.

Regards,

Dimitar