I need a FocusVisualStyle workaround.

[Yury]

I'm glad the FocusVisualStyle has been fixed for the header controls but the docking control is still displaying an erratic dotted rectangle.
We need to ship and can't wait anymore for next upgrade so I need a workaround to remove the FocusVisual rectangle that bounce all around when dragging a docking window.

See image of the problem :
http://img442.imageshack.us/img442/2149/q10.png

Setting FocusVisualStyle property of the docking control doesn't remove the rectangle. All WPF standard controls and the one I have from different vendors supports the API correctly and I need to make this work for your controls as well. I've read somewhere on the forum that a control template could be used as a workaround but I don't have Microsoft Blend and I don't know how and what to override in the template (I don't know anything about control templates).

Can you provide the template code or whatever that will fix this?

Thanks,
Yury

[Pana]

Hello Yury,

The RadDocking control is a little bit more complex and is composed from many smaller controls. The 'dotted rectangle' is property of the ToolWindow or RadSplitContainer so setting the FocusVIsualStyle on the RadDocking won't change anything. I have changed the xaml for you and removed the FocusVisualStyle by setting it to Null in xaml as well as set some IsFocusable="False". You can include the Docking.xaml file from the attached project as merged dictionary and it will remove the dots for you.

Sincerely yours,
Panayot
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Yury]

Thanks a lot for looking at my problem. I've tried extensively to remove the dotted rectangles with the theme you provided but it simply doesn't work. The only FocusVisualStyle I can't remove is the floating windows frame, both RadSplitContainer and ToolWindow, it's especially annoying when dragging the windows.

I have modified Window Xaml and Themes of the project you sent me to isolate this behavior, with an image of result. It looks weird but it was 100% unedited screen capture,

Image
http://img299.imageshack.us/img299/6150/rhsr34632.png

Window Xaml

<Window
        x:Class="DockingWithScrollAndMenu.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
        xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
        xmlns:telerikDocking="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Docking"
    xmlns:dock="clr-namespace:Telerik.Windows.Controls.Docking;assembly=Telerik.Windows.Controls.Docking"
        Title="Window1" Width="800" Height="600">

    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/themes/Docking.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

    <Grid>
        <telerikDocking:RadDocking >
            <telerikDocking:RadPane Header="Long Pane 1" />

                <telerikDocking:RadSplitContainer InitialPosition="FloatingDockable"    telerikDocking:RadDocking.FloatingLocation="250, 50"
                    telerikDocking:RadDocking.FloatingSize="300, 220" telerik:StyleManager.Theme="Office_BlackTheme">
                    <telerikDocking:RadPaneGroup>
                    <dock:ToolWindow></dock:ToolWindow>
                        <telerikDocking:RadPane  Header="Long Pane 2" />
                        <telerikDocking:RadPane Header="Long Pane 3"/>
                        <telerikDocking:RadPane Header="Long Pane 4" />
                    </telerikDocking:RadPaneGroup>
                </telerikDocking:RadSplitContainer>
        </telerikDocking:RadDocking>

    </Grid>
</Window>

Theme

<ResourceDictionary

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mscorlib="clr-namespace:System;assembly=mscorlib"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    xmlns:telerikAnimation="clr-namespace:Telerik.Windows.Controls.Animation;assembly=Telerik.Windows.Controls"
    xmlns:telerikEffects="clr-namespace:Telerik.Windows.Controls.TransitionEffects;assembly=Telerik.Windows.Controls"
    xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls.Primitives;assembly=Telerik.Windows.Controls"
    xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
    xmlns:telerikNavigationPrimitives="clr-namespace:Telerik.Windows.Controls.Primitives;assembly=Telerik.Windows.Controls.Navigation"
    xmlns:telerikTransitonControl="clr-namespace:Telerik.Windows.Controls.TransitionControl;assembly=Telerik.Windows.Controls"
    xmlns:telerikChromes="clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls"
    xmlns:telerikTabControl="clr-namespace:Telerik.Windows.Controls.TabControl;assembly=Telerik.Windows.Controls.Navigation"

    xmlns:telerikDocking="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Docking"
    xmlns:telerikDockingAnimations="clr-namespace:Telerik.Windows.Controls.Animations;assembly=Telerik.Windows.Controls.Docking"
    xmlns:dock="clr-namespace:Telerik.Windows.Controls.Docking;assembly=Telerik.Windows.Controls.Docking"
    xmlns:system="clr-namespace:System.Windows.Controls;assembly=PresentationFramework"


>

    <SolidColorBrush x:Key="Docking_Background" Color="Red" />
<SolidColorBrush x:Key="Docking_BorderBrush" Color="Red" />
<telerik:Office_BlackTheme x:Key="Theme" />
<SolidColorBrush x:Key="ButtonIconBackground_Normal" Color="Red" />
<SolidColorBrush x:Key="ButtonIconForeground_Normal" Color="Red" />
<SolidColorBrush x:Key="Compass_VisualCue_Background" Color="Red" />
<SolidColorBrush x:Key="Compass_VisualCue_BorderBrush" Color="Red" />
<Thickness x:Key="Compass_VisualCue_BorderThickness">2</Thickness>
<SolidColorBrush x:Key="GridResizer_Background_Preview" Color="Red" />
<SolidColorBrush x:Key="GridResizer_FocusFrame" Color="Red" />
<LinearGradientBrush x:Key="PaneTabBackground_Normal" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="Red" Offset="0"/>
        <GradientStop Color="Red" Offset="1"/>
    </LinearGradientBrush>
<SolidColorBrush x:Key="PaneTabOuterBorder_Normal" Color="Red" />
<SolidColorBrush x:Key="PaneTabInnerBorder_Normal" Color="Red" />
<SolidColorBrush x:Key="PaneTabOuterBorder_Disabled" Color="Red" />
<SolidColorBrush x:Key="PaneTabInnerBorder_Disabled" Color="Red" />
<SolidColorBrush x:Key="PaneTabBackground_Disabled" Color="Red" />
<SolidColorBrush x:Key="PaneTabOuterBorder_Highlighted" Color="Red" />
<SolidColorBrush x:Key="PaneTabInnerBorder_Highlighted" Color="Red" />
<LinearGradientBrush x:Key="PaneTabBackground_Highlighted" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="Red" Offset="1"/>
        <GradientStop Color="Red" />
    </LinearGradientBrush>
<SolidColorBrush x:Key="PaneTabOuterBorder_Selected" Color="Red" />
<SolidColorBrush x:Key="PaneTabInnerBorder_Selected" Color="Red" />
<LinearGradientBrush x:Key="PaneTabBackground_Selected" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="Red" />
        <GradientStop Color="Red" Offset="1"/>
    </LinearGradientBrush>
<SolidColorBrush x:Key="PaneTabOuterBorder_SelectedHighlighted" Color="Red" />
<SolidColorBrush x:Key="PaneTabInnerBorder_SelectedHighlighted" Color="Red" />
<LinearGradientBrush x:Key="PaneTabBackground_SelectedHighlighted" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="Red" />
        <GradientStop Color="Red" Offset="1"/>
    </LinearGradientBrush>
<SolidColorBrush x:Key="PaneTabOuterBorderVertical_Disabled" Color="Red" />
<SolidColorBrush x:Key="PaneTabInnerBorderVertical_Disabled" Color="Red" />
<SolidColorBrush x:Key="PaneTabBackgroundVertical_Disabled" Color="Red" />
<SolidColorBrush x:Key="PaneTabOuterBorderVertical_Normal" Color="Red" />
<SolidColorBrush x:Key="PaneTabInnerBorderVertical_Normal" Color="Red" />
<LinearGradientBrush x:Key="PaneTabBackgroundVertical_Normal" EndPoint="1,0.5" StartPoint="0,0.5">
        <GradientStop Color="Red" Offset="0"/>
        <GradientStop Color="Red" Offset="1"/>
    </LinearGradientBrush>
<SolidColorBrush x:Key="PaneTabOuterBorderVertical_Highlighted" Color="Red" />
<SolidColorBrush x:Key="PaneTabInnerBorderVertical_Highlighted" Color="Red" />
<LinearGradientBrush x:Key="PaneTabBackgroundVertical_Highlighted" EndPoint="1,0.5" StartPoint="0,0.5">
        <GradientStop Color="Red" Offset="1"/>
        <GradientStop Color="Red" />
    </LinearGradientBrush>
<SolidColorBrush x:Key="PaneTabOuterBorderVertical_Selected" Color="Red" />
<SolidColorBrush x:Key="PaneTabInnerBorderVertical_Selected" Color="Red" />
<LinearGradientBrush x:Key="PaneTabBackgroundVertical_Selected" EndPoint="1,0.5" StartPoint="0,0.5">
        <GradientStop Color="Red" />
        <GradientStop Color="Red" Offset="1"/>
    </LinearGradientBrush>
<SolidColorBrush x:Key="PaneTabOuterBorderVertical_SelectedHighlighted" Color="Red" />
<SolidColorBrush x:Key="PaneTabInnerBorderVertical_SelectedHighlighted" Color="Red" />
<LinearGradientBrush x:Key="PaneTabBackgroundVertical_SelectedHighlighted" EndPoint="1,0.5" StartPoint="0,0.5">
        <GradientStop Color="Red" />
        <GradientStop Color="Red" Offset="1"/>
    </LinearGradientBrush>
<LinearGradientBrush x:Key="PaneTabPinnedBackground_Normal" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="Red" Offset="0"/>
        <GradientStop Color="Red" Offset="1"/>
    </LinearGradientBrush>
<SolidColorBrush x:Key="PaneTabPinnedOuterBorder_Normal" Color="Red" />
<SolidColorBrush x:Key="PaneTabPinnedInnerBorder_Normal" Color="Red" />
<SolidColorBrush x:Key="PaneTabPinnedOuterBorder_Disabled" Color="Red" />
<SolidColorBrush x:Key="PaneTabPinnedInnerBorder_Disabled" Color="Red" />
<SolidColorBrush x:Key="PaneTabPinnedBackground_Disabled" Color="Red" />
<SolidColorBrush x:Key="PaneTabPinnedOuterBorder_Highlighted" Color="Red" />
<SolidColorBrush x:Key="PaneTabPinnedInnerBorder_Highlighted" Color="Red" />
<LinearGradientBrush x:Key="PaneTabPinnedBackground_Highlighted" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="Red"  Offset="1"/>
        <GradientStop Color="Red" />
    </LinearGradientBrush>
<SolidColorBrush x:Key="PaneTabPinnedOuterBorder_Selected" Color="Red" />
<SolidColorBrush x:Key="PaneTabPinnedInnerBorder_Selected" Color="Red" />
<LinearGradientBrush x:Key="PaneTabPinnedBackground_Selected" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="Red" />
        <GradientStop Color="Red" Offset="1"/>
    </LinearGradientBrush>
<SolidColorBrush x:Key="PaneTabPinnedOuterBorder_SelectedHighlighted" Color="Red" />
<SolidColorBrush x:Key="PaneTabPinnedInnerBorder_SelectedHighlighted" Color="Red" />
<LinearGradientBrush x:Key="PaneTabPinnedBackground_SelectedHighlighted" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="Red" />
        <GradientStop Color="Red"  Offset="1"/>
    </LinearGradientBrush>
<CornerRadius x:Key="PaneTabBottomUnpinnedCornerRadius">2</CornerRadius>
<CornerRadius x:Key="PaneTabBottomPinnedCornerRadius">0 0 2 2</CornerRadius>
<CornerRadius x:Key="PaneTabUnpinnedCornerRadius">2</CornerRadius>
<CornerRadius x:Key="PaneTabPinnedCornerRadius">0 0 2 2</CornerRadius>
<CornerRadius x:Key="PaneDocumentHostCornerRadius">2 2 0 0</CornerRadius>
<SolidColorBrush x:Key="PaneTabForeground" Color="Red" />
<CornerRadius x:Key="PaneGroup_PaneFrame_CornerRadius">2 2 2 0</CornerRadius>
<CornerRadius x:Key="PaneGroup_DocumentFrameL4_CornerRadius">0 2 2 2</CornerRadius>
<Thickness x:Key="PaneGroup_DocumentFrameL3_Thickness">2</Thickness>
<SolidColorBrush x:Key="PaneGroup_DocumentFrameL3_Brush" Color="Red" />
<CornerRadius x:Key="PaneGroup_DocumentFrameL3_CornerRadius">0 1 1 1</CornerRadius>
<Thickness x:Key="PaneGroup_DocumentFrameL2_Thickness">2</Thickness>
<SolidColorBrush x:Key="PaneGroup_DocumentFrameL2_Brush" Color="Red" />
<CornerRadius x:Key="PaneGroup_DocumentFrameL2_CornerRadius">0</CornerRadius>
<Thickness x:Key="PaneGroup_DocumentFrameL1_Thickness">1</Thickness>
<SolidColorBrush x:Key="PaneGroup_DocumentFrameL1_Brush" Color="Red" />
<CornerRadius x:Key="PaneGroup_DocumentFrameL1_CornerRadius">0</CornerRadius>
<Thickness x:Key="HeaderButtonMargin">0 2 2 1</Thickness>
<SolidColorBrush x:Key="ButtonIconForeground_MouseOver" Color="Red" />
<SolidColorBrush x:Key="ButtonIconBackground_MouseOver" Color="Red" />
<SolidColorBrush x:Key="ButtonIconForeground_Pressed" Color="Red" />
<SolidColorBrush x:Key="ButtonIconBackground_Pressed" Color="Red" />
<SolidColorBrush x:Key="ButtonIconForeground_Disabled" Color="Red" />
<SolidColorBrush x:Key="ButtonIconBackground_Disabled" Color="Red" />
<CornerRadius x:Key="PaneHeader_CornerRadius">1 1 0 0</CornerRadius>
<Thickness x:Key="PaneHeader_BorderThickness">0 0 0 1</Thickness>
<SolidColorBrush x:Key="PaneHeader_BorderBrush" Color="Red" />
<SolidColorBrush x:Key="PaneHeader_Background" Color="Red" />
<LinearGradientBrush x:Key="PaneHeader_Background_Focused" EndPoint="0 1">
        <GradientStop Color="Red"  Offset="0"/>
        <GradientStop Color="Red"  Offset="1"/>
    </LinearGradientBrush>
<Thickness x:Key="PaneGroup_BorderThickness">1</Thickness>
<SolidColorBrush x:Key="PaneGroup_BorderBrush" Color="Red" />
<SolidColorBrush x:Key="PaneGroup_Background" Color="Red" />
<SolidColorBrush x:Key="ToolWindow_Background" Color="Red" />
<SolidColorBrush x:Key="ToolWindow_OuterBorderBrush" Color="Red" />
<SolidColorBrush x:Key="ToolWindow_InnerBorderBrush" Color="Red" />


    <!-- Docking -->

<!--x:Key="{telerik:ThemeResourceKey ThemeType=
        telerik:Office_BlackTheme , ElementType={
    telerikDocking:RadDocking}}"-->

    <Style TargetType="telerikDocking:RadDocking" >


        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>

        <Setter Property="Background" Value="{StaticResource Docking_Background}" />
        <Setter Property="BorderBrush" Value="{StaticResource Docking_BorderBrush}" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Padding" Value="4" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerikDocking:RadDocking">
                    <Grid x:Name="Root">
                        <Border x:Name="Border" Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Padding="{TemplateBinding Padding}">



                            <DockPanel x:Name="RootDockPanel">

                                <dock:AutoHideArea x:Name="LeftAutoHide"
                                        IsTabStop="False"
                                        telerik:StyleManager.Theme="{StaticResource Theme}"
                                        DockPanel.Dock="Left" BackgroundVisibility="Collapsed"
                                        TabStripPlacement="Left" TabOrientation="Vertical"
                                        telerikAnimation:AnimationManager.AnimationSelector="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(telerikAnimation:AnimationManager.AnimationSelector)}" />
                                <dock:AutoHideArea x:Name="RightAutoHide"
                                        IsTabStop="False"
                                        telerik:StyleManager.Theme="{StaticResource Theme}"
                                        DockPanel.Dock="Right" BackgroundVisibility="Collapsed"
                                        TabStripPlacement="Right" TabOrientation="Vertical"
                                        telerikAnimation:AnimationManager.AnimationSelector="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(telerikAnimation:AnimationManager.AnimationSelector)}" />
                                <dock:AutoHideArea x:Name="TopAutoHide"
                                        IsTabStop="False"
                                        telerik:StyleManager.Theme="{StaticResource Theme}"
                                        DockPanel.Dock="Top" BackgroundVisibility="Collapsed"
                                        TabStripPlacement="Top"
                                        telerikAnimation:AnimationManager.AnimationSelector="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(telerikAnimation:AnimationManager.AnimationSelector)}" />
                                <dock:AutoHideArea x:Name="BottomAutoHide"
                                        IsTabStop="False"
                                        telerik:StyleManager.Theme="{StaticResource Theme}"
                                        DockPanel.Dock="Bottom" BackgroundVisibility="Collapsed"
                                        TabStripPlacement="Bottom"
                                        telerikAnimation:AnimationManager.AnimationSelector="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(telerikAnimation:AnimationManager.AnimationSelector)}" />
                                <telerikDocking:DockingPanel x:Name="ContentDockPanel"
                                        Focusable="False"
                                        Background="{TemplateBinding Background}">

                                    <dock:DocumentHost x:Name="DocumentHost" />

                                </telerikDocking:DockingPanel>
                            </DockPanel>

                        </Border>
                        <Canvas x:Name="PopupPanel">
                            <dock:VisualCue x:Name="PART_DragCue"
                                    IsTabStop="False"
                                    telerik:StyleManager.Theme="{StaticResource Theme}"
                                    Style="{TemplateBinding VisualCueStyle}" Canvas.ZIndex="999997"
                                    telerikAnimation:AnimationManager.AnimationSelector="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(telerikAnimation:AnimationManager.AnimationSelector)}" />
                            <dock:Compass x:Name="PART_Compass"
                                    IsTabStop="False"
                                    telerik:StyleManager.Theme="{StaticResource Theme}"
                                    Style="{TemplateBinding CompassStyle}" Visibility="Collapsed"
                                    Canvas.ZIndex="999998"
                                    telerikAnimation:AnimationManager.AnimationSelector="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(telerikAnimation:AnimationManager.AnimationSelector)}" />
                            <dock:RootCompass x:Name="PART_RootCompass"
                                    IsTabStop="False"
                                    telerik:StyleManager.Theme="{StaticResource Theme}"
                                    Style="{TemplateBinding RootCompassStyle}"
                                    Visibility="Collapsed" Canvas.ZIndex="999999"
                                    telerikAnimation:AnimationManager.AnimationSelector="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(telerikAnimation:AnimationManager.AnimationSelector)}" />
                        </Canvas>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

        <Setter Property="telerikAnimation:AnimationManager.AnimationSelector">
            <Setter.Value>
                <telerikAnimation:AnimationSelector>
                    <!-- ToolWindow, Compass, RootCompass and DragCue animations -->
                    <telerikAnimation:AnimationGroup AnimationName="Move">
                        <telerikAnimation:MoveAnimation />
                        <telerikAnimation:ResizeAnimation />
                        <telerikAnimation:FadeAnimation Direction="In" />
                        <telerikAnimation:ScaleAnimation Direction="In"
                                                         MinScale="0.7"
                                                         MaxScale="1.0"
                                                         TargetElementName="VisualRoot" />
                    </telerikAnimation:AnimationGroup>

                    <telerikAnimation:AnimationGroup AnimationName="Show">
                        <telerikAnimation:FadeAnimation Direction="In" />
                        <telerikAnimation:ScaleAnimation Direction="In"
                                                         MinScale="0.95"
                                                         MaxScale="1.0"
                                                         TargetElementName="VisualRoot" />
                    </telerikAnimation:AnimationGroup>
                    <telerikAnimation:AnimationGroup AnimationName="Hide"
                                                     SpeedRatio="0.7">
                        <telerikAnimation:FadeAnimation Direction="Out" />
                        <telerikAnimation:ScaleAnimation Direction="Out"
                                                         MinScale="0.7"
                                                         MaxScale="1.0"
                                                         TargetElementName="VisualRoot" />
                    </telerikAnimation:AnimationGroup>

                    <!-- AutoHideArea animations -->

                    <!-- Left AutoHideArea animations -->
                    <telerikAnimation:AnimationGroup AnimationName="LeftIn">
                        <telerikDockingAnimations:AutoHideAreaAnimation SlideMode="Top"
                                                                        TargetElementName="PopupChild"
                                                                        Orientation="Horizontal"
                                                                        Direction="In" />
                        <telerikAnimation:FadeAnimation TargetElementName="PopupChild"
                                Direction="In" />
                    </telerikAnimation:AnimationGroup>

                    <telerikAnimation:AnimationGroup AnimationName="LeftOut">
                        <telerikDockingAnimations:AutoHideAreaAnimation TargetElementName="PopupChild"
                                                                        SlideMode="Top"
                                                                        Orientation="Horizontal"
                                                                        Direction="Out" />
                        <telerikAnimation:FadeAnimation TargetElementName="PopupChild"
                                                        Direction="Out" />
                    </telerikAnimation:AnimationGroup>

                    <!-- Top AutoHideArea animations -->

                    <telerikAnimation:AnimationGroup AnimationName="TopIn">
                        <telerikDockingAnimations:AutoHideAreaAnimation Orientation="Vertical"
                                                                        TargetElementName="PopupChild"
                                                                        Direction="In" />
                        <telerikAnimation:FadeAnimation TargetElementName="PopupChild"
                                                        Direction="In" />
                    </telerikAnimation:AnimationGroup>

                    <telerikAnimation:AnimationGroup AnimationName="TopOut">
                        <telerikDockingAnimations:AutoHideAreaAnimation TargetElementName="PopupChild"
                                                                        Orientation="Vertical"
                                                                        Direction="Out" />
                        <telerikAnimation:FadeAnimation TargetElementName="PopupChild"
                                                        Direction="Out" />
                    </telerikAnimation:AnimationGroup>

                    <!-- Right AutoHideArea animations -->

                    <telerikAnimation:AnimationGroup AnimationName="RightIn">
                        <telerikDockingAnimations:AutoHideAreaAnimation SlideMode="Bottom"
                                                                        TargetElementName="PopupChild"
                                                                        Orientation="Horizontal"
                                                                        Direction="In" />
                        <telerikAnimation:FadeAnimation TargetElementName="PopupChild"
                                                        Direction="In" />
                    </telerikAnimation:AnimationGroup>

                    <telerikAnimation:AnimationGroup AnimationName="RightOut">
                        <telerikDockingAnimations:AutoHideAreaAnimation TargetElementName="PopupChild" SlideMode="Bottom"
                                                                        Orientation="Horizontal"
                                                                        Direction="Out" />
                        <telerikAnimation:FadeAnimation TargetElementName="PopupChild"
                                                        Direction="Out" />
                    </telerikAnimation:AnimationGroup>

                    <!-- Bottom AutoHideArea animations -->

                    <telerikAnimation:AnimationGroup AnimationName="BottomIn">
                        <telerikDockingAnimations:AutoHideAreaAnimation SlideMode="Bottom"
                                Orientation="Vertical" TargetElementName="PopupChild" Direction="In" />
                        <telerikAnimation:FadeAnimation TargetElementName="PopupChild"
                                Direction="In" />
                    </telerikAnimation:AnimationGroup>
                    <telerikAnimation:AnimationGroup AnimationName="BottomOut">
                        <telerikDockingAnimations:AutoHideAreaAnimation
                                TargetElementName="PopupChild" Direction="Out"
                                Orientation="Vertical" SlideMode="Bottom" />
                        <telerikAnimation:FadeAnimation TargetElementName="PopupChild"
                                Direction="Out" />
                    </telerikAnimation:AnimationGroup>
                </telerikAnimation:AnimationSelector>
            </Setter.Value>
        </Setter>
    </Style>


    <!-- Compass -->


    <Style x:Key="CenterIndicatorStyle" TargetType="telerikChromes:ButtonChrome">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerikChromes:ButtonChrome">
                    <telerikChromes:ButtonChrome telerik:StyleManager.Theme="{StaticResource Theme}" RenderMouseOver="{TemplateBinding RenderHighlighted}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="LeftIndicatorStyle" TargetType="telerikChromes:ButtonChrome">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerikChromes:ButtonChrome">
                    <Grid>
                        <telerikChromes:ButtonChrome telerik:StyleManager.Theme="{StaticResource Theme}" RenderMouseOver="{TemplateBinding RenderHighlighted}" />
                        <Path Fill="{StaticResource ButtonIconBackground_Normal}" Margin="0 1 0 1" Width="4" Height="7" Data="M4,0 L4,7 3,7 3,6 2,6 2,5 1,5 1,4 0,4 0,3 1,3 1,2 2,2 2,1 3,1 3,0 z" />
                        <Path Fill="{StaticResource ButtonIconForeground_Normal}" Margin="0 0 0 2" Width="4" Height="7" Data="M4,0 L4,7 3,7 3,6 2,6 2,5 1,5 1,4 0,4 0,3 1,3 1,2 2,2 2,1 3,1 3,0 z" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="RightIndicatorStyle" TargetType="telerikChromes:ButtonChrome">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerikChromes:ButtonChrome">
                    <Grid>
                        <telerikChromes:ButtonChrome telerik:StyleManager.Theme="{StaticResource Theme}" RenderMouseOver="{TemplateBinding RenderHighlighted}" />
                        <Path Fill="{StaticResource ButtonIconBackground_Normal}" Margin="0 1 0 1" Width="4" Height="7" Data="M0,0 L0,7 1,7 1,6 2,6 2,5 3,5 3,4 4,4 4,3 3,3 3,2 2,2 2,1 1,1 1,0 z" />
                        <Path Fill="{StaticResource ButtonIconForeground_Normal}" Margin="0 0 0 2" Width="4" Height="7" Data="M0,0 L0,7 1,7 1,6 2,6 2,5 3,5 4,3 4,4 4,3 3,3 3,2 2,2 2,1 1,1 1,0 z" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="TopIndicatorStyle" TargetType="telerikChromes:ButtonChrome">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerikChromes:ButtonChrome">
                    <Grid>
                        <telerikChromes:ButtonChrome telerik:StyleManager.Theme="{StaticResource Theme}" RenderMouseOver="{TemplateBinding RenderHighlighted}" />
                        <Path Fill="{StaticResource ButtonIconBackground_Normal}" Margin="0 1 0 1" Width="7" Height="4" Data="M0,4 L7,4 7,3 6,3 6,2 5,2 5,1 4,1 4,0 3,0 3,1 2,1 2,2 1,2 1,3 0,3 z" />
                        <Path Fill="{StaticResource ButtonIconForeground_Normal}" Margin="0 0 0 2" Width="7" Height="4" Data="M0,4 L7,4 7,3 6,3 6,2 5,2 5,1 4,1 4,0 3,0 3,1 2,1 2,2 1,2 1,3 0,3 z" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="BottomIndicatorStyle" TargetType="telerikChromes:ButtonChrome">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerikChromes:ButtonChrome">
                    <Grid>
                        <telerikChromes:ButtonChrome telerik:StyleManager.Theme="{StaticResource Theme}" RenderMouseOver="{TemplateBinding RenderHighlighted}" />
                        <Path Fill="{StaticResource ButtonIconBackground_Normal}" Margin="0 1 0 1" Width="7" Height="4" Data="M0,0 L7,0 7,1 6,1 6,2 5,2 5,3 4,3 4,4 3,4 3,3 2,3 2,2 1,2 1,1 0,1 z" />
                        <Path Fill="{StaticResource ButtonIconForeground_Normal}" Margin="0 0 0 2" Width="7" Height="4" Data="M0,0 L7,0 7,1 6,1 6,2 5,2 5,3 4,3 4,4 3,4 3,3 2,3 2,2 1,2 1,1 0,1 z" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


    <!--Compass Style-->
    <!--x:Key="{telerik:ThemeResourceKey ThemeType=telerik:Office_BlackTheme , ElementType={x:Type dock:Compass}}"-->

    <Style TargetType="dock:Compass">

        <Setter Property="Width" Value="105" />
        <Setter Property="Height" Value="105" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="dock:Compass">
                    <Border
                        x:Name="VisualRoot"
                        Background="{TemplateBinding Background}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        BorderBrush="{TemplateBinding BorderBrush}">

                        <Grid x:Name="Visual" HorizontalAlignment="Center" VerticalAlignment="Center" Width="80" Height="80">
                            <telerikChromes:ButtonChrome x:Name="PART_LeftIndicator" Style="{StaticResource LeftIndicatorStyle}" Width="20" Height="26" CornerRadius="2 1 1 2" HorizontalAlignment="Left" />
                            <telerikChromes:ButtonChrome x:Name="PART_TopIndicator" Style="{StaticResource TopIndicatorStyle}" Width="26" Height="20" CornerRadius="2 2 1 1" VerticalAlignment="Top" />
                            <telerikChromes:ButtonChrome x:Name="PART_RightIndicator" Style="{StaticResource RightIndicatorStyle}" Width="20" Height="26" CornerRadius="1 2 2 1" HorizontalAlignment="Right" />
                            <telerikChromes:ButtonChrome x:Name="PART_BottomIndicator" Style="{StaticResource BottomIndicatorStyle}" Width="26" Height="20" CornerRadius="1 1 2 2" VerticalAlignment="Bottom" />
                            <telerikChromes:ButtonChrome x:Name="PART_CenterIndicator" Style="{StaticResource CenterIndicatorStyle}" Width="32" Height="32" CornerRadius="3" />
                        </Grid>


                    </Border>

                    <ControlTemplate.Triggers>
                        <Trigger Property="DockPosition" Value="Left">
                            <Setter TargetName="PART_LeftIndicator" Property="RenderHighlighted" Value="True" />
                        </Trigger>
                        <Trigger Property="DockPosition" Value="Top">
                            <Setter TargetName="PART_TopIndicator" Property="RenderHighlighted" Value="True" />
                        </Trigger>
                        <Trigger Property="DockPosition" Value="Right">
                            <Setter TargetName="PART_RightIndicator" Property="RenderHighlighted" Value="True" />
                        </Trigger>
                        <Trigger Property="DockPosition" Value="Bottom">
                            <Setter TargetName="PART_BottomIndicator" Property="RenderHighlighted" Value="True" />
                        </Trigger>
                        <Trigger Property="DockPosition" Value="Center">
                            <Setter TargetName="PART_CenterIndicator" Property="RenderHighlighted" Value="True" />
                        </Trigger>

                        <Trigger Property="IsLeftIndicatorVisible" Value="False">
                            <Setter TargetName="PART_LeftIndicator" Property="Visibility" Value="Collapsed" />
                        </Trigger>
                        <Trigger Property="IsTopIndicatorVisible" Value="False">
                            <Setter TargetName="PART_TopIndicator" Property="Visibility" Value="Collapsed" />
                        </Trigger>
                        <Trigger Property="IsRightIndicatorVisible" Value="False">
                            <Setter TargetName="PART_RightIndicator" Property="Visibility" Value="Collapsed" />
                        </Trigger>
                        <Trigger Property="IsBottomIndicatorVisible" Value="False">
                            <Setter TargetName="PART_BottomIndicator" Property="Visibility" Value="Collapsed" />
                        </Trigger>
                        <Trigger Property="IsCenterIndicatorVisible" Value="False">
                            <Setter TargetName="PART_CenterIndicator" Property="Visibility" Value="Collapsed" />
                        </Trigger>
                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--Compass Style-->
    <!--x:Key="{telerik:ThemeResourceKey ThemeType=
        telerik:Office_BlackTheme , ElementType={x:Type dock:RootCompass}}"-->

    <Style TargetType="dock:RootCompass">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="dock:Compass">
                    <Border
                        x:Name="VisualRoot"
                        Background="{TemplateBinding Background}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        BorderBrush="{TemplateBinding BorderBrush}">


                        <Grid x:Name="Visual">
                            <telerikChromes:ButtonChrome x:Name="PART_LeftIndicator" Style="{StaticResource LeftIndicatorStyle}" Margin="3" Width="20" Height="26" CornerRadius="2 1 1 2" HorizontalAlignment="Left" />
                            <telerikChromes:ButtonChrome x:Name="PART_TopIndicator" Style="{StaticResource TopIndicatorStyle}" Margin="3" Width="26" Height="20" CornerRadius="2 2 1 1" VerticalAlignment="Top" />
                            <telerikChromes:ButtonChrome x:Name="PART_RightIndicator" Style="{StaticResource RightIndicatorStyle}" Margin="3" Width="20" Height="26" CornerRadius="1 2 2 1" HorizontalAlignment="Right" />
                            <telerikChromes:ButtonChrome x:Name="PART_BottomIndicator" Style="{StaticResource BottomIndicatorStyle}" Margin="3" Width="26" Height="20" CornerRadius="1 1 2 2" VerticalAlignment="Bottom" />
                        </Grid>

                    </Border>

                    <ControlTemplate.Triggers>
                        <Trigger Property="DockPosition" Value="Left">
                            <Setter TargetName="PART_LeftIndicator" Property="RenderHighlighted" Value="True" />
                        </Trigger>
                        <Trigger Property="DockPosition" Value="Top">
                            <Setter TargetName="PART_TopIndicator" Property="RenderHighlighted" Value="True" />
                        </Trigger>
                        <Trigger Property="DockPosition" Value="Right">
                            <Setter TargetName="PART_RightIndicator" Property="RenderHighlighted" Value="True" />
                        </Trigger>
                        <Trigger Property="DockPosition" Value="Bottom">
                            <Setter TargetName="PART_BottomIndicator" Property="RenderHighlighted" Value="True" />
                        </Trigger>
                        <Trigger Property="IsLeftIndicatorVisible" Value="False">
                            <Setter TargetName="PART_LeftIndicator" Property="Visibility" Value="Collapsed" />
                        </Trigger>
                        <Trigger Property="IsTopIndicatorVisible" Value="False">
                            <Setter TargetName="PART_TopIndicator" Property="Visibility" Value="Collapsed" />
                        </Trigger>
                        <Trigger Property="IsRightIndicatorVisible" Value="False">
                            <Setter TargetName="PART_RightIndicator" Property="Visibility" Value="Collapsed" />
                        </Trigger>
                        <Trigger Property="IsBottomIndicatorVisible" Value="False">
                            <Setter TargetName="PART_BottomIndicator" Property="Visibility" Value="Collapsed" />
                        </Trigger>
                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- VisualCue Style-->
    <!--x:Key="{telerik:ThemeResourceKey ThemeType= telerik:Office_BlackTheme , ElementType={x:Type dock:VisualCue}}"-->
    <Style TargetType="dock:VisualCue" >
        <Setter Property="Background" Value="{StaticResource Compass_VisualCue_Background}" />
        <Setter Property="BorderBrush" Value="{StaticResource Compass_VisualCue_BorderBrush}" />
        <Setter Property="BorderThickness" Value="{StaticResource Compass_VisualCue_BorderThickness}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="dock:VisualCue">
                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Visibility" Value="Collapsed" />
    </Style>


    <!-- Document Host -->


    <!--DocumentHost Style-->
    <!--x:Key="{telerik:ThemeResourceKey ThemeType=
        telerik:Office_BlackTheme , ElementType={x:Type dock:DocumentHost}}"-->

    <Style TargetType="dock:DocumentHost">
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
        <Setter Property="MinWidth" Value="25" />
        <Setter Property="MinHeight" Value="25" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="dock:DocumentHost">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Padding="{TemplateBinding Padding}">
                        <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}"
                                Content="{TemplateBinding Content}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


    <!-- GridResizer -->

    <Style x:Key="GridResizerPreviewStyle" TargetType="Control">
        <Setter Property="Background" Value="{StaticResource GridResizer_Background_Preview}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Control">
                    <Grid x:Name="Root" Opacity=".5">



                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--x:Key="{telerik:ThemeResourceKey ThemeType=telerik:Office_BlackTheme , ElementType={x:Type dock:RadGridResizer}}"-->
    <Style TargetType="dock:RadGridResizer">

        <Setter Property="FocusVisualStyle" Value="{x:Null}" />

        <Setter Property="Background" Value="Transparent" />
        <Setter Property="IsTabStop" Value="true" />
        <Setter Property="PreviewStyle" Value="{StaticResource GridResizerPreviewStyle}" />
        <Setter Property="HorizontalAlignment" Value="Right" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="dock:RadGridResizer">
                    <Grid x:Name="Root" IsHitTestVisible="{TemplateBinding IsEnabled}">



                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


    <!--SplitContainer Style-->
    <!--x:Key="{telerik:ThemeResourceKey ThemeType=
        telerik:Office_BlackTheme , ElementType={x:Type telerikDocking:RadSplitContainer}}"-->

    <Style TargetType="telerikDocking:RadSplitContainer">
      <Setter Property="Focusable" Value="false" />
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="IsTabStop" Value="False" />

        <Setter Property="Template">
            <Setter.Value>

                <ControlTemplate TargetType="telerikDocking:RadSplitContainer">
                    <Grid>


                        <Border x:Name="border" Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Focusable="False"
                                FocusVisualStyle="{x:Null}"
                                Padding="{TemplateBinding Padding}">
                            <ItemsPresenter />
                        </Border>

                        <dock:RadGridResizer x:Name="DockResizer" Placement="Left"
                                ShowsPreview="True" Visibility="Collapsed"
                                VerticalAlignment="Stretch" HorizontalAlignment="Left"
                                Focusable="False"
                                FocusVisualStyle="{x:Null}"/>
                    </Grid>


                    <ControlTemplate.Triggers>

                        <Trigger Property="SplitterPosition">
                            <Trigger.Value>
                                <Dock>Left</Dock>
                            </Trigger.Value>
                            <Setter TargetName="DockResizer" Property="Visibility" Value="Visible" />
                            <Setter TargetName="DockResizer" Property="Width" Value="4" />
                            <Setter TargetName="border" Property="Margin" Value="4 0 0 0" />
                            <Setter TargetName="DockResizer" Property="Cursor" Value="SizeWE" />
                        </Trigger>
                        <Trigger Property="SplitterPosition">
                            <Trigger.Value>
                                <Dock>Top</Dock>
                            </Trigger.Value>
                            <Setter TargetName="DockResizer" Property="Visibility" Value="Visible" />
                            <Setter TargetName="DockResizer" Property="VerticalAlignment"
                                    Value="Top" />
                            <Setter TargetName="DockResizer" Property="HorizontalAlignment"
                                    Value="Stretch" />
                            <Setter TargetName="DockResizer" Property="Cursor" Value="SizeNS" />
                            <Setter TargetName="DockResizer" Property="Placement">
                                <Setter.Value>
                                    <Dock>Top</Dock>
                                </Setter.Value>
                            </Setter>
                            <Setter TargetName="DockResizer" Property="Height" Value="4" />
                            <Setter TargetName="border" Property="Margin" Value="0 4 0 0" />
                        </Trigger>
                        <Trigger Property="SplitterPosition">
                            <Trigger.Value>
                                <Dock>Right</Dock>
                            </Trigger.Value>
                            <Setter TargetName="DockResizer" Property="Visibility" Value="Visible" />
                            <Setter TargetName="DockResizer" Property="Width" Value="4" />
                            <Setter TargetName="border" Property="Margin" Value="0 0 4 0" />
                            <Setter TargetName="DockResizer" Property="HorizontalAlignment"
                                    Value="Right" />
                            <Setter TargetName="DockResizer" Property="Cursor" Value="SizeWE" />
                            <Setter TargetName="DockResizer" Property="Placement">
                                <Setter.Value>
                                    <Dock>Right</Dock>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="SplitterPosition">
                            <Trigger.Value>
                                <Dock>Bottom</Dock>
                            </Trigger.Value>
                            <Setter TargetName="DockResizer" Property="Cursor" Value="SizeNS" />
                            <Setter TargetName="DockResizer" Property="Visibility" Value="Visible" />
                            <Setter TargetName="DockResizer" Property="VerticalAlignment"
                                    Value="Bottom" />
                            <Setter TargetName="DockResizer" Property="HorizontalAlignment"
                                    Value="Stretch" />
                            <Setter TargetName="DockResizer" Property="Placement">
                                <Setter.Value>
                                    <Dock>Bottom</Dock>
                                </Setter.Value>
                            </Setter>
                            <Setter TargetName="DockResizer" Property="Height" Value="4" />
                            <Setter TargetName="border" Property="Margin" Value="0 0 0 4" />
                        </Trigger>
                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="MinWidth" Value="15" />
        <Setter Property="MinHeight" Value="15" />
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <telerikDocking:ProportionalStackPanel />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>


    <!-- Pane -->


    <Style x:Key="DocumentTabChromeStyle" TargetType="telerikChromes:ButtonChrome">

        <Setter Property="Background" Value="{StaticResource PaneTabBackground_Normal}" />
        <Setter Property="BorderBrush" Value="{StaticResource PaneTabOuterBorder_Normal}" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerikChromes:ButtonChrome">
                    <Border x:Name="OuterBorder" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="{TemplateBinding CornerRadius}" Background="{TemplateBinding Background}" >

                        <Border x:Name="InnerBorder" CornerRadius="{TemplateBinding InnerCornerRadius}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{StaticResource PaneTabInnerBorder_Normal}" />
                    </Border>

                    <ControlTemplate.Triggers>
                        <!-- Horizontal -->
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="Orientation" Value="Horizontal" />
                                <Condition Property="RenderEnabled" Value="False" />
                                <Condition Property="RenderNormal" Value="True" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="OuterBorder" Property="BorderBrush" Value="{StaticResource PaneTabOuterBorder_Disabled}" />
                            <Setter TargetName="InnerBorder" Property="BorderBrush" Value="{StaticResource PaneTabInnerBorder_Disabled}" />
                            <Setter TargetName="OuterBorder" Property="Background" Value="{StaticResource PaneTabBackground_Disabled}" />
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="Orientation" Value="Horizontal" />
                                <Condition Property="RenderEnabled" Value="True" />
                                <Condition Property="RenderHighlighted" Value="True" />
                                <Condition Property="RenderSelected" Value="False" />
                                <Condition Property="RenderMouseOver" Value="False" />
                                <Condition Property="RenderPressed" Value="False" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="OuterBorder" Property="BorderBrush" Value="{StaticResource PaneTabOuterBorder_Highlighted}" />
                            <Setter TargetName="InnerBorder" Property="BorderBrush" Value="{StaticResource PaneTabInnerBorder_Highlighted}" />
                            <Setter TargetName="OuterBorder" Property="Background" Value="{StaticResource PaneTabBackground_Highlighted}" />
                        </MultiTrigger>

                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="Orientation" Value="Horizontal" />
                                <Condition Property="RenderEnabled" Value="True" />
                                <Condition Property="RenderHighlighted" Value="False" />
                                <Condition Property="RenderSelected" Value="True" />
                                <Condition Property="RenderMouseOver" Value="False" />
                                <Condition Property="RenderPressed" Value="False" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="OuterBorder" Property="BorderBrush" Value="{StaticResource PaneTabOuterBorder_Selected}" />
                            <Setter TargetName="InnerBorder" Property="BorderBrush" Value="{StaticResource PaneTabInnerBorder_Selected}" />
                            <Setter TargetName="OuterBorder" Property="Background" Value="{StaticResource PaneTabBackground_Selected}" />
                        </MultiTrigger>

                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="Orientation" Value="Horizontal" />
                                <Condition Property="RenderEnabled" Value="True" />
                                <Condition Property="RenderHighlighted" Value="True" />
                                <Condition Property="RenderSelected" Value="True" />
                                <Condition Property="RenderMouseOver" Value="False" />
                                <Condition Property="RenderPressed" Value="False" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="OuterBorder" Property="BorderBrush" Value="{StaticResource PaneTabOuterBorder_SelectedHighlighted}" />
                            <Setter TargetName="InnerBorder" Property="BorderBrush" Value="{StaticResource PaneTabInnerBorder_SelectedHighlighted}" />
                            <Setter TargetName="OuterBorder" Property="Background" Value="{StaticResource PaneTabBackground_SelectedHighlighted}" />
                        </MultiTrigger>

                        <!-- Vertical -->
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="Orientation" Value="Vertical" />
                                <Condition Property="RenderEnabled" Value="False" />
                                <Condition Property="RenderNormal" Value="True" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="OuterBorder" Property="BorderBrush" Value="{StaticResource PaneTabOuterBorderVertical_Disabled}" />
                            <Setter TargetName="InnerBorder" Property="BorderBrush" Value="{StaticResource PaneTabInnerBorderVertical_Disabled}" />
                            <Setter TargetName="OuterBorder" Property="Background" Value="{StaticResource PaneTabBackgroundVertical_Disabled}" />
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="Orientation" Value="Vertical" />
                                <Condition Property="RenderEnabled" Value="True" />
                                <Condition Property="RenderNormal" Value="True" />
                                <Condition Property="RenderMouseOver" Value="False" />
                                <Condition Property="RenderPressed" Value="False" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="OuterBorder" Property="BorderBrush" Value="{StaticResource PaneTabOuterBorderVertical_Normal}" />
                            <Setter TargetName="InnerBorder" Property="BorderBrush" Value="{StaticResource PaneTabInnerBorderVertical_Normal}" />
                            <Setter TargetName="OuterBorder" Property="Background" Value="{StaticResource PaneTabBackgroundVertical_Normal}" />
                        </MultiTrigger>

                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="Orientation" Value="Vertical" />
                                <Condition Property="RenderEnabled" Value="True" />
                                <Condition Property="RenderHighlighted" Value="True" />
                                <Condition Property="RenderSelected" Value="False" />
                                <Condition Property="RenderMouseOver" Value="False" />
                                <Condition Property="RenderPressed" Value="False" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="OuterBorder" Property="BorderBrush" Value="{StaticResource PaneTabOuterBorderVertical_Highlighted}" />
                            <Setter TargetName="InnerBorder" Property="BorderBrush" Value="{StaticResource PaneTabInnerBorderVertical_Highlighted}" />
                            <Setter TargetName="OuterBorder" Property="Background" Value="{StaticResource PaneTabBackgroundVertical_Highlighted}" />
                        </MultiTrigger>

                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="Orientation" Value="Vertical" />
                                <Condition Property="RenderEnabled" Value="True" />
                                <Condition Property="RenderSelected" Value="True" />
                                <Condition Property="RenderMouseOver" Value="False" />
                                <Condition Property="RenderPressed" Value="False" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="OuterBorder" Property="BorderBrush" Value="{StaticResource PaneTabOuterBorderVertical_Selected}" />
                            <Setter TargetName="InnerBorder" Property="BorderBrush" Value="{StaticResource PaneTabInnerBorderVertical_Selected}" />
                            <Setter TargetName="OuterBorder" Property="Background" Value="{StaticResource PaneTabBackgroundVertical_Selected}" />
                        </MultiTrigger>

                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="Orientation" Value="Vertical" />
                                <Condition Property="RenderEnabled" Value="True" />
                                <Condition Property="RenderHighlighted" Value="True" />
                                <Condition Property="RenderSelected" Value="True" />
                                <Condition Property="RenderMouseOver" Value="False" />
                                <Condition Property="RenderPressed" Value="False" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="OuterBorder" Property="BorderBrush" Value="{StaticResource PaneTabOuterBorderVertical_SelectedHighlighted}" />
                            <Setter TargetName="InnerBorder" Property="BorderBrush" Value="{StaticResource PaneTabInnerBorderVertical_SelectedHighlighted}" />
                            <Setter TargetName="OuterBorder" Property="Background" Value="{StaticResource PaneTabBackgroundVertical_SelectedHighlighted}" />
                        </MultiTrigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="DocumentPinnedTabChromeStyle" TargetType="telerikChromes:ButtonChrome">

        <Setter Property="Background" Value="{StaticResource PaneTabPinnedBackground_Normal}" />
        <Setter Property="BorderBrush" Value="{StaticResource PaneTabPinnedOuterBorder_Normal}" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerikChromes:ButtonChrome">
                    <Border x:Name="OuterBorder" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="{TemplateBinding CornerRadius}" Background="{TemplateBinding Background}" >

                        <Border x:Name="InnerBorder" CornerRadius="{TemplateBinding InnerCornerRadius}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{StaticResource PaneTabPinnedInnerBorder_Normal}" />
                    </Border>

                    <ControlTemplate.Triggers>
                        <!-- Horizontal -->
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="Orientation" Value="Horizontal" />
                                <Condition Property="RenderEnabled" Value="False" />
                                <Condition Property="RenderNormal" Value="True" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="OuterBorder" Property="BorderBrush" Value="{StaticResource PaneTabPinnedOuterBorder_Disabled}" />
                            <Setter TargetName="InnerBorder" Property="BorderBrush" Value="{StaticResource PaneTabPinnedInnerBorder_Disabled}" />
                            <Setter TargetName="OuterBorder" Property="Background" Value="{StaticResource PaneTabPinnedBackground_Disabled}" />
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="Orientation" Value="Horizontal" />
                                <Condition Property="RenderEnabled" Value="True" />
                                <Condition Property="RenderHighlighted" Value="True" />
                                <Condition Property="RenderSelected" Value="False" />
                                <Condition Property="RenderMouseOver" Value="False" />
                                <Condition Property="RenderPressed" Value="False" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="OuterBorder" Property="BorderBrush" Value="{StaticResource PaneTabPinnedOuterBorder_Highlighted}" />
                            <Setter TargetName="InnerBorder" Property="BorderBrush" Value="{StaticResource PaneTabPinnedInnerBorder_Highlighted}" />
                            <Setter TargetName="OuterBorder" Property="Background" Value="{StaticResource PaneTabPinnedBackground_Highlighted}" />
                        </MultiTrigger>

                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="Orientation" Value="Horizontal" />
                                <Condition Property="RenderEnabled" Value="True" />
                                <Condition Property="RenderHighlighted" Value="False" />
                                <Condition Property="RenderSelected" Value="True" />
                                <Condition Property="RenderMouseOver" Value="False" />
                                <Condition Property="RenderPressed" Value="False" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="OuterBorder" Property="BorderBrush" Value="{StaticResource PaneTabPinnedOuterBorder_Selected}" />
                            <Setter TargetName="InnerBorder" Property="BorderBrush" Value="{StaticResource PaneTabPinnedInnerBorder_Selected}" />
                            <Setter TargetName="OuterBorder" Property="Background" Value="{StaticResource PaneTabPinnedBackground_Selected}" />
                        </MultiTrigger>

                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="Orientation" Value="Horizontal" />
                                <Condition Property="RenderEnabled" Value="True" />
                                <Condition Property="RenderHighlighted" Value="True" />
                                <Condition Property="RenderSelected" Value="True" />
                                <Condition Property="RenderMouseOver" Value="False" />
                                <Condition Property="RenderPressed" Value="False" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="OuterBorder" Property="BorderBrush" Value="{StaticResource PaneTabPinnedOuterBorder_SelectedHighlighted}" />
                            <Setter TargetName="InnerBorder" Property="BorderBrush" Value="{StaticResource PaneTabPinnedInnerBorder_SelectedHighlighted}" />
                            <Setter TargetName="OuterBorder" Property="Background" Value="{StaticResource PaneTabPinnedBackground_SelectedHighlighted}" />
                        </MultiTrigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>






    <dock:InvertedBooleanConverter x:Key="invertedBooleanConverter" />

    <ControlTemplate x:Key="PaneBottomTemplate" TargetType="telerikDocking:RadPane">
        <Grid x:Name="wrapper" Margin="0 4 -1 0">


            <telerikChromes:ButtonChrome x:Name="ChromeUnpinned" Visibility="Collapsed" Style="{StaticResource DocumentTabChromeStyle}" BorderThickness="1" CornerRadius="{StaticResource PaneTabBottomUnpinnedCornerRadius}" RenderSelected="{TemplateBinding IsSelected}" RenderHighlighted="{TemplateBinding IsMouseOver}" />
            <telerikChromes:ButtonChrome x:Name="ChromePinned" Visibility="Collapsed" Style="{StaticResource DocumentTabChromeStyle}" Margin="0 1 0 2" BorderThickness="1 0 1 1" CornerRadius="{StaticResource PaneTabBottomPinnedCornerRadius}" RenderSelected="{TemplateBinding IsSelected}" RenderHighlighted="{TemplateBinding IsMouseOver}" />
            <Border x:Name="ContentBorder">
                <telerikNavigationPrimitives:TabItemContentPresenter x:Name="HeaderElement" FocusVisualStyle="{x:Null}"  Margin="6 3" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" Padding="{TemplateBinding Padding}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
            </Border>
        </Grid>

        <ControlTemplate.Triggers>
            <Trigger Property="IsEnabled" Value="False">
                <Setter TargetName="HeaderElement" Property="Opacity" Value="0.33" />
            </Trigger>
            <Trigger Property="IsSelected" Value="True">
                <Setter TargetName="ChromePinned" Property="Margin" Value="0" />
            </Trigger>
            <Trigger Property="IsPinned" Value="False">
                <Setter TargetName="ChromeUnpinned" Property="Visibility" Value="Visible" />
            </Trigger>
            <Trigger Property="IsPinned" Value="True">
                <Setter TargetName="ChromePinned" Property="Visibility" Value="Visible" />
                <Setter TargetName="ContentBorder" Property="Margin" Value="0 0 0 2" />
            </Trigger>
        </ControlTemplate.Triggers>

    </ControlTemplate>

    <ControlTemplate x:Key="PaneTemplate" TargetType="telerikDocking:RadPane">
        <Grid x:Name="wrapper">


            <telerikChromes:ButtonChrome x:Name="ChromeUnpinned" Visibility="Collapsed" Style="{StaticResource DocumentTabChromeStyle}" BorderThickness="1" CornerRadius="{StaticResource PaneTabUnpinnedCornerRadius}" RenderSelected="{TemplateBinding IsSelected}" RenderHighlighted="{TemplateBinding IsMouseOver}" />
            <telerikChromes:ButtonChrome x:Name="ChromePinned" Visibility="Collapsed" Style="{StaticResource DocumentTabChromeStyle}" Margin="0 1 0 0" BorderThickness="1 0 1 1" CornerRadius="{StaticResource PaneTabPinnedCornerRadius}" RenderSelected="{TemplateBinding IsSelected}" RenderHighlighted="{TemplateBinding IsMouseOver}" />
            <telerikNavigationPrimitives:TabItemContentPresenter x:Name="HeaderElement" FocusVisualStyle="{x:Null}"  Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" Padding="{TemplateBinding Padding}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
        </Grid>


        <ControlTemplate.Triggers>
            <Trigger Property="IsEnabled" Value="False">
                <Setter TargetName="HeaderElement" Property="Opacity" Value="0.33" />
            </Trigger>
            <Trigger Property="IsSelected" Value="True">
                <Setter TargetName="ChromePinned" Property="Margin" Value="0" />
            </Trigger>
            <Trigger Property="IsPinned" Value="False">
                <Setter TargetName="ChromeUnpinned" Property="Visibility" Value="Visible" />
            </Trigger>
            <Trigger Property="IsPinned" Value="True">
                <Setter TargetName="ChromePinned" Property="Visibility" Value="Visible" />
            </Trigger>

            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="TabOrientation" Value="Horizontal" />
                    <Condition Property="TabStripPlacement" Value="Top" />
                </MultiTrigger.Conditions>
                <Setter TargetName="wrapper" Property="Margin" Value="0 0 -1 4" />
                <Setter TargetName="HeaderElement" Property="Margin" Value="6 3" />
            </MultiTrigger>

            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="TabOrientation" Value="Horizontal" />
                    <Condition Property="TabStripPlacement" Value="Bottom" />
                </MultiTrigger.Conditions>
                <Setter TargetName="wrapper" Property="Margin" Value="0 4 -1 0" />
                <Setter TargetName="HeaderElement" Property="Margin" Value="6 3" />
            </MultiTrigger>

            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="TabOrientation" Value="Vertical" />
                    <Condition Property="TabStripPlacement" Value="Left" />
                </MultiTrigger.Conditions>
                <Setter TargetName="wrapper" Property="Margin" Value="0 0 4 -1" />
                <Setter TargetName="HeaderElement" Property="Margin" Value="3 6" />
                <Setter TargetName="ChromeUnpinned" Property="Orientation" Value="Vertical" />
                <Setter TargetName="ChromePinned" Property="Orientation" Value="Vertical" />
            </MultiTrigger>

            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="TabOrientation" Value="Vertical" />
                    <Condition Property="TabStripPlacement" Value="Right" />
                </MultiTrigger.Conditions>
                <Setter TargetName="wrapper" Property="Margin" Value="4 0 0 -1" />
                <Setter TargetName="HeaderElement" Property="Margin" Value="3 6" />
                <Setter TargetName="ChromeUnpinned" Property="Orientation" Value="Vertical" />
                <Setter TargetName="ChromePinned" Property="Orientation" Value="Vertical" />
            </MultiTrigger>
        </ControlTemplate.Triggers>

    </ControlTemplate>

    <ControlTemplate x:Key="PaneDocumentHostTemplate" TargetType="telerikDocking:RadPane">
        <Grid x:Name="wrapper" Margin="0 0 -1 0">

            <telerikChromes:ButtonChrome x:Name="Chrome" Margin="0 0 0 0" BorderThickness="1 1 1 0" CornerRadius="{StaticResource PaneDocumentHostCornerRadius}" Style="{StaticResource DocumentTabChromeStyle}" RenderSelected="{TemplateBinding IsSelected}" RenderHighlighted="{TemplateBinding IsMouseOver}" RenderEnabled="{TemplateBinding IsEnabled}" />
            <telerikNavigationPrimitives:TabItemContentPresenter x:Name="HeaderElement" FocusVisualStyle="{x:Null}"  Margin="6 3 6 2" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" Padding="{TemplateBinding Padding}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
        </Grid>

        <ControlTemplate.Triggers>
            <Trigger Property="IsEnabled" Value="False">
                <Setter TargetName="HeaderElement" Property="Opacity" Value="0.33" />
            </Trigger>
            <Trigger Property="IsSelected" Value="True">
                <Setter TargetName="Chrome" Property="Margin" Value="0 -2 0 -1" />
            </Trigger>
        </ControlTemplate.Triggers>

    </ControlTemplate>

    <!--x:Key="{telerik:ThemeResourceKey ThemeType=telerik:Office_BlackTheme , ElementType={x:Type telerikDocking:RadPane}}"-->
    <Style TargetType="telerikDocking:RadPane">

        <Setter Property="FocusVisualStyle" Value="{x:Null}" />

        <Setter Property="Template" Value="{StaticResource PaneTemplate}" />

        <Setter Property="LeftTemplate" Value="{StaticResource PaneTemplate}" />
        <Setter Property="TopTemplate" Value="{StaticResource PaneTemplate}" />
        <Setter Property="RightTemplate" Value="{StaticResource PaneTemplate}" />
        <Setter Property="BottomTemplate" Value="{StaticResource PaneBottomTemplate}" />

        <Setter Property="DocumentHostTemplate" Value="{StaticResource PaneDocumentHostTemplate}" />

        <Setter Property="BorderThickness" Value="1 1 1 1" />
        <Setter Property="BorderBrush" Value="{StaticResource PaneTabOuterBorder_Normal}" />
        <Setter Property="Background" Value="{StaticResource PaneTabBackground_Normal}" />
        <Setter Property="Foreground" Value="{StaticResource PaneTabForeground}" />

        <Setter Property="Padding" Value="0" />
        <Setter Property="Margin" Value="0" />

        <Setter Property="ContextMenuTemplate">
            <Setter.Value>
                <DataTemplate>
                    <telerikNavigation:RadContextMenu
                        telerik:StyleManager.Theme="{StaticResource Theme}"
                        InheritDataContext="False">
                        <telerikNavigation:RadMenuItem
                            IsChecked="{Binding IsFloatingOnly}"
                            Command="telerikDocking:RadDockingCommands.Floating"
                            CommandParameter="{Binding}"
                            CommandTarget="{Binding}"
                            Header="{Binding Command.Text, RelativeSource={RelativeSource Self}}" />

                        <telerikNavigation:RadMenuItem
                            IsChecked="{Binding IsDockableOptionChecked}"
                            Command="telerikDocking:RadDockingCommands.Dockable"
                            CommandParameter="{Binding}"
                            CommandTarget="{Binding}"
                            Header="{Binding Command.Text, RelativeSource={RelativeSource Self}}" />

                        <telerikNavigation:RadMenuItem
                            IsChecked="{Binding IsInDocumentHost}"
                            Command="telerikDocking:RadDockingCommands.TabbedDocument"
                            CommandParameter="{Binding}"
                            CommandTarget="{Binding}"
                            Header="{Binding Command.Text, RelativeSource={RelativeSource Self}}" />

                        <telerikNavigation:RadMenuItem
                            IsChecked="{Binding IsPinned, Converter={StaticResource invertedBooleanConverter}}"
                            Command="telerikDocking:RadDockingCommands.Pin"
                            CommandParameter="{Binding}"
                            CommandTarget="{Binding}"
                            Header="{Binding Command.Text, RelativeSource={RelativeSource Self}}" />

                        <telerikNavigation:RadMenuItem
                            IsChecked="{Binding IsHidden}"
                            Command="telerikDocking:RadDockingCommands.Close"
                            CommandParameter="{Binding}"
                            CommandTarget="{Binding}"
                            Header="{Binding Command.Text, RelativeSource={RelativeSource Self}}" />

                    </telerikNavigation:RadContextMenu>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>


    <!-- PaneGroup -->


    <ControlTemplate x:Key="PaneGroup_PaneFrameTemplate" TargetType="ContentControl">
        <Border
            x:Name="Root"
            BorderBrush="{TemplateBinding BorderBrush}"
            Background="{TemplateBinding Background}"
            BorderThickness="{TemplateBinding BorderThickness}"
            CornerRadius="{StaticResource PaneGroup_PaneFrame_CornerRadius}">

            <ContentPresenter />

        </Border>
    </ControlTemplate>

    <ControlTemplate x:Key="PaneGroup_DocumentFrameTemplate" TargetType="ContentControl">
        <Border
            x:Name="Root"
            BorderBrush="{TemplateBinding BorderBrush}"
            Background="{TemplateBinding Background}"
            BorderThickness="{TemplateBinding BorderThickness}"
            CornerRadius="{StaticResource PaneGroup_DocumentFrameL4_CornerRadius}">

            <Border
                x:Name="BorderLayer3"
                BorderThickness="{StaticResource PaneGroup_DocumentFrameL3_Thickness}"
                BorderBrush="{StaticResource PaneGroup_DocumentFrameL3_Brush}"
                CornerRadius="{StaticResource PaneGroup_DocumentFrameL3_CornerRadius}">

                <Border
                    x:Name="BorderLayer2"
                    BorderThickness="{StaticResource PaneGroup_DocumentFrameL2_Thickness}"
                    BorderBrush="{StaticResource PaneGroup_DocumentFrameL2_Brush}"
                    CornerRadius="{StaticResource PaneGroup_DocumentFrameL2_CornerRadius}">

                    <Border
                        x:Name="BorderLayer1"
                        BorderThickness="{StaticResource PaneGroup_DocumentFrameL1_Thickness}"
                        BorderBrush="{StaticResource PaneGroup_DocumentFrameL1_Brush}"
                        CornerRadius="{StaticResource PaneGroup_DocumentFrameL1_CornerRadius}">

                        <ContentPresenter />

                    </Border>
                </Border>
            </Border>
        </Border>
    </ControlTemplate>




    <Style x:Key="PaneGroup_DocumentFrameStyle" TargetType="ContentControl">
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="Template" Value="{StaticResource PaneGroup_DocumentFrameTemplate}" />
    </Style>

    <Style x:Key="PaneGroup_PaneFrameStyle" TargetType="ContentControl">
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="Template" Value="{StaticResource PaneGroup_PaneFrameTemplate}" />
    </Style>





    <Style x:Key="PaneHeader_MenuButtonStyle" TargetType="telerik:RadToggleButton">
        <Setter Property="Width" Value="17" />
        <Setter Property="Height" Value="17" />
        <Setter Property="Margin" Value="{StaticResource HeaderButtonMargin}" />
        <Setter Property="IsTabStop" Value="False" />

        <Setter Property="SnapsToDevicePixels" Value="True" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:RadToggleButton">
                    <Grid>

                        <telerikChromes:ButtonChrome x:Name="ButtonChrome" telerik:StyleManager.Theme="{StaticResource Theme}" RenderNormal="False" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderChecked="{TemplateBinding IsChecked}" />
                        <Path x:Name="BackgroundIcon" Fill="{StaticResource ButtonIconBackground_Normal}" Margin="0 2 0 0" Width="7" Height="4" Data="M0,0 L7,0 7,1 6,1 6,2 5,2 5,3 4,3 4,4 3,4 3,3 2,3 2,2 1,2 1,1 0,1 z" />
                        <Path x:Name="ForegroundIcon" Fill="{StaticResource ButtonIconForeground_Normal}" Margin="0 1 0 1" Width="7" Height="4" Data="M0,0 L7,0 7,1 6,1 6,2 5,2 5,3 4,3 4,4 3,4 3,3 2,3 2,2 1,2 1,1 0,1 z" />
                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="ForegroundIcon" Property="Fill" Value="{StaticResource ButtonIconForeground_MouseOver}" />
                            <Setter TargetName="BackgroundIcon" Property="Fill" Value="{StaticResource ButtonIconBackground_MouseOver}" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="ForegroundIcon" Property="Fill" Value="{StaticResource ButtonIconForeground_Pressed}" />
                            <Setter TargetName="BackgroundIcon" Property="Fill" Value="{StaticResource ButtonIconBackground_Pressed}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="ForegroundIcon" Property="Fill" Value="{StaticResource ButtonIconForeground_Disabled}" />
                            <Setter TargetName="BackgroundIcon" Property="Fill" Value="{StaticResource ButtonIconBackground_Disabled}" />
                        </Trigger>
                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="PaneHeader_PinButtonStyle" TargetType="telerik:RadButton">
        <Setter Property="Width" Value="17" />
        <Setter Property="Height" Value="17" />
        <Setter Property="Margin" Value="{StaticResource HeaderButtonMargin}" />
        <Setter Property="IsTabStop" Value="False" />

        <Setter Property="SnapsToDevicePixels" Value="True" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:RadButton">
                    <Grid>

                        <telerikChromes:ButtonChrome telerik:StyleManager.Theme="{StaticResource Theme}" RenderNormal="False" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" />
                        <Path x:Name="BackgroundIcon" Stroke="{StaticResource ButtonIconBackground_Normal}" Margin="0 2 0 0" StrokeThickness="1" Width="7" Height="10" Data="M0,6.5 L7,6.5 M1.5,6.5 L1.5,1.5 L2.5,0.5 L4.5,0.5 L5.5,1.5 L5.5,6.5 M3.5,6.5 L3.5,10 M4.5,6.5 L4.5,0.5" />
                        <Path x:Name="ForegroundIcon" Stroke="{StaticResource ButtonIconForeground_Normal}" Margin="0 1 0 1" StrokeThickness="1" Width="7" Height="10" Data="M0,6.5 L7,6.5 M1.5,6.5 L1.5,1.5 L2.5,0.5 L4.5,0.5 L5.5,1.5 L5.5,6.5 M3.5,6.5 L3.5,10 M4.5,6.5 L4.5,0.5" />
                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="ForegroundIcon" Property="Stroke" Value="{StaticResource ButtonIconForeground_MouseOver}" />
                            <Setter TargetName="BackgroundIcon" Property="Stroke" Value="{StaticResource ButtonIconBackground_MouseOver}" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="ForegroundIcon" Property="Stroke" Value="{StaticResource ButtonIconForeground_Pressed}" />
                            <Setter TargetName="BackgroundIcon" Property="Stroke" Value="{StaticResource ButtonIconBackground_Pressed}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="ForegroundIcon" Property="Stroke" Value="{StaticResource ButtonIconForeground_Disabled}" />
                            <Setter TargetName="BackgroundIcon" Property="Stroke" Value="{StaticResource ButtonIconBackground_Disabled}" />
                        </Trigger>
                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="PaneHeader_UnPinButtonStyle" TargetType="telerik:RadButton">
        <Setter Property="Width" Value="17" />
        <Setter Property="Height" Value="17" />
        <Setter Property="Margin" Value="{StaticResource HeaderButtonMargin}" />
        <Setter Property="IsTabStop" Value="False" />

        <Setter Property="SnapsToDevicePixels" Value="True" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:RadButton">
                    <Grid>

                        <telerikChromes:ButtonChrome telerik:StyleManager.Theme="{StaticResource Theme}" RenderNormal="False" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" />
                        <Path x:Name="BackgroundIcon" Stroke="{StaticResource ButtonIconBackground_Normal}" Margin="0 2 0 0" StrokeThickness="1" Width="10" Height="7" Data="M3.5,0 L3.5,7 M3.5,1.5 L8.5,1.5 L9.5,2.5 L9.5,4.5 L8.5,5.5 L3.5,5.5 M3.5,3.5 L0,3.5 M3.5,4.5 L9.5,4.5" />
                        <Path x:Name="ForegroundIcon" Stroke="{StaticResource ButtonIconForeground_Normal}" Margin="0 1 0 1" StrokeThickness="1" Width="10" Height="7" Data="M3.5,0 L3.5,7 M3.5,1.5 L8.5,1.5 L9.5,2.5 L9.5,4.5 L8.5,5.5 L3.5,5.5 M3.5,3.5 L0,3.5 M3.5,4.5 L9.5,4.5" />
                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="ForegroundIcon" Property="Stroke" Value="{StaticResource ButtonIconForeground_MouseOver}" />
                            <Setter TargetName="BackgroundIcon" Property="Stroke" Value="{StaticResource ButtonIconBackground_MouseOver}" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="ForegroundIcon" Property="Stroke" Value="{StaticResource ButtonIconForeground_Pressed}" />
                            <Setter TargetName="BackgroundIcon" Property="Stroke" Value="{StaticResource ButtonIconBackground_Pressed}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="ForegroundIcon" Property="Stroke" Value="{StaticResource ButtonIconForeground_Disabled}" />
                            <Setter TargetName="BackgroundIcon" Property="Stroke" Value="{StaticResource ButtonIconBackground_Disabled}" />
                        </Trigger>
                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="PaneHeader_CloseButtonStyle" TargetType="telerik:RadButton">
        <Setter Property="Width" Value="17" />
        <Setter Property="Height" Value="17" />
        <Setter Property="Margin" Value="{StaticResource HeaderButtonMargin}" />
        <Setter Property="IsTabStop" Value="False" />

        <Setter Property="SnapsToDevicePixels" Value="True" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:RadButton">
                    <Grid x:Name="LayoutRoot">

                        <telerikChromes:ButtonChrome telerik:StyleManager.Theme="{StaticResource Theme}" RenderNormal="False" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" />
                        <Path x:Name="BackgroundIcon" Fill="{StaticResource ButtonIconBackground_Normal}" Margin="0 2 0 0" Width="8" Height="7" Data="M0,0 L2,0 2,1 3,1 3,2 5,2 5,1 6,1 6,0 8,0 8,1 7,1 7,2 6,2 6,3 5,3 5,4 6,4 6,5 6,5 7,5 7,6 8,6 8,7 6,7 6,6 5,6 5,5 3,5 3,6 2,6 2,7 0,7 0,6 1,6 1,5 2,5 2,4 3,4 3,3 2,3 2,2 1,2 1,1 0,1 Z" />
                        <Path x:Name="ForegroundIcon" Fill="{StaticResource ButtonIconForeground_Normal}" Margin="0 1 0 1" Width="8" Height="7" Data="M0,0 L2,0 2,1 3,1 3,2 5,2 5,1 6,1 6,0 8,0 8,1 7,1 7,2 6,2 6,3 5,3 5,4 6,4 6,5 6,5 7,5 7,6 8,6 8,7 6,7 6,6 5,6 5,5 3,5 3,6 2,6 2,7 0,7 0,6 1,6 1,5 2,5 2,4 3,4 3,3 2,3 2,2 1,2 1,1 0,1 Z" />
                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="ForegroundIcon" Property="Fill" Value="{StaticResource ButtonIconForeground_MouseOver}" />
                            <Setter TargetName="BackgroundIcon" Property="Fill" Value="{StaticResource ButtonIconBackground_MouseOver}" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="ForegroundIcon" Property="Fill" Value="{StaticResource ButtonIconForeground_Pressed}" />
                            <Setter TargetName="BackgroundIcon" Property="Fill" Value="{StaticResource ButtonIconBackground_Pressed}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="ForegroundIcon" Property="Fill" Value="{StaticResource ButtonIconForeground_Disabled}" />
                            <Setter TargetName="BackgroundIcon" Property="Fill" Value="{StaticResource ButtonIconBackground_Disabled}" />
                        </Trigger>
                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>




    <ControlTemplate x:Key="PaneHeaderTemplate" TargetType="dock:PaneHeader">
        <Border x:Name="Root" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="{StaticResource PaneHeader_CornerRadius}">

            <Grid x:Name="Content">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <!-- Header -->
                <ContentControl x:Name="TitleElement" Grid.Column="0"
                        Margin="{TemplateBinding Padding}"
                        FocusVisualStyle="{x:Null}"
                        Content="{Binding SelectedPane.Title, RelativeSource={RelativeSource TemplatedParent}}"
                        ContentTemplate="{Binding SelectedPane.TitleTemplate, RelativeSource={RelativeSource TemplatedParent}}"
                        VerticalAlignment="Center"
                        HorizontalContentAlignment="Stretch" VerticalContentAlignment="Center" />

                <!-- Menu -->
                <telerik:RadToggleButton x:Name="HeaderDropDownMenu" Grid.Column="1"
                        IsThreeState="True" Style="{StaticResource PaneHeader_MenuButtonStyle}"
                        Command="telerikDocking:RadDockingCommands.ContextMenuOpen"
                        CommandParameter="{Binding SelectedPane, RelativeSource={RelativeSource TemplatedParent}}" />

                <Grid Grid.Column="2" Visibility="{Binding SelectedPane.PinButtonVisibility, RelativeSource={RelativeSource TemplatedParent}}">
                    <!-- Pin -->
                    <telerik:RadButton x:Name="HeaderPinButton"
                        Command="telerikDocking:RadDockingCommands.Pin"
                        CommandParameter="{Binding SelectedPane, RelativeSource={RelativeSource TemplatedParent}}"
                        Style="{StaticResource PaneHeader_PinButtonStyle}" />

                    <!-- UnPin -->
                    <telerik:RadButton x:Name="HeaderUnPinButton" Visibility="Collapsed"
                            Command="telerikDocking:RadDockingCommands.Pin"
                            CommandParameter="{Binding SelectedPane, RelativeSource={RelativeSource TemplatedParent}}"
                            Style="{StaticResource PaneHeader_UnPinButtonStyle}" />
                </Grid>

                <!-- Close -->
                <telerik:RadButton x:Name="HeaderCloseButton" Grid.Column="3"
                        Command="telerikDocking:RadDockingCommands.Close"
                        CommandParameter="{Binding SelectedPane, RelativeSource={RelativeSource TemplatedParent}}"
                        Style="{StaticResource PaneHeader_CloseButtonStyle}" />
            </Grid>


        </Border>


        <ControlTemplate.Triggers>
            <DataTrigger Binding="{Binding SelectedPane.IsPinned, RelativeSource={RelativeSource TemplatedParent}}" Value="False">
                <Setter TargetName="HeaderPinButton" Property="Style" Value="{StaticResource PaneHeader_UnPinButtonStyle}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=SelectedPane.(telerikNavigation:RadContextMenu.ContextMenu).HasItems, RelativeSource={RelativeSource TemplatedParent}}" Value="False">
                <Setter TargetName="HeaderDropDownMenu" Property="Visibility" Value="Collapsed" />
            </DataTrigger>
        </ControlTemplate.Triggers>

    </ControlTemplate>

    <!--PaneHeader Style-->
    <!--x:Key="{telerik:ThemeResourceKey ThemeType=telerik:Office_BlackTheme , ElementType={x:Type dock:PaneHeader}}"-->
    <Style TargetType="dock:PaneHeader" >

        <Setter Property="FocusVisualStyle" Value="{x:Null}" />

        <Setter Property="Template" Value="{StaticResource PaneHeaderTemplate}" />
        <Setter Property="BorderThickness" Value="{StaticResource PaneHeader_BorderThickness}" />
        <Setter Property="BorderBrush" Value="{StaticResource PaneHeader_BorderBrush}" />
        <Setter Property="Background" Value="{StaticResource PaneHeader_Background}" />
        <Setter Property="Padding" Value="3 0" />

        <Setter Property="dock:InputBindingsManager.InputBindings">
            <Setter.Value>
                <InputBindingCollection>
                    <MouseBinding Command="telerikDocking:RadDockingCommands.PaneHeaderMenuOpen">
                        <MouseBinding.Gesture>
                            <MouseGesture MouseAction="RightClick" />
                        </MouseBinding.Gesture>
                    </MouseBinding>
                </InputBindingCollection>
            </Setter.Value>
        </Setter>


    </Style>




    <Style x:Key="PaneGroup_CloseButtonStyle" TargetType="telerik:RadButton">
        <Setter Property="Width" Value="17" />
        <Setter Property="Height" Value="17" />
        <Setter Property="Margin" Value="1" />
        <Setter Property="IsTabStop" Value="False" />

        <Setter Property="SnapsToDevicePixels" Value="True" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:RadButton">
                    <Grid x:Name="LayoutRoot">

                        <telerikChromes:ButtonChrome telerik:StyleManager.Theme="{StaticResource Theme}" RenderNormal="False" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" />
                        <Path x:Name="BackgroundIcon" Fill="{StaticResource ButtonIconBackground_Normal}" Margin="0 2 0 0" Width="8" Height="7" Data="M0,0 L2,0 2,1 3,1 3,2 5,2 5,1 6,1 6,0 8,0 8,1 7,1 7,2 6,2 6,3 5,3 5,4 6,4 6,5 6,5 7,5 7,6 8,6 8,7 6,7 6,6 5,6 5,5 3,5 3,6 2,6 2,7 0,7 0,6 1,6 1,5 2,5 2,4 3,4 3,3 2,3 2,2 1,2 1,1 0,1 Z" />
                        <Path x:Name="ForegroundIcon" Fill="{StaticResource ButtonIconForeground_Normal}" Margin="0 1 0 1" Width="8" Height="7" Data="M0,0 L2,0 2,1 3,1 3,2 5,2 5,1 6,1 6,0 8,0 8,1 7,1 7,2 6,2 6,3 5,3 5,4 6,4 6,5 6,5 7,5 7,6 8,6 8,7 6,7 6,6 5,6 5,5 3,5 3,6 2,6 2,7 0,7 0,6 1,6 1,5 2,5 2,4 3,4 3,3 2,3 2,2 1,2 1,1 0,1 Z" />
                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="ForegroundIcon" Property="Fill" Value="{StaticResource ButtonIconForeground_MouseOver}" />
                            <Setter TargetName="BackgroundIcon" Property="Fill" Value="{StaticResource ButtonIconBackground_MouseOver}" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="ForegroundIcon" Property="Fill" Value="{StaticResource ButtonIconForeground_Pressed}" />
                            <Setter TargetName="BackgroundIcon" Property="Fill" Value="{StaticResource ButtonIconBackground_Pressed}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="ForegroundIcon" Property="Fill" Value="{StaticResource ButtonIconForeground_Disabled}" />
                            <Setter TargetName="BackgroundIcon" Property="Fill" Value="{StaticResource ButtonIconBackground_Disabled}" />
                        </Trigger>
                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="PaneGroup_LeftScrollButtonStyle" TargetType="RepeatButton">
        <Setter Property="Width" Value="17" />
        <Setter Property="Height" Value="17" />
        <Setter Property="Margin" Value="1" />
        <Setter Property="IsTabStop" Value="False" />

        <Setter Property="SnapsToDevicePixels" Value="True" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Grid x:Name="LayoutRoot">

                        <telerikChromes:ButtonChrome telerik:StyleManager.Theme="{StaticResource Theme}" RenderNormal="False" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" />
                        <Path x:Name="BackgroundIcon" Fill="{StaticResource ButtonIconBackground_Normal}" Margin="0 2 0 0" Width="7" Height="7" Data="M6,0 L6,7 5,7 5,6 4,6 4,5 3,5 3,4 2,4 2,3 3,3 3,2 4,2 4,1 5,1 5,0 Z" />
                        <Path x:Name="ForegroundIcon" Fill="{StaticResource ButtonIconForeground_Normal}" Margin="0 1 0 1" Width="7" Height="7" Data="M6,0 L6,7 5,7 5,6 4,6 4,5 3,5 3,4 2,4 2,3 3,3 3,2 4,2 4,1 5,1 5,0 Z" />
                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="ForegroundIcon" Property="Fill" Value="{StaticResource ButtonIconForeground_MouseOver}" />
                            <Setter TargetName="BackgroundIcon" Property="Fill" Value="{StaticResource ButtonIconBackground_MouseOver}" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="ForegroundIcon" Property="Fill" Value="{StaticResource ButtonIconForeground_Pressed}" />
                            <Setter TargetName="BackgroundIcon" Property="Fill" Value="{StaticResource ButtonIconBackground_Pressed}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="ForegroundIcon" Property="Fill" Value="{StaticResource ButtonIconForeground_Disabled}" />
                            <Setter TargetName="BackgroundIcon" Property="Fill" Value="{StaticResource ButtonIconBackground_Disabled}" />
                        </Trigger>
                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="PaneGroup_RightScrollButtonStyle" TargetType="RepeatButton">
        <Setter Property="Width" Value="17" />
        <Setter Property="Height" Value="17" />
        <Setter Property="Margin" Value="1" />
        <Setter Property="IsTabStop" Value="False" />

        <Setter Property="SnapsToDevicePixels" Value="True" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Grid x:Name="LayoutRoot">

                        <telerikChromes:ButtonChrome telerik:StyleManager.Theme="{StaticResource Theme}" RenderNormal="False" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" />
                        <Path x:Name="BackgroundIcon" Fill="{StaticResource ButtonIconBackground_Normal}" Margin="0 2 0 0" Width="7" Height="7" Data="M1,0 L1,7 2,7 2,6 3,6 3,5 4,5 4,4 5,4 5,3 4,3 4,2 3,2 3,1 2,1 2,0 Z" />
                        <Path x:Name="ForegroundIcon" Fill="{StaticResource ButtonIconForeground_Normal}" Margin="0 1 0 1" Width="7" Height="7" Data="M1,0 L1,7 2,7 2,6 3,6 3,5 4,5 4,4 5,4 5,3 4,3 4,2 3,2 3,1 2,1 2,0 Z" />
                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="ForegroundIcon" Property="Fill" Value="{StaticResource ButtonIconForeground_MouseOver}" />
                            <Setter TargetName="BackgroundIcon" Property="Fill" Value="{StaticResource ButtonIconBackground_MouseOver}" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="ForegroundIcon" Property="Fill" Value="{StaticResource ButtonIconForeground_Pressed}" />
                            <Setter TargetName="BackgroundIcon" Property="Fill" Value="{StaticResource ButtonIconBackground_Pressed}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="ForegroundIcon" Property="Fill" Value="{StaticResource ButtonIconForeground_Disabled}" />
                            <Setter TargetName="BackgroundIcon" Property="Fill" Value="{StaticResource ButtonIconBackground_Disabled}" />
                        </Trigger>
                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="PaneGroup_PaneMenuButtonStyle" TargetType="ToggleButton">
        <Setter Property="Width" Value="17" />
        <Setter Property="Height" Value="17" />
        <Setter Property="Margin" Value="1" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid>

                        <telerikChromes:ButtonChrome telerik:StyleManager.Theme="{StaticResource Theme}" RenderNormal="False" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderChecked="{TemplateBinding IsChecked}" />
                        <Path x:Name="BackgroundIcon" Fill="{StaticResource ButtonIconBackground_Normal}" Margin="0 2 0 0" Width="7" Height="7" Data="M0,2 L7,2 7,3 6,3 6,4 5,4 5,5 4,5 4,6 3,6 3,5 2,5 2,4 1,4 1,3 0,3 Z M0,0 L7,0 7,1 0,1 Z" />
                        <Path x:Name="ForegroundIcon" Fill="{StaticResource ButtonIconForeground_Normal}" Margin="0 1 0 1" Width="7" Height="7" Data="M0,2 L7,2 7,3 6,3 6,4 5,4 5,5 4,5 4,6 3,6 3,5 2,5 2,4 1,4 1,3 0,3 Z M0,0 L7,0 7,1 0,1 Z" />
                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="ForegroundIcon" Property="Fill" Value="{StaticResource ButtonIconForeground_MouseOver}" />
                            <Setter TargetName="BackgroundIcon" Property="Fill" Value="{StaticResource ButtonIconBackground_MouseOver}" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="ForegroundIcon" Property="Fill" Value="{StaticResource ButtonIconForeground_Pressed}" />
                            <Setter TargetName="BackgroundIcon" Property="Fill" Value="{StaticResource ButtonIconBackground_Pressed}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="ForegroundIcon" Property="Fill" Value="{StaticResource ButtonIconForeground_Disabled}" />
                            <Setter TargetName="BackgroundIcon" Property="Fill" Value="{StaticResource ButtonIconBackground_Disabled}" />
                        </Trigger>
                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--PaneGroup BottomTemplate-->
    <ControlTemplate x:Key="PaneGroupBottomTemplate" TargetType="telerikDocking:RadPaneGroup">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" MinHeight="20" />
                <RowDefinition Height="auto" />
            </Grid.RowDefinitions>

            <!--Content-->
            <ContentControl x:Name="ContentBackground" BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Background="{TemplateBinding Background}"
                    Style="{StaticResource PaneGroup_PaneFrameStyle}">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <!--Header-->
                    <Border Grid.Row="0" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedItem.PaneHeaderVisibility}" >
                        <dock:PaneHeader x:Name="HeaderElement"
                                telerik:StyleManager.Theme="{StaticResource Theme}" Grid.Row="0"
                                MinHeight="16" SelectedPane="{TemplateBinding SelectedPane}" />
                    </Border>

                    <ContentPresenter x:Name="ContentElement" Grid.Row="1"
                            ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
                </Grid>
            </ContentControl>

            <!--Items-->
            <Border x:Name="ItemsContainer" Grid.Row="1" Margin="0 -5 0 0" Padding="0 0 1 0">
                <ItemsPresenter x:Name="ItemsPresenterElement" />
            </Border>

            <dock:RadGridResizer x:Name="DockResizer" Grid.RowSpan="2" Placement="Left"
                    ShowsPreview="True" Visibility="Collapsed" VerticalAlignment="Stretch"
                    HorizontalAlignment="Left" />


        </Grid>


        <ControlTemplate.Triggers>
            <Trigger Property="IsPaneHeaderVisible" Value="False">
                <Setter TargetName="HeaderElement" Property="Visibility" Value="Collapsed" />
            </Trigger>
            <Trigger Property="SplitterPosition">
                <Trigger.Value>
                    <Dock>Left</Dock>
                </Trigger.Value>
                <Setter TargetName="DockResizer" Property="Visibility" Value="Visible" />
                <Setter TargetName="DockResizer" Property="Cursor" Value="SizeWE" />
                <Setter TargetName="DockResizer" Property="Width" Value="4" />

                <Setter TargetName="ContentBackground" Property="Margin" Value="4 0 0 0" />
                <Setter TargetName="ItemsContainer" Property="Margin" Value="4 -5 0 0" />
            </Trigger>
            <Trigger Property="SplitterPosition">
                <Trigger.Value>
                    <Dock>Top</Dock>
                </Trigger.Value>
                <Setter TargetName="DockResizer" Property="Visibility" Value="Visible" />
                <Setter TargetName="DockResizer" Property="VerticalAlignment" Value="Top" />
                <Setter TargetName="DockResizer" Property="HorizontalAlignment" Value="Stretch" />
                <Setter TargetName="DockResizer" Property="Cursor" Value="SizeNS" />
                <Setter TargetName="DockResizer" Property="Height" Value="4" />
                <Setter TargetName="DockResizer" Property="system:Grid.RowSpan" Value="1" />
                <Setter TargetName="DockResizer" Property="system:Grid.Row" Value="0" />
                <Setter TargetName="DockResizer" Property="Margin" Value="2 -5 0 0" />
                <Setter TargetName="DockResizer" Property="Placement">
                    <Setter.Value>
                        <Dock>Top</Dock>
                    </Setter.Value>
                </Setter>

                <Setter TargetName="ContentBackground" Property="Margin" Value="0 4 0 0" />
            </Trigger>
            <Trigger Property="SplitterPosition">
                <Trigger.Value>
                    <Dock>Right</Dock>
                </Trigger.Value>
                <Setter TargetName="DockResizer" Property="Visibility" Value="Visible" />
                <Setter TargetName="DockResizer" Property="VerticalAlignment" Value="Top" />
                <Setter TargetName="DockResizer" Property="HorizontalAlignment" Value="Stretch" />
                <Setter TargetName="DockResizer" Property="Cursor" Value="SizeNS" />
                <Setter TargetName="DockResizer" Property="Height" Value="4" />
                <Setter TargetName="DockResizer" Property="system:Grid.RowSpan" Value="1" />
                <Setter TargetName="DockResizer" Property="system:Grid.Row" Value="0" />
                <Setter TargetName="DockResizer" Property="Margin" Value="2 -5 0 0" />
                <Setter TargetName="DockResizer" Property="Placement">
                    <Setter.Value>
                        <Dock>Top</Dock>
                    </Setter.Value>
                </Setter>
            </Trigger>
            <Trigger Property="SplitterPosition">
                <Trigger.Value>
                    <Dock>Bottom</Dock>
                </Trigger.Value>
                <Setter TargetName="DockResizer" Property="Visibility" Value="Visible" />
                <Setter TargetName="DockResizer" Property="VerticalAlignment" Value="Top" />
                <Setter TargetName="DockResizer" Property="HorizontalAlignment" Value="Stretch" />
                <Setter TargetName="DockResizer" Property="Cursor" Value="SizeNS" />
                <Setter TargetName="DockResizer" Property="Height" Value="4" />
                <Setter TargetName="DockResizer" Property="system:Grid.RowSpan" Value="1" />
                <Setter TargetName="DockResizer" Property="system:Grid.Row" Value="0" />
                <Setter TargetName="DockResizer" Property="Margin" Value="2 -5 0 0" />
                <Setter TargetName="DockResizer" Property="Placement">
                    <Setter.Value>
                        <Dock>Top</Dock>
                    </Setter.Value>
                </Setter>
            </Trigger>
            <Trigger Property="IsSingleItem" Value="True">
                <Setter TargetName="ItemsContainer" Property="Visibility" Value="Collapsed" />
            </Trigger>
            <Trigger Property="IsFocused" Value="True">
                <Setter TargetName="HeaderElement" Property="Background" Value="{StaticResource PaneHeader_Background_Focused}" />
            </Trigger>
            <Trigger Property="IsEnabled" Value="False" />
        </ControlTemplate.Triggers>

    </ControlTemplate>

    <ControlTemplate x:Key="PaneGroupDocumentTemplate" TargetType="telerikDocking:RadPaneGroup">
        <Grid>


            <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <!--Content-->
            <ContentControl x:Name="ContentBackground" Grid.Row="1"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Background="{TemplateBinding Background}"
                    Style="{StaticResource PaneGroup_DocumentFrameStyle}">

                <ContentPresenter x:Name="ContentElement" ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
            </ContentControl>

            <!--TabStrip-->
            <Grid Grid.Row="0" x:Name="Header">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <RepeatButton x:Name="LeftScrollButtonElement" Style="{StaticResource PaneGroup_LeftScrollButtonStyle}" Grid.Column="0" Visibility="{Binding ComputedHorizontalScrollBarVisibility, ElementName=ScrollViewerElement}" />

                <ScrollViewer x:Name="ScrollViewerElement" Grid.Column="1" Margin="0 -2" HorizontalScrollBarVisibility="{Binding (ScrollViewer.HorizontalScrollBarVisibility), RelativeSource={RelativeSource TemplatedParent}}">
                    <ScrollViewer.Template>
                        <ControlTemplate TargetType="ScrollViewer">
                            <ScrollContentPresenter x:Name="ScrollContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="0 0 1 0" />
                        </ControlTemplate>
                    </ScrollViewer.Template>
                    <ItemsPresenter x:Name="ItemsPresenterElement" Margin="0 2" />
                </ScrollViewer>

                <RepeatButton x:Name="RightScrollButtonElement" Style="{StaticResource PaneGroup_RightScrollButtonStyle}" Grid.Column="2" Visibility="{Binding ComputedHorizontalScrollBarVisibility, ElementName=ScrollViewerElement}" />

                <ToggleButton x:Name="DropDownButtonElement" Style="{StaticResource PaneGroup_PaneMenuButtonStyle}" Visibility="Collapsed" Grid.Column="3" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
                    <telerikNavigation:RadContextMenu.ContextMenu>
                        <telerikTabControl:DropDownMenu x:Name="DropDownMenuElement"
                                IsOpen="{Binding IsChecked, ElementName=DropDownButtonElement, Mode=Twoway}"
                                StaysOpen="False"
                                Placement="Bottom"
                                ItemTemplate="{TemplateBinding ItemDropDownContentTemplate}"
                                ItemTemplateSelector="{TemplateBinding ItemDropDownContentTemplateSelector}"
                                DisplayMemberPath="{TemplateBinding DropDownDisplayMemberPath}"
                                Style="{TemplateBinding DropDownStyle}">

                        </telerikTabControl:DropDownMenu>
                    </telerikNavigation:RadContextMenu.ContextMenu>
                </ToggleButton>

                <telerik:RadButton x:Name="CloseButton" Grid.Column="4" Style="{StaticResource PaneGroup_CloseButtonStyle}" Command="telerikDocking:RadDockingCommands.Close">

                </telerik:RadButton>
            </Grid>

            <dock:RadGridResizer x:Name="DockResizer" Placement="Left" ShowsPreview="True"
                    Visibility="Collapsed" VerticalAlignment="Stretch" HorizontalAlignment="Left"
                    Grid.RowSpan="2" />

        </Grid>


        <ControlTemplate.Triggers>
            <Trigger Property="DropDownDisplayMode" Value="Visible">
                <Setter TargetName="DropDownButtonElement" Property="Visibility" Value="Visible" />
            </Trigger>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="DropDownDisplayMode" Value="WhenNeeded" />
                    <Condition Property="ComputedHorizontalScrollBarVisibility" SourceName="ScrollViewerElement" Value="Visible" />
                </MultiTrigger.Conditions>
                <Setter TargetName="DropDownButtonElement" Property="Visibility" Value="Visible" />
            </MultiTrigger>
            <Trigger Property="SplitterPosition">
                <Trigger.Value>
                    <Dock>Left</Dock>
                </Trigger.Value>
                <Setter TargetName="DockResizer" Property="Visibility" Value="Visible" />
                <Setter TargetName="DockResizer" Property="Cursor" Value="SizeWE" />
                <Setter TargetName="DockResizer" Property="Width" Value="4" />
                <Setter TargetName="ItemsPresenterElement" Property="Margin" Value="0" />

                <Setter TargetName="ContentBackground" Property="Margin" Value="4 0 0 0" />
                <Setter TargetName="ItemsPresenterElement" Property="Margin" Value="4 0 0 0" />
            </Trigger>
            <Trigger Property="SplitterPosition">
                <Trigger.Value>
                    <Dock>Top</Dock>
                </Trigger.Value>
                <Setter TargetName="DockResizer" Property="Visibility" Value="Visible" />
                <Setter TargetName="DockResizer" Property="VerticalAlignment" Value="Top" />
                <Setter TargetName="DockResizer" Property="HorizontalAlignment" Value="Stretch" />
                <Setter TargetName="DockResizer" Property="Cursor" Value="SizeNS" />
                <Setter TargetName="DockResizer" Property="Height" Value="4" />
                <Setter TargetName="DockResizer" Property="system:Grid.RowSpan" Value="1" />
                <Setter TargetName="DockResizer" Property="system:Grid.Row" Value="0" />
                <Setter TargetName="DockResizer" Property="Margin" Value="2 0 0 0" />
                <Setter TargetName="DockResizer" Property="Placement">
                    <Setter.Value>
                        <Dock>Top</Dock>
                    </Setter.Value>
                </Setter>

                <Setter TargetName="Header" Property="Margin" Value="0 4 0 0" />
            </Trigger>
            <Trigger Property="SplitterPosition">
                <Trigger.Value>
                    <Dock>Right</Dock>
                </Trigger.Value>
                <Setter TargetName="DockResizer" Property="Visibility" Value="Visible" />
                <Setter TargetName="DockResizer" Property="VerticalAlignment" Value="Top" />
                <Setter TargetName="DockResizer" Property="HorizontalAlignment" Value="Stretch" />
                <Setter TargetName="DockResizer" Property="Height" Value="4" />
                <Setter TargetName="DockResizer" Property="Cursor" Value="SizeNS" />
                <Setter TargetName="DockResizer" Property="system:Grid.RowSpan" Value="1" />
                <Setter TargetName="DockResizer" Property="system:Grid.Row" Value="0" />
                <Setter TargetName="DockResizer" Property="Margin" Value="2 4 0 0" />
                <Setter TargetName="DockResizer" Property="Placement">
                    <Setter.Value>
                        <Dock>Top</Dock>
                    </Setter.Value>
                </Setter>
            </Trigger>
            <Trigger Property="SplitterPosition">
                <Trigger.Value>
                    <Dock>Bottom</Dock>
                </Trigger.Value>
                <Setter TargetName="DockResizer" Property="Visibility" Value="Visible" />
                <Setter TargetName="DockResizer" Property="VerticalAlignment" Value="Top" />
                <Setter TargetName="DockResizer" Property="HorizontalAlignment" Value="Stretch" />
                <Setter TargetName="DockResizer" Property="Cursor" Value="SizeNS" />
                <Setter TargetName="DockResizer" Property="Height" Value="4" />
                <Setter TargetName="DockResizer" Property="system:Grid.RowSpan" Value="1" />
                <Setter TargetName="DockResizer" Property="system:Grid.Row" Value="0" />
                <Setter TargetName="DockResizer" Property="Margin" Value="2 4 0 0" />
                <Setter TargetName="DockResizer" Property="Placement">
                    <Setter.Value>
                        <Dock>Top</Dock>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </ControlTemplate.Triggers>


    </ControlTemplate>

    <!--PaneGroup Style-->
    <!--x:Key="{telerik:ThemeResourceKey ThemeType=
        telerik:Office_BlackTheme , ElementType={x:Type telerikDocking:RadPaneGroup}}"-->

    <Style TargetType="telerikDocking:RadPaneGroup">

        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="IsTabStop" Value="False" />

        <Setter Property="Template" Value="{StaticResource PaneGroupBottomTemplate}" />
        <Setter Property="BottomTemplate" Value="{StaticResource PaneGroupBottomTemplate}" />
        <Setter Property="TopTemplate" Value="{StaticResource PaneGroupDocumentTemplate}" />
        <Setter Property="DocumentHostTemplate" Value="{StaticResource PaneGroupDocumentTemplate}" />
        <Setter Property="LeftTemplate" Value="{StaticResource PaneGroupBottomTemplate}" />
        <Setter Property="RightTemplate" Value="{StaticResource PaneGroupBottomTemplate}" />
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <telerikNavigationPrimitives:TabStripPanel />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>

        <Setter Property="BorderThickness" Value="{StaticResource PaneGroup_BorderThickness}" />
        <Setter Property="BorderBrush" Value="{StaticResource PaneGroup_BorderBrush}" />
        <Setter Property="Background" Value="{StaticResource PaneGroup_Background}" />

        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="VerticalAlignment" Value="Stretch" />

        <Setter Property="Align" Value="Left" />
        <Setter Property="TabStripPlacement" Value="Bottom" />
        <Setter Property="AllTabsEqualHeight" Value="True" />
        <Setter Property="BackgroundVisibility" Value="Visible" />
        <Setter Property="MinWidth" Value="15" />
        <Setter Property="MinHeight" Value="15" />
    </Style>


    <!-- RadTabControl TopTemplate-->
    <ControlTemplate x:Key="AutoHideAreaTopTemplate" TargetType="dock:AutoHideArea">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <!--TabStrip-->
            <ItemsPresenter x:Name="ItemsPresenterElement" Grid.Row="0"/>

            <!--Content-->
            <Popup
                x:Name="ContentPopup"
                IsOpen="False"
                Grid.Row="1"

                AllowsTransparency="True"
                 >

                <Grid>
                    <Grid x:Name="PopupChild" MinWidth="50" MinHeight="50">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>

                        <!--Content-->
                        <ContentControl
                            x:Name="ContentBackground"
                            Grid.Row="0"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"
                            Style="{StaticResource PaneGroup_PaneFrameStyle}">

                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>

                                <dock:PaneHeader
                                    x:Name="HeaderElement"
                                    Visibility="{Binding SelectedPane.PaneHeaderVisibility, RelativeSource={RelativeSource TemplatedParent}}"
                                    Grid.Row="0"
                                    MinHeight="16"
                                    SelectedPane="{TemplateBinding SelectedPane}"
                                    telerik:StyleManager.Theme="{StaticResource Theme}">
                                </dock:PaneHeader>
                                <ContentPresenter
                                    x:Name="ContentElement"
                                    Grid.Row="1"
                                    ContentTemplate="{TemplateBinding SelectedContentTemplate}">
                                </ContentPresenter>
                            </Grid>
                        </ContentControl>

                        <!--Resizer-->
                        <dock:RadGridResizer
                            x:Name="Resizer"
                            telerik:StyleManager.Theme="{StaticResource Theme}"
                            Placement="Bottom"
                            Grid.Row="1"
                            Height="4"
                            HorizontalAlignment="Stretch" VerticalAlignment="Bottom"
                            Cursor="SizeNS" />
                    </Grid>
                </Grid>
            </Popup>

        </Grid>
    </ControlTemplate>

    <!-- RadTabControl Bottom Template-->
    <ControlTemplate x:Key="AutoHideAreaBottomTemplate" TargetType="dock:AutoHideArea">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="auto" />
            </Grid.RowDefinitions>

            <!--TabStrip-->
            <ItemsPresenter x:Name="ItemsPresenterElement" Grid.Row="1"/>

            <!--Content-->
            <Popup x:Name="ContentPopup" IsOpen="False"

                AllowsTransparency="True"
                Placement="Top"
                 >
                <Grid>
                    <Grid x:Name="PopupChild" MinWidth="50" MinHeight="50">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <!--Resizer-->
                        <dock:RadGridResizer
                            x:Name="Resizer"
                            telerik:StyleManager.Theme="{StaticResource Theme}"
                            Grid.Row="0"
                            Placement="Top"
                            HorizontalAlignment="Stretch" VerticalAlignment="Top"
                            Height="4"
                            Cursor="SizeNS" />

                        <!--Content-->
                        <ContentControl
                            x:Name="ContentBackground"
                            Grid.Row="1"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"
                            Style="{StaticResource PaneGroup_PaneFrameStyle}">

                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>

                                <dock:PaneHeader
                                    x:Name="HeaderElement"
                                    Visibility="{Binding SelectedPane.PaneHeaderVisibility, RelativeSource={RelativeSource TemplatedParent}}"
                                    Grid.Row="0"
                                    MinHeight="16"
                                    SelectedPane="{TemplateBinding SelectedPane}"
                                    telerik:StyleManager.Theme="{StaticResource Theme}">
                                </dock:PaneHeader>
                                <ContentPresenter
                                    x:Name="ContentElement"
                                    Grid.Row="1"
                                    ContentTemplate="{TemplateBinding SelectedContentTemplate}">
                                </ContentPresenter>
                            </Grid>
                        </ContentControl>
                    </Grid>
                </Grid>
            </Popup>
        </Grid>
    </ControlTemplate>

    <!-- RadTabControl LeftTemplate-->
    <ControlTemplate x:Key="AutoHideAreaLeftTemplate" TargetType="dock:AutoHideArea">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <!--TabStrip-->
            <ItemsPresenter x:Name="ItemsPresenterElement" />

            <!--Content-->

            <Popup IsOpen="False" x:Name="ContentPopup" Grid.Column="1"

                AllowsTransparency="True"
                Placement="Right"
                 >
                <Grid>
                    <Grid x:Name="PopupChild" MinWidth="50" MinHeight="50">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <!--Content-->
                        <ContentControl
                            x:Name="ContentBackground"
                            Grid.Column="0"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"
                            Style="{StaticResource PaneGroup_PaneFrameStyle}">

                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>

                                <dock:PaneHeader
                                    x:Name="HeaderElement"
                                    Visibility="{Binding SelectedPane.PaneHeaderVisibility, RelativeSource={RelativeSource TemplatedParent}}"
                                    Grid.Row="0"
                                    MinHeight="16"
                                    SelectedPane="{TemplateBinding SelectedPane}"
                                    telerik:StyleManager.Theme="{StaticResource Theme}">
                                </dock:PaneHeader>
                                <ContentPresenter
                                    x:Name="ContentElement"
                                    Grid.Row="1"
                                    ContentTemplate="{TemplateBinding SelectedContentTemplate}">
                                </ContentPresenter>
                            </Grid>
                        </ContentControl>
                        <!--Resizer-->
                        <dock:RadGridResizer
                            x:Name="Resizer"
                            telerik:StyleManager.Theme="{StaticResource Theme}"
                            Grid.Column="1"
                            Placement="Right"
                            HorizontalAlignment="Right" VerticalAlignment="Stretch"
                            Width="4"
                            Cursor="SizeWE" />
                    </Grid>
                </Grid>
            </Popup>

        </Grid>
    </ControlTemplate>

    <!-- RadTabControl RightTemplate-->
    <ControlTemplate x:Key="AutoHideAreaRightTemplate" TargetType="dock:AutoHideArea">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <!--TabStrip-->
            <ItemsPresenter x:Name="ItemsPresenterElement" Grid.Column="1"/>

            <!--Content-->

            <Popup IsOpen="False" x:Name="ContentPopup"

                AllowsTransparency="True"
                Placement="Left"
                 >
                <Grid>
                    <Grid x:Name="PopupChild" MinWidth="50" MinHeight="50">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <!--Content-->
                        <ContentControl
                            x:Name="ContentBackground"
                            Grid.Column="1"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"
                            Style="{StaticResource PaneGroup_PaneFrameStyle}">

                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>

                                <dock:PaneHeader
                                    x:Name="HeaderElement"
                                    Visibility="{Binding SelectedPane.PaneHeaderVisibility, RelativeSource={RelativeSource TemplatedParent}}"
                                    Grid.Row="0"
                                    MinHeight="16"
                                    SelectedPane="{TemplateBinding SelectedPane}"
                                    telerik:StyleManager.Theme="{StaticResource Theme}">
                                </dock:PaneHeader>
                                <ContentPresenter
                                    x:Name="ContentElement"
                                    Grid.Row="1"
                                    ContentTemplate="{TemplateBinding SelectedContentTemplate}">
                                </ContentPresenter>
                            </Grid>
                        </ContentControl>
                        <dock:RadGridResizer
                            x:Name="Resizer"
                            telerik:StyleManager.Theme="{StaticResource Theme}"
                            Grid.Column="0"
                            Placement="Left"
                            HorizontalAlignment="Left" VerticalAlignment="Stretch"
                            Width="4"
                            Cursor="SizeWE" />
                    </Grid>
                </Grid>
            </Popup>

        </Grid>

    </ControlTemplate>

    <!--AutoHideArea Style-->
    <!-- RadTabControl -->
    <!--x:Key="{telerik:ThemeResourceKey ThemeType=
        telerik:Office_BlackTheme , ElementType={x:Type dock:AutoHideArea}}"-->
    <Style TargetType="dock:AutoHideArea" >

        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="IsEnabled" Value="True" />
        <Setter Property="IsTabStop" Value="True" />

        <Setter Property="BorderThickness" Value="{StaticResource PaneGroup_BorderThickness}" />
        <Setter Property="BorderBrush" Value="{StaticResource PaneGroup_BorderBrush}" />
        <Setter Property="Background" Value="{StaticResource PaneGroup_Background}" />

        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <telerikNavigationPrimitives:TabStripPanel x:Name="TabStripPanel" />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ReorderTabRows" Value="False" />

        <Setter Property="Template" Value="{StaticResource AutoHideAreaTopTemplate}" />
        <Setter Property="TopTemplate" Value="{StaticResource AutoHideAreaTopTemplate}" />
        <Setter Property="BottomTemplate" Value="{StaticResource AutoHideAreaBottomTemplate}" />
        <Setter Property="RightTemplate" Value="{StaticResource AutoHideAreaRightTemplate}" />
        <Setter Property="LeftTemplate" Value="{StaticResource AutoHideAreaLeftTemplate}" />
    </Style>


    <!-- ToolWindow -->


    <Style x:Key="ToolWindow_CloseButtonStyle" TargetType="telerik:RadButton">
        <Setter Property="Width" Value="17" />
        <Setter Property="Height" Value="17" />
        <Setter Property="Margin" Value="{StaticResource HeaderButtonMargin}" />
        <Setter Property="IsTabStop" Value="False" />

        <Setter Property="SnapsToDevicePixels" Value="True" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:RadButton">
                    <Grid x:Name="LayoutRoot">

                        <telerikChromes:ButtonChrome telerik:StyleManager.Theme="{StaticResource Theme}" RenderNormal="False" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" />
                        <Path x:Name="BackgroundIcon" Fill="{StaticResource ButtonIconBackground_Normal}" Margin="0 2 0 0" Width="8" Height="7" Data="M0,0 L2,0 2,1 3,1 3,2 5,2 5,1 6,1 6,0 8,0 8,1 7,1 7,2 6,2 6,3 5,3 5,4 6,4 6,5 6,5 7,5 7,6 8,6 8,7 6,7 6,6 5,6 5,5 3,5 3,6 2,6 2,7 0,7 0,6 1,6 1,5 2,5 2,4 3,4 3,3 2,3 2,2 1,2 1,1 0,1 Z" />
                        <Path x:Name="ForegroundIcon" Fill="{StaticResource ButtonIconForeground_Normal}" Margin="0 1 0 1" Width="8" Height="7" Data="M0,0 L2,0 2,1 3,1 3,2 5,2 5,1 6,1 6,0 8,0 8,1 7,1 7,2 6,2 6,3 5,3 5,4 6,4 6,5 6,5 7,5 7,6 8,6 8,7 6,7 6,6 5,6 5,5 3,5 3,6 2,6 2,7 0,7 0,6 1,6 1,5 2,5 2,4 3,4 3,3 2,3 2,2 1,2 1,1 0,1 Z" />
                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="ForegroundIcon" Property="Fill" Value="{StaticResource ButtonIconForeground_MouseOver}" />
                            <Setter TargetName="BackgroundIcon" Property="Fill" Value="{StaticResource ButtonIconBackground_MouseOver}" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="ForegroundIcon" Property="Fill" Value="{StaticResource ButtonIconForeground_Pressed}" />
                            <Setter TargetName="BackgroundIcon" Property="Fill" Value="{StaticResource ButtonIconBackground_Pressed}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="ForegroundIcon" Property="Fill" Value="{StaticResource ButtonIconForeground_Disabled}" />
                            <Setter TargetName="BackgroundIcon" Property="Fill" Value="{StaticResource ButtonIconBackground_Disabled}" />
                        </Trigger>
                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--ToolWindow Style-->
    <!--x:Key="{telerik:ThemeResourceKey ThemeType=
        telerik:Office_BlackTheme , ElementType={x:Type dock:ToolWindow}}"-->

    <Style TargetType="dock:ToolWindow" >

        <Setter Property="FocusVisualStyle" Value="{x:Null}" />

        <Setter Property="MinHeight" Value="24" />
        <Setter Property="MinWidth" Value="85" />
        <Setter Property="IsTabStop" Value="False" />

        <Setter Property="Background" Value="{StaticResource ToolWindow_Background}" />
        <Setter Property="BorderBrush" Value="{StaticResource ToolWindow_OuterBorderBrush}" />
        <Setter Property="BorderThickness" Value="1" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="dock:ToolWindow">
                    <Grid x:Name="VisualRoot" Focusable="False">
                        <telerikChromes:ShadowChrome telerik:StyleManager.Theme="{StaticResource Theme}" />
                        <Border Background="Transparent">
                            <Border CornerRadius="4" BorderThickness="1" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}">
                                <Border CornerRadius="3" BorderThickness="1" BorderBrush="{StaticResource ToolWindow_InnerBorderBrush}">
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="*" />
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <Border x:Name="HeaderElement" Grid.Row="0" Grid.Column="0" Background="Transparent" Padding="3 1">



                                            <Border.InputBindings>
                                                <MouseBinding Command="telerikDocking:RadDockingCommands.PaneHeaderMenuOpen">
                                                    <MouseBinding.Gesture>
                                                        <MouseGesture MouseAction="RightClick" />
                                                    </MouseBinding.Gesture>
                                                </MouseBinding>
                                            </Border.InputBindings>

                                            <ContentPresenter x:Name="Header" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" />
                                        </Border>
                                        <telerik:RadButton x:Name="CloseButton" Style="{StaticResource ToolWindow_CloseButtonStyle}" Grid.Row="0" Grid.Column="1" Margin="1 1 3 1" Command="telerik:WindowCommands.Close" />
                                        <ContentPresenter x:Name="Content" Grid.Row="1" Grid.ColumnSpan="2" Content="{TemplateBinding Content}" Margin="3 0 3 3"/>
                                    </Grid>
                                </Border>
                            </Border>
                        </Border>

                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>



</ResourceDictionary>

[Yury]

The ToolWindow works well, the only dotted border I can't remove now is the Floating RadSplitContainer frame window selection focus visual style.

[Pana]

Hi Yury,

Remove the:

<ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/DockingWithScrollAndMenu;component/themes/Docking.xaml" />
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

from the previous attached example and add it in the App.xaml. The ToolWindow is attached on the visual root and is not exactly window. That's why setting the dictionary in the used control does not affect the ToolWindow. If you put it in the app.xaml the RadSplitContainers in the ToolWindow will be affected and the FocusVisualStyle will be removed.

Sincerely yours,
Panayot
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Yury Last]

Thanks a lot!
Still learning WPF and your help is invaluable. :)