DocumentWindow UI when docked

0 Answers 34 Views
Dock
Curtis
Top achievements
Rank 1
Iron
Iron
Veteran
Curtis asked on 04 May 2022, 07:51 PM

Hello all!  It's been a while :)

I'm working with your radDock control to give my Users a more graceful way of managing their visual data and so far it's working out quite well with one notable exception:

When a User has multiple DocumentWindow docked, the look and feel is fine (VS2012LightTheme) and looks like the image in DockSample1.  However, this is not the intended layout - it's merely the default for when new windows are opened.  Once opened my User move the windows to their desired locations as seen in image, DockSample2.  This is where the trouble is.

1) Which document has focus?  Only those with outstanding eyes can tell.

DockSample3 shows the effect I'm going for.  At a glance, this is only touching the BackColor of the TabStripItem but in fact I need to adjust all of the following:

BTW - I am GUESSING that this is a TabStripItem!  Please forgive me if i got this one wrong, and correct as needed :)

TabStripItem BackColor and Font Forecolor when Tab is ActiveWindow, Mouse Over and Not ActiveWindow

I did find a number of possible solutions in the Forums but most are for much older versions of Telerik UI for Winforms and did not translate.

Any help you can provide would be very helpful.

Kindest regards,

Curtis

 

 

 

 

 

 

Curtis
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 05 May 2022, 07:10 PM

Ok I figured it out.  Took a bunch of hours but the moment i realized the TabStripItem was being created in the DockWindow event that also meant that as these document windows are dragged about and docked elsewhere, the TabStripItem that USED to manage the Document Window was not the same as the new one - might be! But might not be and its got nothing whatsoever to do with my solution...sort of :)

Sounds confusing right?  That's because it is.   Here's the solution:

Where cpDock = my radDock control's name

Private Sub cpDock_ActiveWindowChanged(sender As Object, e As DockWindowEventArgs) Handles cpDock.ActiveWindowChanged
For Each myDocumentWindow As DocumentWindow In cpDock.DockWindows
If myDocumentWindow.Equals(e.DockWindow) Then
myDocumentWindow.TabStripItem.IsSelected = True
Else
myDocumentWindow.TabStripItem.IsSelected = False
End If
Next
End Sub

 

and that's it.  This will make ONLY the Active document "Selected" and it's this property that handles all of the UI elements around mouse over, move, etc.

 

Hope this helps someone other than me :)

 

Dinko | Tech Support Engineer
Telerik team
commented on 06 May 2022, 08:17 AM

I am happy to hear that you have found a solution for your case and thank you for sharing it. Generally speaking, you should have only one active window when the user clicks on its header part. I am not sure why in this case are more than one. I have double-checked this behavior in our examples but wasn't able to reproduce it. If you have time you could try to isolate this in a small project and share it so I can check it out. 
Curtis
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 06 May 2022, 06:11 PM

Hello Dinko!

The screenshots i included (#1 and #2) are from Telerik Demo.  "Tabbed Documents + VisualStudio2017Light Theme

And i agree with you, this is not (IMO) how it should look...but in fact, it IS the "IsSelected" and not the (Active) property causing that background color to get filled.  Also I'd like to say that multiple "IsSelected" items for these (and Toolwindows) shouldn't be allowed.  I can thing of zero use for it and as my original post indicates, there's at least one problematic issue with the UI.

BTW - it's not the Theme.  Every non-touch-theme demonstrates this behavior and maybe even the touch-themes though i did not test those.

 

Good luck!  I look forward to reading your reply

 

 

 

Dinko | Tech Support Engineer
Telerik team
commented on 09 May 2022, 08:42 AM

Thank you for the additional details.

I have double-checked this behavior and you are right that you have multiple selected tabs. Upon checking the code, when you move a window to a different place it is placed inside a different TabStripItem. You could have one selected tab in each TabStripItem but you can have only one ActiveWindow. The difference between the selected and the active window is that the text inside the tab is bold. This behavior is by design as there are cases that will require showing which tab is selected in different TabStripItems containers. Your workaround is valid and you can leave only one selected tab in the ActiveWindowChanged event handler. Another approach that you could consider is to modify the themes applied in your application. Using the Visual Style Builder app you can modify the theme per control and remove/change the repository applied to Selected tabs. 

I have prepared a sample giff file that demonstrates how you can use the app to change the style applied in this case. Keep in mind, that you will need to extend this approach to cover all cases, but still, I think it will be a good starting point.