Custom Title bar for floating window

[Brijesh]

We are using Docking Manager. When we open a window as float mode. It comes with title and close icon. But Can we have custom template for floating window title bar.  Attached the design of float window. And how we can access the custom title bar object in docking manager class.

Attachment: Floatwindow_4d8eb33c.zip

[Durga Rajan]

Hi Brijesh, 

Thanks for contacting Syncfusion support. 

We have checked your query and this can be achieved by customizing the template of the FloatWindow. We have prepared sample which tries to meet your requirement. In this sample we have added “TextBox” in the FloatWindow’s header and bound the modified NativeFloatWindow style in NativeWindowStyle property of DockingManager. You can modify the provided template and FloatWindow style based on your requirement. Please download the sample for the same from below location, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DockingManager_135383_FloatWindow_HeaderTemplate1223639263.zip 

Please get back to us with more details about your requirement if you are facing any issues with the provided FloatWindow style. 

Regards, 

Durga S. 

[Brijesh]

Thank you for reply.

I have some more question

1. In float window template you have a close button in top right. Can we have a refresh button with close button. And when we perform onclick event on refresh button, a method should be called in Main Window.

2. If we are creating a new window and adding in Docking manager with Float mode. Can we pass custom header at that time.

3. Can we have same template for Dock mode also in Docking manager.

[Durga Rajan]

Hi Brijesh, 

Query 1 : Can we have a refresh button with close button 

We have prepared sample to meet your requirement. In this sample we have bound command(“RefreshCommand”) of ViewModel to the new ToggleButton(“RefreshButton”) and we have displayed MessageBox while clicking the RefreshButton. You can modify the given template based on your requirement. Please download the sample for the same from below, 

Query 2: If we are creating a new window and adding in Docking manager with Float mode. Can we pass custom header at that time. 

Yes, we can change the header of the existing or new child of DockingManager using SetHeader() property of DockingManager, please refer the below code example, 

            ContentControl newchild = new ContentControl(); 

            DockingManager.SetHeader(newchild, "Output"); 

            DockingManager.SetState(newchild, DockState.Float); 

            DockingManager.SetDesiredWidthInFloatingMode(newchild, 400); 

            DockingManager.SetDesiredHeightInFloatingMode(newchild, 200); 

            dockingmanager.Children.Add(newchild); 

Query 3 : Can we have same template for Dock mode also in Docking manager. 

No, we have to define separate template for the element which state is Dock. We have prepared sample to meet your requirement. In this sample we have customized the template of DockHeaderPresenter and bound the style to the DockHeaderStyle property of DockingManager. Please download the sample from below location, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DockingManager_135383_ModifiedTemplate-256777098.zip 

Note : In the provided template we have changed the order of the “CloseButton” and “AutoHideButton”. 

If we have misunderstood your query please get back to us with more details. This would help us to proceed further on this. 

Regards, 

Durga S.