I need help styling the docking controls

[Gil Yoder]

I have a project where I use the DockingManager to arrange panes in the main window. By default, docked windows look off like this.

Notice the close icon placement, and the missing pin. (I think the pin is present but cannot be seen.)

I tried adding one of the Visual Studio styles. That improved the docking windows but also changed the appearance of other controls, even overriding styles I had defined in App.xaml.

I also tried to edit a copy of the DockManager style. The added code was so long. Visual Studio reported about 50 errors after loading it, so I removed that code and gave up on that idea.

What is the easiest way to change the appearance of the panels without changing everything else?

I currently have these assembles in the program:

I have Essential Studio version 25.1.35.

If you need anything else from me, please let me know.

Thank you!

[Sekar Sivalingam]

Hi Gil Yoder,

Thank you for your feedback. We’ve tested the DockingManager in a sample application (attached) and didn’t encounter the issue you mentioned. To help us resolve this, could you please provide the following:

1. Any style changes you’ve made to the DockingManager or tab headers.
2. A sample demo that reproduces the issue.
3. A reference UI showing the layout you expect.

With these details, we can better understand your requirements and provide a suitable solution.

Looking forward to your response.

Regards,
Sekar Sivalingam

Attachment: WpfApp1_72d50577.zip

[Gil Yoder]

Thank you for responding quickly.

In response to your questions and requests:

1. There are no style changes to the DockingManager in my program (at least not purposefully).
2. I have attached a sample project that reproduces the problem. (See comment below.)
3. This is the expected look:
   

I see the malformed docking windows formed when I added the control styles in App.xaml. After some trial and error, I pinpointed the ToggleButton style that caused the error.

The only changes I made to the ToggleButton style were to the Width, Height, and Margin, but as I can see through testing, those changes influence the docking window buttons.

With this information, I can make changes to my code to work around the issue. However, these changes should not impact the docking window's appearance.

Thank you again for your help.

Attachment: SyncFusionDockMangerTest_554d4d0b.zip

[Sekar Sivalingam]

Hi Gil Yoder,

Thank you for sharing the sample project and additional information. We’ve carefully reviewed your sample and identified the cause of the malformed docking window appearance.

The issue stems from the global ToggleButton style defined in your App.xaml file. Specifically, the Width and Height properties set in the ToggleButton style are affecting the appearance of the docking window buttons (such as the close and pin icons). Since the DockingManager internally uses ToggleButton controls for these actions, any changes to the global ToggleButton style will override their default appearance.

To resolve the issue, please remove or comment out the Width and Height setters in your ToggleButton style. By removing the Width and Height properties, the DockingManager can use its default sizes for the docking window buttons, and this should fix the alignment and visibility issues you observed.

Please let us know if this resolves the issue, or if you need further assistance.

Regards,

Sekar Sivalingam

[Gil Yoder]

Removing the width and height settings from the style would correct the problem. However, setting those values was the main reason I created the style copy.

Instead, I gave the style a name so it would not be the default ToggleButton style, which also works.

Thank you,

Gil

[Sekar Sivalingam]

Hi Gil Yoder,

Thank you for your update. We’re glad to hear that assigning a name to your ToggleButton style resolved the issue without affecting the default behavior of the docking window buttons.

We hope this solution fully addresses the problem you reported. Please feel free to reach out if you have any further questions or need additional assistance.

Regards,
Sekar Sivalingam