How to change RadDock dockwindow button size

[Kumaran]

Hi,

I'm trying to change the size of the buttons in dock window. I tried changing it via RadControlSpy in runtime as well. But it doesn't seem to change. It is always 22px*22px.

I tried the below code

toolTabStrip.AutoHideButton.ImagePrimitive.Size = new Size(14, 14);
toolTabStrip.AutoHideButton.Size = new Size(14, 14);

Is there a way to change these size ?

Thanks

[Dimitar]

Hello Kumaran,

In order to change the AutoHideButton Pin size, you can take advantage of the Glyph mechanism provided in the newer Telerik UI for WinForms themes:  Office2019Light, Office2019Gray, Office2019Dark, Crystal, CrystalDark, Fluent, FluentDark, Material themes.

Instead of changing AutoHideButton size, you can change the custom font size for the pin glyph. The default font is TelerikWebUI, 12pt. You can change it as follows:

ToolTabStrip myToolTabStrip = this.toolWindow2.Parent as ToolTabStrip;
myToolTabStrip.AutoHideButton.CustomFontSize = 8;

 

 

However, please note that if you undock a toolWindow and dock it again, you will have to change the font size again in the radDock1.DockStateChanged event.

private void RadDock1_DockStateChanged(object sender, DockWindowEventArgs e)
{
    ToolTabStrip myToolTabStrip = e.DockWindow.TabStrip as ToolTabStrip;
    if (myToolTabStrip != null && e.DockWindow.DockState == DockState.Docked && e.DockWindow.Text == "toolWindow2")
    {
        FontFamily myFont = ThemeResolutionService.GetCustomFont("TelerikWebUI");
        myToolTabStrip.AutoHideButton.CustomFont = myFont.Name;
        myToolTabStrip.AutoHideButton.CustomFontSize = 8;
    }      
}   

Also, note that If you hide the toolWindow by pressing the Pin and show the toolWindow again your font will be set back to default (TelerikWebUI, 12pt) unless you subscribe to radDock1.AutoHideWindowDisplaying and set the smaller font size once again.

private void RadDock1_AutoHideWindowDisplaying(object sender, AutoHideWindowDisplayingEventArgs e)
{
    ToolTabStrip myToolTabStrip = this.toolWindow2.Parent as ToolTabStrip;
    myToolTabStrip.AutoHideButton.CustomFontSize = 8;
}

I have attached a sample project where you can see the end result. Hope you find this information useful.

Regards,

Dimitar

 

[Kumaran]

Hello Dimitar,

Thanks for your response. Actually, Pin button is an example for me. But I wanted to change the sizes of all buttons in the tool window and also assign custom images based on their state. Is it possible to do?

[Dimitar]

Hello Kumaran,

In order to change the sizes of all buttons, you can set custom images with the desired size. The button elements will auto-size according to the image size. In the following screenshot, you can see this in action. 

I have used different image sizes (10x10, 20x20, 32x32) for each AutoHideButton. 

You can achieve this with the same approach as in my previous answer but instead of setting CustomFontSize, you can set AutoHideButton.Image. 

ToolTabStrip myToolTabStrip2 = this.toolWindow2.Parent as ToolTabStrip;
myToolTabStrip2.AutoHideButton.Image = new Bitmap(greenPin32x32);

If you wish to add custom images based on the hover state of AutoHideButton, for example, you can subsribe to ToggleButtonElemenet_MouseEnter and ToggleButtonElemenet_MouseLeave events and set your custom images as follows.

RadToggleButtonElement myToggleButtonElemenet = myToolTabStrip2.AutoHideButton as RadToggleButtonElement;
myToggleButtonElemenet.MouseEnter += MyToggleButtonElemenet_MouseEnter;
myToggleButtonElemenet.MouseLeave += MyToggleButtonElemenet_MouseLeave;

private void MyToggleButtonElemenet_MouseLeave(object sender, EventArgs e)
{
    (sender as RadToggleButtonElement).Image = new Bitmap(blackPin32x32);
}

private void MyToggleButtonElemenet_MouseEnter(object sender, EventArgs e)
{
    (sender as RadToggleButtonElement).Image = new Bitmap(greenPin32x32);
}

As you can see in the attached .gif file, once you hover over the AutoHideButton, it's Pin image will be changed with your custom image.

You can also check out the following help articles to see if they suitable for your scenario:

• Visual Style Builder tool 
• Override Theme Settings at Run Time

I hope you find this information useful.

 

Regards,

Dimitar

 

 

[Kumaran]

Hello Dimitar,

I hope, the above will work.

Thanks