Dark Theme

[koosha72]

Hey, I wondered if there is dark theme for this project. I checked the codeproject article and there wasn't any information about theming.

[npolyak]

Hey, so far there is none. I am working on it. Hopefully within 2 weeks - 1 month, I'll release it.

[koosha72]

Thanks. I've worked with your project and it's great. It doesn't seem to have any problems.

Just as I wanted to clone this git I noticed there seemed to be a problem with NP.NLogAdapter SubModule. The git cannot be cloned.

Thanks for your great work.

[kerriganb]

Hey Nick, ...didn't realize you are same Nick as from ITG!! ... worked with you for a bit on TBlack ... :)

Guess what ...Kostya (Konstantin Vints is also working with me ...) ... on a dark theme! .. we are able to style some stuff ... but other things are making us scratch our heads (we not only want to change skin brushes, but also padding, compass etc...)

here is my personal email - maybe (kostya you and me) and have a quick chat - and we can help you come up with different themes ...

Kerrigan - [email protected] ... Kostya - [email protected]

btw: koosha ... i had the same problem with the sub-modules - git clone (even when do git ...clone recursive ...was not working) ... tried using github downloader ...nothing worked... i actually did get it to work ...

but unfortunately had to go to each submodule directly ...and clone it like
git clone https://github.com/npolyak/NP.Concepts.Behaviors.git ... do same for all other submodules

... another thing I noticed was ...when you build demos (like under submodules) ... it fails to reference the project... you just have to import the referenced project again ...and add as dependency in visual studio ...

cheers
Kerrigan.

[npolyak]

Hey Kerrigan,
thanks. Nice to hear from you.

I've been very busy and did not have time to work on the theme and neither on fixing the NLogAdapter. It is coming though. Are you and Kostya still in ITG?

You should never use the demos from the sub-modules - you should load the repository containing them as a separate code tree. Then, hopefully they will work.

If you like my software, please, star the repository and vote for my articles on the codeproject.

Thanks

Nick (formerly from ITG) :)

[npolyak]

OK, I did some changes and it should build now - I fixed some old submodule references.
the command
git clone https://github.com/npolyak/NP.Avalonia.UniDock.git --recursive
works perfectly fine for me.
I remember people at ITG making fun of this statement "works perfectly fine on my machine", but really do not see any reason why it should not work for you.

[npolyak]

I'll try to add theming within a couple of weeks.

[npolyak]

And yes, send me the pictures of what you are trying to achieve, I'll try to add more degrees of freedom to my package in order to make it easy.

[TruDan]

Maybe it's better to just make use of the avalonia default theme resources instead of creating your own separate styles for light/dark themes? https://github.com/AvaloniaUI/Avalonia/tree/master/src/Avalonia.Themes.Default/Accents

This also makes it easier for projects using this library to customise the colors to fit their own theme too! :)

[npolyak]

Hey TruDan,
I am yet to find a theming package that gives me off the shelf theming capabilities that I like. Unfortunately Avalonia is not an exception in that case :). I like almost everything there except for theming.

[TruDan]

That's fair, the main limitation i'm facing currently when trying to make my own Dark theme is places where a colour is set using LocalValue, meaning i can't override it from a style :( Maybe i'm missing something (quite new to avalonia, but i know WPF well)

like here: (custom window - header bar thing) i want to make it gray when its not active

[npolyak]

Sorry for the big delay. I'll try to work on the themes shortly.

[koosha72]

I looked into it and it doesn't seem to be that hard.

Those LocalValues are colors that are set to hard color code in the theme.

I changed the DockStyles.xaml a bit and it now uses the system color values of Avalonia. So if you set the FluentTheme to light it will be light and if you set it to dark it will be dark. I didn't know much of the system colors of Avalonia so it can get much better than what I did. And there are still some hard coded colors.

here is my DockStyles.xaml

<!-- (c) Nick Polyak 2021 - http://awebpros.com/
      License: MIT License (https://opensource.org/licenses/MIT)
      short overview of copyright rules:
      1. you can use this framework in any commercial or non-commercial
         product as long as you retain this copyright message
      2. Do not blame the author of this software if something goes wrong.

      Also, please, mention this software in any documentation for the
      products that use it.
-->

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:NP.Avalonia.UniDock"
        xmlns:np="https://np.com/visuals">
  <Styles.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceInclude Source="avares://NP.Avalonia.Visuals/Themes/Geometries.axaml"/>
        <ResourceInclude Source="avares://NP.Avalonia.UniDock/Themes/DockGeometries.axaml"/>
      </ResourceDictionary.MergedDictionaries>

      <Color x:Key="OldDockSelectedColor">#FF007ACC</Color>
      <Color x:Key="OldDockMouseOverColor">#FF1C97EA</Color>
      <Color x:Key="DockMouseOverColor">#FFDDE6FF</Color>
      <Color x:Key="DockSelectedColor">#FFCCD5F0</Color>
      <Color x:Key="DockHeaderColor">#FFEEEEF2</Color>
      <Color x:Key="DockSeparatorColor">#FFCCCEDB</Color>

      <SolidColorBrush x:Key="DockMouseOverBrush"
                       Color="{StaticResource DockMouseOverColor}"/>
      <SolidColorBrush x:Key="DockSelectedBrush"
                       Color="{StaticResource DockSelectedColor}"/>
      <SolidColorBrush x:Key="DockHeaderBrush"
                     Color="{StaticResource DockHeaderColor}"/>
      <SolidColorBrush x:Key="DockSeparatorBrush"
               Color="{StaticResource DockSeparatorColor}"/>

      <ControlTemplate x:Key="DockItemButtonsTemplate">
        <Button x:Name="CloseButton"
                Classes="CloseButton"/>
      </ControlTemplate>

      <ControlTemplate x:Key="DockEditToggleButtonTemplate">
        <ToggleButton Classes="WindowIconButton IconButton IconToggleButton"
              np:AttachedProperties.IconData="{StaticResource Pencil}"
              ToolTip.Tip="Edit"
              IsVisible="{Binding $parent[Window].(np:DockAttachedProperties.TheDockManager).IsInEditableState}"
              IsChecked="{Binding $parent[Window].(np:DockAttachedProperties.IsInDockEditableState), Mode=TwoWay}"/>
      </ControlTemplate>

      <ControlTemplate x:Key="FloatingWindowButtonsTemplate">
        <StackPanel x:Name="FloatingWindowButtonsPanel"
                    Orientation="Horizontal">
          <TemplatedControl Template="{StaticResource DockEditToggleButtonTemplate}"/>
          <TemplatedControl Template="{StaticResource CustomWindowButtonsTemplate}"/>
        </StackPanel>
      </ControlTemplate>

      <ControlTemplate x:Key="AncorIconTemplate">
        <Grid Background="Transparent"
                ToolTip.Tip="Stable Group"
                IsVisible="{Binding Path=$parent[np:IDockGroup].IsStableGroup}">
          <Path Data="{StaticResource Anchor}"
                Classes="DockIndicatorIcon"/>
        </Grid>
      </ControlTemplate>
    </ResourceDictionary>
  </Styles.Resources>
  <StyleInclude Source="avares://NP.Avalonia.Visuals/Themes/TextStyles.axaml"/>
  <StyleInclude Source="avares://NP.Avalonia.Visuals/Themes/ButtonStyles.axaml"/>

  <Style Selector="Button.CloseButton">
    <Setter Property="np:ClassesBehavior.InsertClasses"
            Value="HeaderIconButton WindowIconButton IconButton"/>
    <Setter Property="Width"
            Value="15"/>
    <Setter Property="Height"
            Value="15"/>
    <Setter Property="np:AttachedProperties.IconData"
            Value="{StaticResource CloseIcon}"/>
    <Setter Property="np:CallAction.TheEvent"
            Value="{x:Static Button.ClickEvent}"/>
    <Setter Property="np:CallAction.MethodName"
            Value="Remove"/>
    <Setter Property="np:AttachedProperties.IconMargin"
            Value="3"/>
    <Setter Property="np:AttachedProperties.IconWidth"
            Value="10"/>
    <Setter Property="np:AttachedProperties.IconHeight"
            Value="10"/>
    <Setter Property="IsEnabled">
      <Setter.Value>
        <MultiBinding Converter="{x:Static np:BoolConverters.And}">
          <Binding Path="CanClose"/>
          <Binding Path="HasStableDescendant"
                   Converter="{x:Static np:BoolConverters.Not}"/>
        </MultiBinding>
      </Setter.Value>
    </Setter>
  </Style>

  <Style Selector="Button.TabCloseButton">
    <Setter Property="IsEnabled">
      <Setter.Value>
        <MultiBinding Converter="{x:Static np:BoolConverters.And}">
          <Binding Path="CanClose"/>
          <Binding Path="HasStableDescendant"
                   Converter="{x:Static np:BoolConverters.Not}"/>
          <Binding Path="$parent[np:TabbedDockGroup].AllowTabDocking"/>
        </MultiBinding>
      </Setter.Value>
    </Setter>
  </Style>

  <Style Selector="ToggleButton.EditButton">
    <Setter Property="np:AttachedProperties.IconData"
            Value="{StaticResource Pencil}"/>
    <Setter Property="ToolTip.Tip"
            Value="Edit"/>
  </Style>

  <Style Selector="local|DockSideControl">
    <Setter Property="BorderBrush"
            Value="Gray"/>
    <Setter Property="BorderThickness"
            Value="2,6,2,2"/>
    <Setter Property="Background"
            Value="Transparent"/>
    <Setter Property="Width"
            Value="30"/>
    <Setter Property="Height"
            Value="30"/>
    <Setter Property="Margin"
            Value="5"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="local:DockSideControl">
          <Border BorderThickness="{TemplateBinding BorderThickness}"
                  BorderBrush="{TemplateBinding BorderBrush}"
                  Background="{TemplateBinding Background}"/>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <Style Selector="local|DockCompass">
    <Setter Property="Background"
            Value="#AFD3D3D3"/>
    <Setter Property="Margin"
            Value="5"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="local:DockCompass">
          <Grid RowDefinitions="*,*,*"
                ColumnDefinitions="*,*,*">
            <Path Data="{StaticResource DockPaneEmpty}"
                  Fill="{TemplateBinding Background}"
                  Stretch="Fill"
                  Grid.RowSpan="3"
                  Grid.ColumnSpan="3"
                  HorizontalAlignment="Center"
                  VerticalAlignment="Center"
                  IsVisible="{TemplateBinding ShowHull}"
                  Width="120"
                  Height="120"/>
            <np:DockSideControl x:Name="CenterControl"
                                Grid.Row="1"
                                Grid.Column="1"
                                local:DockAttachedProperties.DockSide="Center"
                                IsVisible="{TemplateBinding AllowCenterDocking}"/>
            <np:DockSideControl Grid.Row="1"
                                local:DockAttachedProperties.DockSide="Left"
                                IsVisible="{TemplateBinding AllowHorizontalDocking}"
                                HorizontalAlignment="Left"/>
            <np:DockSideControl Grid.Column="1"
                                local:DockAttachedProperties.DockSide="Top"
                                IsVisible="{TemplateBinding AllowVerticalDocking}"
                                VerticalAlignment="Top"/>
            <np:DockSideControl Grid.Row="1"
                                Grid.Column="2"
                                local:DockAttachedProperties.DockSide="Right"
                                IsVisible="{TemplateBinding AllowHorizontalDocking}"
                                HorizontalAlignment="Right"/>
            <np:DockSideControl Grid.Row="2"
                                Grid.Column="1"
                                local:DockAttachedProperties.DockSide="Bottom"
                                IsVisible="{TemplateBinding AllowVerticalDocking}"
                                VerticalAlignment="Bottom"/>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>


  <Style Selector="local|DropDockSideControl">
    <Setter Property="IsHitTestVisible"
            Value="False"/>
    <Setter Property="IsVisible"
            Value="{Binding Path=IsSelected, RelativeSource={RelativeSource Mode=Self}}"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="local:DropDockSideControl">
          <Grid Background="{TemplateBinding Background}"/>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
    <Setter Property="Background"
            Value="#2000D0FF"/>
  </Style>

  <Style Selector="local|DropPanelWithCompass">
    <Setter Property="CompassHorizontalAlignment"
            Value="Center"/>
    <Setter Property="CompassVerticalAlignment"
            Value="Center"/>
    <Setter Property="Template">
      <ControlTemplate TargetType="local:DropPanelWithCompass">
        <Grid x:Name="CompassPanel"
              RowDefinitions="*,*"
              ColumnDefinitions="*,*">
          <local:DropDockSideControl SelectDockSide="Center"
                                     Grid.RowSpan="2"
                                     Grid.ColumnSpan="2"
                                     local:DockAttachedProperties.DockSide="{TemplateBinding DockSide}"/>
          <local:DropDockSideControl SelectDockSide="Top"
                                     Grid.ColumnSpan="2"
                                     local:DockAttachedProperties.DockSide="{TemplateBinding DockSide}"/>
          <local:DropDockSideControl SelectDockSide="Bottom"
                                     Grid.Row="1"
                                     Grid.ColumnSpan="2"
                                     local:DockAttachedProperties.DockSide="{TemplateBinding DockSide}"/>
          <local:DropDockSideControl SelectDockSide="Left"
                                     Grid.RowSpan="2"
                                     local:DockAttachedProperties.DockSide="{TemplateBinding DockSide}"/>
          <local:DropDockSideControl SelectDockSide="Right"
                                     Grid.RowSpan="2"
                                     Grid.Column="1"
                                     local:DockAttachedProperties.DockSide="{TemplateBinding DockSide}"/>
          <local:DockCompass Grid.RowSpan="2"
                             Grid.ColumnSpan="2"
                             HorizontalAlignment="{TemplateBinding CompassHorizontalAlignment}"
                             VerticalAlignment="{TemplateBinding CompassVerticalAlignment}"
                             ShowHull="{TemplateBinding ShowHull}"
                             AllowCenterDocking="{TemplateBinding AllowCenterDocking}"
                             AllowHorizontalDocking="{TemplateBinding AllowHorizontalDocking}"
                             AllowVerticalDocking="{TemplateBinding AllowVerticalDocking}"
                             local:DockAttachedProperties.DockSide="{Binding Path=DockSide, 
                                                                             Mode=TwoWay, 
                                                                             RelativeSource={RelativeSource TemplatedParent}}">
            <local:DockCompass.StartOrEndPointerDetection>
              <MultiBinding Converter="{x:Static BoolConverters.And}">
                <Binding Path="IsVisible"
                         Mode="OneWay"
                         RelativeSource="{RelativeSource TemplatedParent}"/>
                <Binding Path="IsAttached"
                         Mode="OneWay"
                         RelativeSource="{RelativeSource Self}"/>
              </MultiBinding>
            </local:DockCompass.StartOrEndPointerDetection>
          </local:DockCompass>
        </Grid>
      </ControlTemplate>
    </Setter>
  </Style>

  <Style Selector="local|DropPanelWithCompass[DockSide=Center]">
    <Setter Property="SelectBackground"
            Value="Green"/>
  </Style>

  <Style Selector="ContextMenu.LogicalChildrenVisibility">
    <Setter Property="np:LogicalChildrenBehavior.TheLogicalChildBehavior">
      <Setter.Value>
        <np:HasVisibleLogicalChildrenBehavior/>
      </Setter.Value>
    </Setter>
    <Setter Property="IsVisible"
            Value="{Binding Path=(np:AttachedProperties.HasVisibleLogicalChildren), 
                            RelativeSource={RelativeSource Self}}" />
  </Style>

  <Style Selector="MenuItem.RestoreDefaultLocation">
    <Setter Property="Header"
            Value="Restore Default Location"/>
    <Setter Property="np:CallAction.TheEvent"
            Value="{x:Static MenuItem.ClickEvent}"/>
    <Setter Property="np:CallAction.MethodName"
            Value="ReattachToDefaultGroup"/>
    <Setter Property="IsVisible"
            Value="{Binding Path=CanReattachToDefaultGroup}"/>
  </Style>

  <Style Selector="MenuItem.RestoreDefaultLocationStatic">
    <Setter Property="np:CallAction.StaticType"
            Value="np:DockGroupHelper"/>
  </Style>

  <Style Selector="np|DockItemHeaderControl">
    <Setter Property="HorizontalContentAlignment"
            Value="Left"/>
    <Setter Property="VerticalContentAlignment"
            Value="Center"/>
    <Setter Property="Padding"
            Value="5,3"/>
    <Setter Property="ButtonsTemplate"
            Value="{StaticResource DockItemButtonsTemplate}"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="np:DockItemHeaderControl">
          <Grid x:Name="PART_HeaderPanel"
                Background="{TemplateBinding Background}">
            <Grid.ContextMenu>
              <ContextMenu Classes="LogicalChildrenVisibility">
                <MenuItem Classes="RestoreDefaultLocation RestoreDefaultLocationStatic"/>
              </ContextMenu>
            </Grid.ContextMenu>
            <Grid Margin="{TemplateBinding Padding}">
              <ContentPresenter x:Name="Header"
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

              <TemplatedControl x:Name="ButtonsControl"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Center"
                                np:HandleEventBehavior.TheEvent="{x:Static InputElement.PointerPressedEvent}"
                                Template="{TemplateBinding ButtonsTemplate}"/>
            </Grid>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <Style Selector="np|DockTabItem.Dock">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="FontSize" Value="12"/>
    <Setter Property="Foreground" Value="{DynamicResource SystemBaseMediumColor}"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="Padding" Value="6,2,3,2"/>
    <Setter Property="np:DockAttachedProperties.IconButtonForeground"
            Value="Transparent"/>
    <Setter Property="IsSelected"
            Value="{Binding Path=Content.IsSelected, Mode=OneWay, RelativeSource={RelativeSource Self}}" />
    <Setter Property="np:CallAction.TheEvent"
            Value="{x:Static InputElement.PointerPressedEvent}"/>
    <Setter Property="np:CallAction.TargetObject"
            Value="{Binding Path=Content, RelativeSource={RelativeSource Self}}" />
    <Setter Property="np:CallAction.MethodName"
            Value="Select"/>
    <Setter Property="np:CallAction.TheRoutingStrategy"
            Value="Bubble"/>
    <Setter Property="IsVisible"
            Value="{Binding Path=Content.(np:DockAttachedProperties.IsDockVisible), 
                            RelativeSource={RelativeSource Self}}" />
    <Setter Property="IsActive"
            Value="{Binding Path=Content.IsActive, 
                            RelativeSource={RelativeSource Self}}"/>
    <Setter Property="IsFullyActive">
      <Setter.Value>
        <MultiBinding Converter="{x:Static BoolConverters.And}">
          <Binding Path="IsActive"
                   RelativeSource="{RelativeSource Self}"/>
          <Binding Path="IsActive"
                   RelativeSource="{RelativeSource AncestorType=Window}"/>
        </MultiBinding>
      </Setter.Value>
    </Setter>
    <Setter Property="Template">
      <ControlTemplate>
        <Grid ColumnDefinitions="Auto, Auto"
              Background="{TemplateBinding Background}"
              DataContext="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}">
          <Grid.ContextMenu>
            <ContextMenu Classes="LogicalChildrenVisibility">
              <MenuItem Classes="RestoreDefaultLocation RestoreDefaultLocationStatic"/>
            </ContextMenu>
          </Grid.ContextMenu>
          <np:DockContentPresenter
              Name="PART_ContentPresenter"
              BorderBrush="{TemplateBinding BorderBrush}"
              BorderThickness="{TemplateBinding BorderThickness}"
              DockDataContext="{Binding Path=Content.DockDataContext, RelativeSource={RelativeSource TemplatedParent}}"
              ContentTemplate="{Binding Path=Content.HeaderTemplate, RelativeSource={RelativeSource TemplatedParent}}"
              Content="{Binding Path=Content.Header, RelativeSource={RelativeSource TemplatedParent}}"
              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
              Margin="{TemplateBinding Margin}"
              Padding="{TemplateBinding Padding}"/>
          <Button x:Name="CloseButton"
                  Classes="CloseButton TabCloseButton"
                  Foreground="{Binding Path=(np:DockAttachedProperties.IconButtonForeground), RelativeSource={RelativeSource Mode=TemplatedParent}}"
                  Grid.Column="1"
                  Margin="6,2,2,2"/>
        </Grid>
      </ControlTemplate>
    </Setter>
  </Style>

  <Style Selector="np|DockTabItem.Dock:pointerover">
    <Setter Property="Background"
            Value="{StaticResource DockMouseOverBrush}"/>
    <!--<Setter Property="Foreground"
            Value="White"/>-->
    <Setter Property="np:DockAttachedProperties.IconButtonForeground"
            Value="#FF000000"/>
  </Style>



    <Style Selector="np|DockTabItem.Dock[IsSelected=True]">
        <Setter Property="Background"
                Value="{DynamicResource SystemAltMediumHighColor}"/>
	    <Setter Property="Foreground"
            Value="{DynamicResource SystemBaseMediumColor}"/>
    </Style>

    <Style Selector="np|DockTabItem.Dock[IsActive=True]">
        <Setter Property="Background"
                Value="{DynamicResource SystemAltHighColor}"/>
        <Setter Property="Foreground"
	        Value="{DynamicResource SystemBaseHighColor}"/>
    </Style>

    <Style Selector="np|DockTabItem.Dock[IsFullyActive=True]">
        <Setter Property="Background"
                Value="{DynamicResource SliderTrackValueFill}"/>
        <Setter Property="Foreground"
	        Value="{DynamicResource SystemBaseMediumColor}"/>
    </Style>

    <Style Selector="np|DockItemPresenter[IsActive=True]">
	    <Setter Property="HeaderBackground"
		    Value="{DynamicResource SystemAltHighColor}"/>
	    <Setter Property="HeaderForeground"
		    Value="{DynamicResource SystemBaseHighColor}"/>
    </Style>

    <Style Selector="np|DockItemPresenter[IsFullyActive=True]">
	    <Setter Property="HeaderBackground"
		    Value="{DynamicResource SliderTrackValueFill}"/>
	    <Setter Property="HeaderForeground"
		    Value="{DynamicResource SystemBaseMediumColor}"/>
    </Style>

    <Style Selector="np|DockContentPresenter[Name=PART_SelectedContentHost]">
	    <Setter Property="Background"
			    Value="{DynamicResource SystemAltMediumHighColor}"/>
    </Style>

    <Style Selector="np|DockContentPresenter[Name=Body]">
	    <Setter Property="Background"
			    Value="{DynamicResource SystemAltMediumHighColor}"/>
    </Style>

    <Style Selector="np|DockTabsPresenter > WrapPanel">
	    <Setter Property="Background"
			    Value="{DynamicResource SystemAltMediumHighColor}"/>
    </Style>

    <Style Selector="np|DockSeparator">
    <Setter Property="Focusable" Value="True" />
    <Setter Property="MinWidth" Value="1" />
    <Setter Property="MinHeight" Value="1" />
    <Setter Property="Background"
            Value="{StaticResource DockSeparatorBrush}"/>
    <Setter Property="HorizontalAlignment"
        Value="Stretch"/>
    <Setter Property="VerticalAlignment"
        Value="Stretch"/>
    <Setter Property="Template">
      <ControlTemplate>
        <Border BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                Background="{TemplateBinding Background}"/>
      </ControlTemplate>
    </Setter>
  </Style>

  <Style Selector="np|DockSeparator[TheOrientation=Horizontal]">
    <Setter Property="Height"
            Value="4"/>
  </Style>

  <Style Selector="np|DockSeparator[TheOrientation=Vertical]">
    <Setter Property="Width"
            Value="4"/>
  </Style>

  <Style Selector="local|TabbedDockGroup">
    <Setter Property="HorizontalAlignment"
            Value="Stretch"/>
    <Setter Property="VerticalAlignment"
            Value="Stretch"/>
    <Setter Property="np:DockAttachedProperties.IsInDockEditableState"
            Value="{Binding Path=(np:DockAttachedProperties.IsInDockEditableState),
                            RelativeSource={RelativeSource AncestorType=Window}}"/>
    <Setter Property="ShowHeader">
      <Setter.Value>
        <MultiBinding Converter="{x:Static np:BoolConverters.And}">
          <Binding Path="(np:DockAttachedProperties.IsInDockEditableState)"
                   RelativeSource="{RelativeSource Self}"/>
          <Binding Path="(np:DockAttachedProperties.IsUnderLockedGroup)"
                   Converter="{x:Static np:BoolConverters.Not}"
                   RelativeSource="{RelativeSource Self}"/>
        </MultiBinding>
      </Setter.Value>
    </Setter>
    <Setter Property="IsVisible"
            Value="{Binding Path=(np:DockAttachedProperties.IsDockVisible), 
                            RelativeSource={RelativeSource Self}}"/>
    <Setter Property="TabSeparatorBackground"
            Value="{StaticResource DockHeaderBrush}"/>
    <Setter Property="Background"
            Value="White"/>
    <Setter Property="HeaderBackground"
        Value="{DynamicResource SystemAltMediumHighColor}"/>
    <Setter Property="HeaderForeground"
            Value="{DynamicResource SystemBaseMediumColor}"/>
    <Setter Property="IsFullyActive">
      <Setter.Value>
        <MultiBinding Converter="{x:Static BoolConverters.And}">
          <Binding Path="SelectedItem.IsActive"
                   RelativeSource="{RelativeSource Self}"/>
          <Binding Path="IsActive"
                   RelativeSource="{RelativeSource AncestorType=Window}"/>
        </MultiBinding>
      </Setter.Value>
    </Setter>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="local:TabbedDockGroup">
          <Border
              Margin="{TemplateBinding Margin}"
              BorderBrush="{TemplateBinding BorderBrush}"
              BorderThickness="{TemplateBinding BorderThickness}"
              Background="{TemplateBinding Background}"
              HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
              VerticalAlignment="{TemplateBinding VerticalAlignment}">
            <Grid RowDefinitions="Auto, *">
              <Grid RowDefinitions="Auto, Auto"
                    IsVisible="{Binding Path=ShowHeader, RelativeSource={RelativeSource TemplatedParent}}">
                <np:DockItemHeaderControl x:Name="Header"
                                          DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                                          Background="{Binding Path=HeaderBackground, RelativeSource={RelativeSource TemplatedParent}}"
                                          Foreground="{Binding Path=HeaderForeground, RelativeSource={RelativeSource TemplatedParent}}"
                                          np:DragHeaderBehavior.IsSet="True"
                                          Height="22">
                  <np:DockItemHeaderControl.ButtonsTemplate>
                    <ControlTemplate>
                      <StackPanel Orientation="Horizontal"
                                  np:HandleEventBehavior.TheEvent="{x:Static InputElement.PointerPressedEvent}">
                        <TextBlock Text="{Binding Path=$parent[local:TabbedDockGroup].DockId, StringFormat='DockId:\{0\}'}"
                                   IsVisible="{Binding Path=$parent[local:TabbedDockGroup].(local:DockAttachedProperties.IsInDockEditableState)}"
                                   Margin="5,0"
                                   IsHitTestVisible="False"/>
                        <CheckBox  Content="Allow Tab Docking"
                                   IsChecked="{Binding Path=AllowTabDocking, Mode=TwoWay}"
                                   Height="22"
                                   VerticalAlignment="Center"
                                   HorizontalAlignment="Center"
                                   Margin="0,0,0,0"
                                   IsVisible="{Binding Path=$parent[local:TabbedDockGroup].(local:DockAttachedProperties.IsInDockEditableState)}"/>
                        <TemplatedControl Template="{StaticResource AncorIconTemplate}"/>
                        <ComboBox Items="{x:Static np:VisualHelper.Docks}"
                                  IsVisible="{Binding $parent[local:TabbedDockGroup].(local:DockAttachedProperties.IsInDockEditableState)}"
                                  Padding="0"
                                  BorderThickness="0"
                                  Margin="5,0"
                                  Foreground="Black"
                                  Opacity="0.7"
                                  Background="Transparent"
                                  ToolTip.Tip="Choose Side for Tabs"
                                  HorizontalAlignment="Center"
                                  VerticalAlignment="Center"
                                  SelectedItem="{Binding Path=TabStripPlacement,
                                                         Mode=TwoWay,
                                                         RelativeSource={RelativeSource AncestorType=np:TabbedDockGroup}}">
                          <ComboBox.ItemTemplate>
                            <DataTemplate>
                              <Grid Background="Transparent"
                                      ToolTip.Tip="{Binding StringFormat='\{0\}'}">
                                <Path Width="13"
                                      Height="13"
                                      Stretch="Fill"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      np:FindResourceBehavior.TheProp="{x:Static Path.DataProperty}"
                                      np:FindResourceBehavior.ResourceKey="{Binding StringFormat='Border\{0\}'}"
                                      Opacity="0.5"
                                      Fill="{Binding $parent[ComboBox].Foreground}"/>
                              </Grid>
                            </DataTemplate>
                          </ComboBox.ItemTemplate>
                        </ComboBox>
                        <Button x:Name="CloseButton"
                                Classes="CloseButton"/>
                      </StackPanel>
                    </ControlTemplate>
                  </np:DockItemHeaderControl.ButtonsTemplate>
                </np:DockItemHeaderControl>
                <Grid x:Name="Separator"
                      Grid.Row="1"
                      Height="2"/>
              </Grid>
              <DockPanel Grid.Row="1">
                <local:DockTabsPresenter x:Name="PART_ItemsPresenter"
                                         local:DragTabBehavior.IsSet="{TemplateBinding AllowTabDocking}"
                                         local:DockAttachedProperties.TheDockManager="{Binding Path=(local:DockAttachedProperties.TheDockManager),
                                                                                             RelativeSource={RelativeSource TemplatedParent}}"
                                         DockPanel.Dock="{TemplateBinding TabStripPlacement}"
                                         VerticalAlignment="Top"
                                         Items="{Binding Path=Items, RelativeSource={RelativeSource TemplatedParent}}">
                  <local:DockTabsPresenter.ItemsPanel>
                    <ItemsPanelTemplate>
                      <WrapPanel Orientation="{TemplateBinding TabOrientation}"/>
                    </ItemsPanelTemplate>
                  </local:DockTabsPresenter.ItemsPanel>
                </local:DockTabsPresenter>
                <Grid>
                  <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                  </Grid.RowDefinitions>
                  <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                  </Grid.ColumnDefinitions>
                  <Grid x:Name="PART_TabSeparator"
                        Background="{TemplateBinding TabSeparatorBackground}"
                        IsVisible="{Binding Path=NumberDockChildren, 
                                          Converter={x:Static np:IntConverters.IsPositiveConverter},
                                          RelativeSource={RelativeSource TemplatedParent}}"/>
                  <np:DockContentPresenter
                       Grid.Row="1"
                       Grid.Column="1"
                       Name="PART_SelectedContentHost"
                       Margin="{TemplateBinding Padding}"
                       DockDataContext="{Binding Path=SelectedItem.DockDataContext, RelativeSource={RelativeSource TemplatedParent}}"
                       Content="{Binding Path=SelectedItem.Content, RelativeSource={RelativeSource TemplatedParent}}"
                       ContentTemplate="{Binding Path=SelectedItem.ContentTemplate, RelativeSource={RelativeSource TemplatedParent}}"
                       HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                       VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
				    <Grid x:Name="PART_OverlayWindowHolder" 
					      Grid.Row="1"
                          Grid.Column="1"
					      np:OverlayWindowBehavior.OverlayedControl="{Binding RelativeSource={RelativeSource Self}}"
					      np:OverlayWindowBehavior.IsOpen="{Binding Path=ShowCompass, RelativeSource={RelativeSource TemplatedParent}}"
					      np:OverlayWindowBehavior.Content="{Binding RelativeSource={RelativeSource TemplatedParent},
					                                                 Converter={x:Static np:ToControlContainerConverter.Instance}}">
					    <np:OverlayWindowBehavior.ContentTemplate>
						    <DataTemplate>
							    <local:DropPanelWithCompass
                                          AllowCenterDocking="{Binding Path=Control.AllowCenterDocking}">
								    <local:DropPanelWithCompass.AllowCenterDocking>
									    <MultiBinding Converter="{x:Static np:BoolConverters.And}">
										    <Binding Path="Control.AllowCenterDocking"/>
										    <Binding Path="Control.AllowTabDocking"/>
									    </MultiBinding>
								    </local:DropPanelWithCompass.AllowCenterDocking>
							    </local:DropPanelWithCompass>
						    </DataTemplate>
					    </np:OverlayWindowBehavior.ContentTemplate>
				    </Grid>
                </Grid>
              </DockPanel>
            </Grid>
          </Border>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>


  <Style Selector="np|TabbedDockGroup[IsActive=True]">
    <Setter Property="TabSeparatorBackground"
        Value="{StaticResource DockSelectedBrush}"/>
    <!--<Setter Property="HeaderForeground"
            Value="White"/>-->
  </Style>

  <Style Selector="np|TabbedDockGroup[IsFullyActive=True]">
    <Setter Property="TabSeparatorBackground"
        Value="#F5CC84"/>
    <!--<Setter Property="HeaderForeground"
            Value="White"/>-->
  </Style>


  <Style Selector="local|TabbedDockGroup[TabStripPlacement=Top] /template/ ItemsPresenter#PART_ItemsPresenter">
    <Setter Property="DockPanel.Dock" Value="Top"/>
  </Style>
  <Style Selector="local|TabbedDockGroup[TabStripPlacement=Top] /template/ Grid#PART_TabSeparator">
    <Setter Property="Height"
        Value="2"/>
    <Setter Property="Grid.Column"
            Value="1"/>
  </Style>
  <Style Selector="local|TabbedDockGroup[TabStripPlacement=Bottom] /template/ ItemsPresenter#PART_ItemsPresenter">
    <Setter Property="DockPanel.Dock" Value="Bottom"/>
  </Style>
  <Style Selector="local|TabbedDockGroup[TabStripPlacement=Bottom] /template/ Grid#PART_TabSeparator">
    <Setter Property="Grid.Column"
            Value="1"/>
    <Setter Property="Grid.Row" Value="2"/>
    <Setter Property="Height"
        Value="2"/>
  </Style>
  <Style Selector="local|TabbedDockGroup[TabStripPlacement=Left] /template/ ItemsPresenter#PART_ItemsPresenter">
    <Setter Property="DockPanel.Dock" Value="Left"/>
  </Style>
  <Style Selector="local|TabbedDockGroup[TabStripPlacement=Left] /template/ Grid#PART_TabSeparator">
    <Setter Property="Grid.Row" Value="1"/>
    <Setter Property="Grid.Column" Value="0"/>
    <Setter Property="Height" Value="NaN"/>
    <Setter Property="Width" Value="2"/>
  </Style>
  <Style Selector="local|TabbedDockGroup[TabStripPlacement=Right] /template/ ItemsPresenter#PART_ItemsPresenter">
    <Setter Property="DockPanel.Dock" Value="Right"/>
  </Style>
  <Style Selector="local|TabbedDockGroup[TabStripPlacement=Right] /template/ Grid#PART_TabSeparator">
    <Setter Property="Grid.Row" Value="1"/>
    <Setter Property="Grid.Column" Value="2"/>
    <Setter Property="Height" Value="NaN"/>
    <Setter Property="Width" Value="2"/>
  </Style>

  <Style Selector="np|DockItemPresenter">
    <Setter Property="Padding"
            Value="5"/>
    <Setter Property="DataContext"
            Value="{Binding Path=DockContext, RelativeSource={RelativeSource Mode=Self}}"/>
    <Setter Property="HeaderBackground"
            Value="{DynamicResource SystemAltMediumHighColor}"/>
    <Setter Property="HeaderForeground"
            Value="{DynamicResource SystemBaseMediumColor}"/>
    <Setter Property="IsActive"
            Value="{Binding Path=IsActive}"/>
    <Setter Property="IsVisible"
            Value="{Binding Path=DockContext.(np:DockAttachedProperties.IsDockVisible),
                            RelativeSource={RelativeSource Self}}" />
    <Setter Property="IsFullyActive">
      <Setter.Value>
        <MultiBinding Converter="{x:Static BoolConverters.And}">
          <Binding Path="IsActive"/>
          <Binding Path="IsActive"
                   RelativeSource="{RelativeSource AncestorType=Window}"/>
        </MultiBinding>
      </Setter.Value>
    </Setter>
    <Setter Property="ShowHeader"
            Value="{Binding Path=(np:DockAttachedProperties.IsUnderLockedGroup), 
                            Converter={x:Static np:BoolConverters.Not}, 
                            RelativeSource={RelativeSource Self}}"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="np:DockItemPresenter">
          <Grid RowDefinitions="Auto, *"
                Background="White">
            <Grid RowDefinitions="Auto, Auto"
                  IsVisible="{Binding Path=ShowHeader, RelativeSource={RelativeSource TemplatedParent}}">
              <np:DockItemHeaderControl x:Name="Header"
                                        Background="{Binding Path=HeaderBackground, RelativeSource={RelativeSource TemplatedParent}}"
                                        Foreground="{Binding Path=HeaderForeground, RelativeSource={RelativeSource TemplatedParent}}"
                                        np:DragHeaderBehavior.IsSet="True"
                                        Content="{Binding Path=Header}"
                                        ContentTemplate="{Binding Path=HeaderTemplate}"
                                        Height="22"/>
              <Rectangle HorizontalAlignment="Stretch"
                         Height="0"
                         Grid.Row="1"
                         Fill="Black"/>
            </Grid>
            <Grid x:Name="PART_OverlayWindowHolder" 
			      Grid.Row="1"
			      np:OverlayWindowBehavior.OverlayedControl="{Binding RelativeSource={RelativeSource Self}}"
			      np:OverlayWindowBehavior.IsOpen="{Binding Path=ShowCompass}"
			      np:OverlayWindowBehavior.Content="{Binding Path=DataContext, 
			                                                 RelativeSource={RelativeSource TemplatedParent},
														     Converter={x:Static np:ToControlContainerConverter.Instance}}">
			    <np:OverlayWindowBehavior.ContentTemplate>
				    <DataTemplate>
					    <local:DropPanelWithCompass x:Name="PART_DropPanelWithCompass"
												    AllowCenterDocking="{Binding Path=Control.AllowCenterDocking}"/>
				    </DataTemplate>
			    </np:OverlayWindowBehavior.ContentTemplate>
              <np:DockContentPresenter x:Name="Body"
                                       DockDataContext="{Binding Path=DataContext.DockDataContext, RelativeSource={RelativeSource TemplatedParent}}"
                                       Content="{Binding Path=DataContext.Content, RelativeSource={RelativeSource TemplatedParent}}"
                                       ContentTemplate="{Binding Path=DataContext.ContentTemplate, RelativeSource={RelativeSource TemplatedParent}}"
                                       HorizontalAlignment="Stretch"
                                       VerticalContentAlignment="Stretch"
                                       Margin="{Binding Path=DataContext.Padding, RelativeSource={RelativeSource TemplatedParent}}"/>
            </Grid>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <Style Selector=":is(np|CustomWindow).PlainFloatingWindow">
    <Setter Property="HeaderBackground"
            Value="{DynamicResource SystemAltMediumHighColor}"/>
    <Setter Property="HeaderHeight"
            Value="30"/>
    <Setter Property="HeaderSeparatorHeight"
            Value="2"/>
    <!--<Setter Property="ResizeMargin"
            Value="10"/>-->
    <Setter Property="CustomHeaderIcon"
            Value="avares://NP.Avalonia.Visuals/Assets/avalonia-32.png"/>
    <Setter Property="HeaderSeparatorBrush"
            Value="{StaticResource DockSeparatorBrush}"/>
    <Setter Property="CustomHeaderIconMargin"
            Value="5,5,0,5"/>
    <Setter Property="TitleMargin"
            Value="5"/>
    <Setter Property="Title"
            Value="{Binding Path=TheDockGroup.ActiveDockItem.Header, 
                            StringFormat='Floating Window - {0}'
                            RelativeSource={RelativeSource Self}}"/>
    <Setter Property="ButtonsAreaTemplate"
            Value="{StaticResource FloatingWindowButtonsTemplate}"/>
    <Setter Property="HeaderContentTemplate">
      <Setter.Value>
        <DataTemplate>
          <Grid Background="Transparent"
                DataContext="{Binding RelativeSource={RelativeSource AncestorType=np:FloatingWindow}}">
            <Grid.ContextMenu>
              <ContextMenu Classes="LogicalChildrenVisibility">
                <MenuItem Classes="RestoreDefaultLocation"/>
              </ContextMenu>
            </Grid.ContextMenu>
          </Grid>
        </DataTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <Style Selector="Path.DockIndicatorIcon">
    <Setter Property="Fill"
            Value="Black"/>
    <Setter Property="Stretch"
            Value="Uniform"/>
    <Setter Property="Width"
            Value="12"/>
    <Setter Property="Height"
            Value="12"/>
    <Setter Property="Opacity"
            Value="0.5"/>
    <Setter Property="Margin"
            Value="6.5, 1.5"/>
  </Style>

    <Style Selector="np|StackDockGroup">
	    <Setter Property="np:DockAttachedProperties.IsInDockEditableState"
			    Value="{Binding Path=(np:DockAttachedProperties.IsInDockEditableState),
                            RelativeSource={RelativeSource AncestorType=Window}}"/>
	    <Setter Property="ShowHeader">
		    <Setter.Value>
			    <MultiBinding Converter="{x:Static np:BoolConverters.Or}">
				    <Binding Path="IsGroupLocked"
						     RelativeSource="{RelativeSource Self}"/>
				    <MultiBinding Converter="{x:Static np:BoolConverters.And}">
					    <Binding Path="(np:DockAttachedProperties.IsInDockEditableState)"
							     RelativeSource="{RelativeSource Self}"/>
					    <Binding Path="(np:DockAttachedProperties.IsUnderLockedGroup)"
							     Converter="{x:Static np:BoolConverters.Not}"
							     RelativeSource="{RelativeSource Self}"/>
				    </MultiBinding>
			    </MultiBinding>
		    </Setter.Value>
	    </Setter>
	    <Setter Property="np:TriggerBehavior.SourceProperty"
			    Value="{x:Static np:StackDockGroup.IsGroupLockedProperty}"/>
	    <Setter Property="np:TriggerBehavior.TargetProperty"
			    Value="{x:Static np:DockAttachedProperties.IsUnderLockedGroupProperty}"/>
	    <Setter Property="np:TriggerBehavior.SourceTriggerValue">
		    <Setter.Value>
			    <x:Boolean>True</x:Boolean>
		    </Setter.Value>
	    </Setter>
	    <Setter Property="np:TriggerBehavior.TargetValue">
		    <Setter.Value>
			    <x:Boolean>True</x:Boolean>
		    </Setter.Value>
	    </Setter>
	    <Setter Property="HeaderBackground"
			    Value="{DynamicResource SystemAltMediumHighColor}"/>
	    <Setter Property="HeaderForeground"
			    Value="{DynamicResource SystemBaseMediumColor}"/>
	    <Setter Property="Background"
			    Value="Transparent"/>
	    <Setter Property="np:DockAttachedProperties.IsPointerOverHeader"
			    Value="{Binding Path=(np:FindPartBehavior.VisualPart).IsPointerOver, RelativeSource={RelativeSource Self}}"/>
	    <Setter Property="np:DockAttachedProperties.ShowGroupBoundaries">
		    <Setter.Value>
			    <MultiBinding Converter="{x:Static np:BoolConverters.And}">
				    <Binding Path="(np:DockAttachedProperties.IsInDockEditableState)"
						     RelativeSource="{RelativeSource Self}"/>
				    <Binding Path="(np:DockAttachedProperties.IsPointerOverHeader)"
						     RelativeSource="{RelativeSource Self}"/>
			    </MultiBinding>
		    </Setter.Value>
	    </Setter>
	    <Setter Property="HeaderControlTemplate">
		    <ControlTemplate>
			    <Grid RowDefinitions="Auto, Auto"
				      IsVisible="{Binding Path=ShowHeader, RelativeSource={RelativeSource AncestorType=np:StackDockGroup}}">
				    <np:DockItemHeaderControl x:Name="PART_Header"
										      DataContext="{Binding RelativeSource={RelativeSource AncestorType=np:StackDockGroup}}"
										      Background="{Binding Path=HeaderBackground, RelativeSource={RelativeSource AncestorType=np:StackDockGroup}}"
										      Foreground="{Binding Path=HeaderForeground, RelativeSource={RelativeSource AncestorType=np:StackDockGroup}}"
										      np:DragHeaderBehavior.IsSet="True"
										      np:FindPartBehavior.AncestorObject="{Binding RelativeSource={RelativeSource AncestorType=np:StackDockGroup}}"
										      Height="22">
					    <np:DockItemHeaderControl.ButtonsTemplate>
						    <ControlTemplate>
							    <StackPanel Orientation="Horizontal"
										    np:HandleEventBehavior.TheEvent="{x:Static InputElement.PointerPressedEvent}">
								    <TextBlock Text="{Binding Path=$parent[local:IDockGroup].DockId, StringFormat='DockId:\{0\}'}"
										       IsVisible="{Binding Path=$parent[local:IDockGroup].(local:DockAttachedProperties.IsInDockEditableState)}"
										       Margin="5,0"/>
								    <ToggleButton Classes="HeaderIconButton IconButton IconToggleButton AlternateIconToggleButton"
											      np:AttachedProperties.PrimaryIconData="{StaticResource LockOpen}"
											      np:AttachedProperties.AlternateIconData="{StaticResource LockClosed}"
											      ToolTip.Tip="Lock/Unlock"
											      IsVisible="{Binding $parent[np:StackDockGroup].(np:DockAttachedProperties.IsInDockEditableState)}"
											      np:AttachedProperties.IconMargin="1.5"
											      Margin="5,0"
											      IsChecked="{Binding $parent[np:StackDockGroup].IsGroupLocked, Mode=TwoWay}"/>

								    <TemplatedControl Template="{StaticResource AncorIconTemplate}"/>

								    <Grid Background="Transparent"
									      ToolTip.Tip="Locked">
									    <Path Data="{StaticResource LockClosed}"
										      Classes="DockIndicatorIcon">
										    <Path.IsVisible>
											    <MultiBinding Converter="{x:Static np:BoolConverters.And}">
												    <Binding Path="$parent[np:StackDockGroup].IsGroupLocked"/>
												    <Binding Path="$parent[np:StackDockGroup].(np:DockAttachedProperties.IsInDockEditableState)"
														     Converter="{x:Static np:BoolConverters.Not}"/>
											    </MultiBinding>
										    </Path.IsVisible>
									    </Path>
								    </Grid>

								    <Button x:Name="CloseButton"
										    Classes="CloseButton"/>
							    </StackPanel>
						    </ControlTemplate>
					    </np:DockItemHeaderControl.ButtonsTemplate>
				    </np:DockItemHeaderControl>
				    <Grid x:Name="Separator"
					      Grid.Row="1"
					      Height="2"/>
			    </Grid>
		    </ControlTemplate>
	    </Setter>
	    <Setter Property="Template">
		    <Setter.Value>
			    <ControlTemplate>
				    <Grid x:Name="PART_RootPanel"
					      RowDefinitions="Auto, *"
					      Background="Transparent">
					    <TemplatedControl x:Name="HeaderControl"
									      Template="{TemplateBinding HeaderControlTemplate}"/>
					    <Grid x:Name="PART_OverlayWindowHolder"
						      Grid.Row="1"
					          np:OverlayWindowBehavior.OverlayedControl="{Binding RelativeSource={RelativeSource Self}}"
						      np:OverlayWindowBehavior.IsOpen="{Binding Path=ShowCompass, RelativeSource={RelativeSource TemplatedParent}}"
						      np:OverlayWindowBehavior.Content="{Binding RelativeSource={RelativeSource TemplatedParent},
					                                                     Converter={x:Static np:ToControlContainerConverter.Instance}}">
						    <np:OverlayWindowBehavior.ContentTemplate>
							    <DataTemplate>
								    <local:DropPanelWithCompass
										      ShowHull="{Binding Control.IsGroupLocked}"
										      AllowHorizontalDocking="{Binding Control.IsGroupLocked}"
										      AllowVerticalDocking="{Binding Control.IsGroupLocked}"
										      AllowCenterDocking="{Binding Control.IsGroupLocked, Converter={x:Static np:BoolConverters.Not}}"/>
							    </DataTemplate>
						    </np:OverlayWindowBehavior.ContentTemplate>

						    <Grid x:Name="SelectGroup"
                                  Background="Cyan"
                                  Opacity="0.1"
                                  IsVisible="{Binding Path=(np:DockAttachedProperties.ShowGroupBoundaries),
                                                                  RelativeSource={RelativeSource TemplatedParent}}"/>
					    </Grid>
				    </Grid>
			    </ControlTemplate>
		    </Setter.Value>
	    </Setter>
    </Style>

  <Style Selector="np|RootDockGroup">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate>
          <Grid x:Name="PART_RootPanel"
                Background="{TemplateBinding Background}"
			    np:OverlayWindowBehavior.IsOpen="{Binding Path=ShowCompass, RelativeSource={RelativeSource TemplatedParent}}"
			    np:OverlayWindowBehavior.Content="{Binding RelativeSource={RelativeSource TemplatedParent},
					                                        Converter={x:Static np:ToControlContainerConverter.Instance}}">
		      <np:OverlayWindowBehavior.ContentTemplate>
			      <DataTemplate>
				      <local:DropPanelWithCompass
						    ShowHull="False"
						    CompassHorizontalAlignment="Stretch"
						    CompassVerticalAlignment="Stretch"
						    AllowCenterDocking="{Binding Path=Control.ShowCompassCenter}"
						    AllowHorizontalDocking="{Binding Path=Control.ShowCompassCenter, 
                                                             Converter={x:Static BoolConverters.Not}}"
						    AllowVerticalDocking="{Binding Path=Control.ShowCompassCenter, 
                                                           Converter={x:Static BoolConverters.Not}}"/>					  
			      </DataTemplate>
		      </np:OverlayWindowBehavior.ContentTemplate>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</Styles>