How to restyle the RadDocking ToolWindow?

10 posts, 0 answers
  1. Pieter
    Pieter avatar
    34 posts
    Member since:
    Jan 2011

    Posted 19 Sep 2011 Link to this post

    I tried restyling the RadDocking ToolWindows. So I followed the instructions, created a dummy control with a RadDocking in it. copied a ToolWindow Style to a ResourceDictionary.

    However now I end up with an error

    Error 1 The type reference cannot find a public type named 'RadDockingTheme'.

    The error refers to
     <Style x:Key="{telerik:ThemeResourceKey ThemeType={x:Type local:RadDockingTheme}, ElementType={x:Type telerik:ToolWindow}}" TargetType="{x:Type telerik:ToolWindow}">

    I Have an empty class like this :

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using Telerik.Windows.Controls;

    namespace RadControlsWpfApp1
    {
        public class RadDockingTheme:Theme
        {
        }
    }

    and added xmlns:local="clr-namespace:RadControlsWpfApp1;assembly=RadControlsWpfApp1" before the style definition.

    Can somebody tell me waht is wrong or post the source code of a working example of a restyled radpane toolbox?

    Thanks in Advance!

    Pieter

  2. Konstantina
    Admin
    Konstantina avatar
    2332 posts

    Posted 22 Sep 2011 Link to this post

    Hi Pieter,

    Are you trying to create custom theme? If so, it is not necessary if you want to change only the ToolWindows style. You just need to paste the style in the App.xaml page and remove the x:Key of the style. That will make it implicit and it will apply it to all ToolWindows.
    Please find attached a sample project in which this is illustrated.

    Hope this helps.

    All the best,
    Konstantina
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Pieter
    Pieter avatar
    34 posts
    Member since:
    Jan 2011

    Posted 23 Sep 2011 Link to this post

    Hi Konstantina,

    Thanks for responding. By putting a modified ToolWindow style in de App.xaml I can get the Toolwindow with the style I want, which is a Toolwindow with a specific header gradient.
    The zip file you attached unfortunately did not have a working example of this, I think one of the projects is missing.

    However we want RadPanes with header colors telling which function they have in the application. If you drag a RadPane it changes in a ToolWindow, but should keep the same (header)color. So we need different styling for different ToolWindows, or a way to change the style of a ToolWindow once created. Using your example I tried changing the style of a created ToolWindow, but when I try to do this the ToolWindow just dissapears. Changing the ToolWindow style by theming as described in the Theming example of this site does not work because the Theme.Source property where you can put the Style in is gone.

    Update:

    Because all our panes have the same style, except the header, I restyled the ToolWindow so that the Background brush property only applies to the Header, the real background now has a fixed brush. This style is located in the App.xaml and targeting all ToolWindows using<Style TargetType="{x:Type telerik:ToolWindow}">
    Then you need to set the Background brush whenever a ToolWindow gets created. The sourcecode in the zip file shows an example of this, at the radPane_Loaded and the radDocking_PaneStateChange events you can query the radPane for the ToolWindow with window = pane.ParentOfType<ToolWindow>(); If I then set the Background property to the Brush I want I have the ToolWindow the way I want them.

    Thanks for the help!

    Pieter
  5. Konstantina
    Admin
    Konstantina avatar
    2332 posts

    Posted 27 Sep 2011 Link to this post

    Hello Pieter,

    We are glad that you have resolved the issue yourself.

    You can earn some points by creating a sample application of the solution you found and upload it as a KB article.

    Best wishes,
    Konstantina
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  6. Pieter
    Pieter avatar
    34 posts
    Member since:
    Jan 2011

    Posted 09 Oct 2011 Link to this post

    After further testing my restyled RadDocking I encountered some nasty problems.

    The style of a RadDocking is applied many times. Because the header is created dynamically I only could make one global style for the header in which I made the header background grey. Once a RadDocking is loaded I give the background the gradient color I want, and the global headerstyle I made stores this backgoundcolor as the header backgroundcolor.

    So If I give the background the gradient color I want my Docking initially looks good, but after some docking actions the style is applied again, and then I have a grey header again. So I need to know precisely when the style is applied again, then I can set the background again to the gradient color I want.

    When the Dockings are tabwise stacked only one header is visible, but. I can't figure out which headers are visible. The ActivePane isn't always the visible pane, and the headerVisible property doesn't change when a docking ends up in a tabwise stack.

    Furthermore when a Pane is docked in a sidebar and is animated back into the application I can set the background color during this animation, but then this color isn't displayed.

    When the pane is outside the application window you can form a tabwise stack again. Then I lose control over the header color because there are multpile headers..

    If I have some event on which I can change the background this can be fixed, but I can't figure out if this is possible or how to do this.
    Any tips are very much appreciated because I'm stuck here.

    An example project showing what I mean can be downloaded here.
  7. Pana
    Admin
    Pana avatar
    748 posts

    Posted 12 Oct 2011 Link to this post

    Hello Pieter,

    You could edit the ControlTemplate for RadDocking. Its styles should be available in the installation folder for RadControls for Silverlight on a place like this:

    C:\Program Files (x86)\Telerik\RadControls for WPF Q2 2011\Themes\OfficeBlack\Themes\Office\Black\Docking.xaml

    You should replace the theme instances there from external:Office_BlackThemeExternal to telerik:Office_BlackTheme.

    You could see all the places the PaneHeader is used. Instead of trying to find the header and set a background you could edit the controls that have headers. You could edit the RadPaneGroup ControlTemplates. There you could see the SelectedPane property of the GroupHeader bound like:

    SelectedPane="{TemplateBinding SelectedPane}"

    You could as well bind the Background to the SelectedPane and use a converter to determine the color.

    Also note that PaneHeader instances are created for the popups for the AutoHideAreas. This is the other porblem you are experiencing. The same approach should work there too.

    Currently I am not aware of an event that you could use to handle the header creation. The RadDocking exposes a factory that creates RadPaneGroups and RadPanes however I do not think it would help you in your case since the PaneHeader will be created in the control template of the RadPaneGroups.

    Regards,
    Pana
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  8. Pieter
    Pieter avatar
    34 posts
    Member since:
    Jan 2011

    Posted 17 Oct 2011 Link to this post

    Again thanks for responding!

    You suggest 'You could as well bind the Background to the SelectedPane and use a converter to determine the color.' which I do not fully understand. A converter in WPF gets a value to convert, but no hint which object is asking for a conversion. If I use a ColorConverter I do not know what color to select. Every pane has it's own header color.

    As said I changed the global PaneHeader and RadPane style in such a way that the background property only applies to the pane header background in which I want to put a different gradient color for every window. By default the style is gray.

    I found that the radDocking_LayoutUpdated event is fired whenever a pane comes out of the AutoHide zone. When te pane comes out of the AutoHide zone the style is reapplied so my header is gray again. So in the radDocking_LayoutUpdated event I set the color of that pane by setting the background color again. Unfortunately when the pane comes out of the AutoHide zone this color property change is ignored. I made a timer that tries to set the background color every second, but the background color just totally is ignored until I pin the pane again. Right now this effect is annoying because it is demonstrated every time again when we show the possibilities of the application. Any suggestions to solve this is welcome.

    When the application is started I create the RadPanes in de Loaded event of the application. All RadPanes have a loaded event handler in which I set the background again. Also here the color property change is ignored. The only way I could get the colors right at start is to start a separate thread that waits a second after load and then sets the background colors of my headers. This works, but shouldn't be necessary I think. Also here any suggestions to solve this is welcome.

     

  9. Pana
    Admin
    Pana avatar
    748 posts

    Posted 19 Oct 2011 Link to this post

    Hi Pieter,

    Once again I do not think you need to do the Background setting on loaded. Please reffer to the attached project. You could see how the Background of the Header is directly bound to the Background of the selected RadPane inside the RadPaneGroup. I hope the attachment would help.

    Regards,
    Pana
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  10. Pieter
    Pieter avatar
    34 posts
    Member since:
    Jan 2011

    Posted 20 Oct 2011 Link to this post

    Thanks for the suggestion!

    However I tried it and found that indeed you do not need to set the color again when te panes are loaded. When the panes are tabbed the header still gets the right color. So far so good.
     
    However this does not solve the problem with panes moving in from the Auto Hide zone. These panes still have the default PaneHeader color which I set to grey so I can read the white header font. If I bind the pane background color to SelectedPane the panes coming out of the Auto Hide zone get a white background so I can't read the white header text anymore. I don't know how to change the this white background color of the panes to gray or preferrably to the right color. Setting the background color again during the layout_updated event doesn't help, the background property change is ignored.
  11. Dani
    Admin
    Dani avatar
    848 posts

    Posted 26 Oct 2011 Link to this post

    Hello Pieter,

    To have the correct background for the Auto-hide areas as well, you can use the same approach and include in your resources styles for the auto-hide areas.

    Please, find the same project attached and check the style for the left auto-hide area.

    I hope this will be helpful.

    Greetings,
    Dani
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Back to Top
UI for WPF is Visual Studio 2017 Ready