RadDock Floating Window Button Images

1 Answer 194 Views
Dock
Kumaran
Top achievements
Rank 1
Iron
Kumaran asked on 09 Oct 2021, 03:26 AM

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;

1 Answer, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 11 Oct 2021, 02:09 PM

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

Remote troubleshooting is now easier with Telerik Fiddler Jam. Get the full context to end-users' issues in just three steps! Start your trial here - https://www.telerik.com/fiddler-jam.
Kumaran
Top achievements
Rank 1
Iron
commented on 12 Oct 2021, 04:50 AM

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
Telerik team
commented on 12 Oct 2021, 10:58 AM

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
Top achievements
Rank 1
Iron
commented on 12 Oct 2021, 01:17 PM

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
Telerik team
commented on 13 Oct 2021, 11:15 AM

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

Tags
Dock
Asked by
Kumaran
Top achievements
Rank 1
Iron
Answers by
Dimitar
Telerik team
Share this question
or