default colors

Nov 25, 2008 at 2:46 AM
I am using the Oct release of the docking library. When I added docking to my application (which was every easy to do) I noticed that the colors for the windows, borders, tabs (in the document pane) were fairly inconsistent between the different areas.

Is there a setting or switch that will make the docking library look like those in Visual Studio 2008? (fonts, font color, background of headers, size of drawn pin/X/dropdown buttons, etc.)

Nov 25, 2008 at 10:16 PM
I grabbed the aero theme and started modifying it for visual studio look and feel. One thing I did was to convert the bitmaps for the menu, pin and close images to content templates so they can be customized further via color, etc. Here's their xaml definitions (they are night quite perfect but good enough for most resolutions). You can use these as ContentTemplate's in the Button definitions for the headers.


    <!-- 
        You can use xamlpad to tweak the path definitions. Stick
        a Canvas in a Page then paste a path object into the Canvas.
    -->
    <DataTemplate x:Key="closeImage">
        <Path Height="13" Width="13" Data="M 3,3 L 10,10 M 10,3 L 3,10"
            Stroke="White" StrokeThickness="2" VerticalAlignment="Top" />
    </DataTemplate>
    
    <DataTemplate x:Key="menuImage">
        <Polygon Width="13" Height="13" Points="3,5 11,5 7,9"
            Fill="White" VerticalAlignment="Top" StrokeThickness="1" />
    </DataTemplate>
    
    <DataTemplate x:Key="verticalPinImage">
        <Path Stroke="White" Fill="White" Height="13" Width="13"
              StrokeThickness="1">
            <Path.Data>
                <GeometryGroup>
                    <RectangleGeometry Rect="8,3,1,6" />
                    <LineGeometry StartPoint="5,3" EndPoint="8,3" />
                    <LineGeometry StartPoint="5,3" EndPoint="5,9" />
                    <LineGeometry StartPoint="4,9" EndPoint="10,9" />
                    <LineGeometry StartPoint="7,9" EndPoint="7,12" />
                </GeometryGroup>
            </Path.Data>
        </Path>
    </DataTemplate>
    
    <DataTemplate x:Key="docListMenuImage">
        <Path Stroke="White" Fill="White" Height="13" Width="13" StrokeThickness="1">
            <Path.Data>
                <GeometryGroup>
                    <RectangleGeometry Rect="4,4,8,2" />
                    <PathGeometry>
                        <PathFigure IsClosed="True" StartPoint="4,8">
                            <PathFigure.Segments>
                                <PathSegmentCollection>
                                    <LineSegment Point="11,8" />
                                    <LineSegment Point="7,11" />
                                    <LineSegment Point="4,8" />
                                </PathSegmentCollection>
                            </PathFigure.Segments>
                        </PathFigure>
                    </PathGeometry>
                </GeometryGroup>
            </Path.Data>
        </Path>
    </DataTemplate>
Nov 26, 2008 at 3:38 AM
After looking the default color issue further, I realized that reworking the styles would be alot of work to make it match visual studio. So I punted and forced my entire application into the aero theme which has better support by AvalonDock. When using the code below, however, the document pane has a some inconsistent colors compared to the nice looking dock I saw on the home page for the library. I loaded the test project from the sources and it displays poorly using the XP theme. I think that somehow the document pane background is set to a dark grey color--perhaps it is not using a default SystemColor properly somewhere in the dense XAML.

Here's the code I added to my App.xaml to force everything into aero since I am using the XP look on my vista development machine:

 <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/PresentationFramework.Aero;V3.0.0.0;31bf3856ad364e35;component\themes/aero.normalcolor.xaml" />
                <ResourceDictionary Source="/AvalonDock;component/themes/aero.normalcolor.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
Nov 26, 2008 at 9:09 AM
We made this customization:

 

 

<SolidColorBrush x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type ad:DockingManager}, ResourceId={x:Static ad:AvalonDockBrushes.DockablePaneTitleForeground}}"

 

 

Color="Black"/>

In our company, the old (windows 2000) theme is used instead of the Windows XP theme. Then, it's impossible to read the text on the dockable panels using the original color (white).