AvalonDock DocumentHeaderTemplate not working for Floating Windows

Question

In AvalonDock we use a LayoutDocumentExtended to add some AdditionalInformation (not only a string in our project) in the Title.

In this testcode, we set the DocumentHeaderTemplate as following.

   <xcad:DockingManager.DocumentHeaderTemplate>
    <DataTemplate DataType="{x:Type local:LayoutDocumentExtended}">
      <StackPanel Orientation="Horizontal">
        <TextBlock Text="{Binding Title, StringFormat={}{0} ---- }" />
        <TextBlock Text="{Binding AdditionalString}" />
      </StackPanel>
    </DataTemplate>
  </xcad:DockingManager.DocumentHeaderTemplate>
    <xcad:LayoutRoot>
      <xcad:LayoutPanel Orientation="Vertical" >
        <xcad:LayoutDocumentPane>
          <xcad:LayoutDocumentPane.Children>
            <local:LayoutDocumentExtended Title="Test1" AdditionalString="848451">  </local:LayoutDocumentExtended>
            <local:LayoutDocumentExtended Title="Test2" AdditionalString="1"></local:LayoutDocumentExtended>
          </xcad:LayoutDocumentPane.Children>
        </xcad:LayoutDocumentPane>
    </xcad:LayoutPanel>
  </xcad:LayoutRoot>

If i undock the LayoutDocument as a FloatingWindow, only the Title shows up and not the AdditionalString. As soon as I redock it again, the AdditionalString is shown again. Does someone have an idea, how I can set a configurable DocumentHeaderTemplate also on FloatingWindows?

Answer 1

The LayoutDocumentFloatingWindowControl control uses the WindowChrome to define the title bar. You probably want to modify the title bar of the chrome to allow it to show additional vertical content i.e. extra lines. Alternatively, consider to show the extra information in parenthesis and in the same single line.

Override the DocumentTitleTemplate to layout the title:

<DataTemplate x:Key="DocumentTitleTemplate">
  <TextBlock Text="{Binding Title}"
             TextTrimming="CharacterEllipsis">
  </TextBlock>
</DataTemplate>

The override the LayoutDocumentFloatingWindowControl style to modify the title bar height:

  <Style x:Key="{x:Type avalonDockControls:LayoutDocumentFloatingWindowControl}"
         TargetType="{x:Type avalonDockControls:LayoutDocumentFloatingWindowControl}">
    <Setter Property="Background"
            Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
    <Setter Property="BorderBrush"
            Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" />
    <Setter Property="BorderThickness"
            Value="3" />
    <Setter Property="shell:WindowChrome.WindowChrome">
      <Setter.Value>
        <shell:WindowChrome ResizeBorderThickness="10"
                            CaptionHeight="16"
                            CornerRadius="3,3,3,3"
                            GlassFrameThickness="0"
                            ShowSystemMenu="False" />
      </Setter.Value>
    </Setter>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type avalonDockControls:LayoutDocumentFloatingWindowControl}">
          <AdornerDecorator>
            <Grid>
              <Border x:Name="WindowBorder"
                      BorderThickness="{TemplateBinding BorderThickness}"
                      Background="{TemplateBinding Background}"
                      BorderBrush="{TemplateBinding BorderBrush}">
                <Grid Margin="3">
                  <Grid.RowDefinitions>
                    <RowDefinition MinHeight="16"
                                   Height="Auto" />
                    <RowDefinition Height="*" />
                  </Grid.RowDefinitions>
                  <Grid UseLayoutRounding="True">
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="*" />
                      <ColumnDefinition Width="Auto" />
                      <ColumnDefinition Width="Auto" />
                      <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <ContentPresenter Content="{Binding Model.RootDocument, RelativeSource={RelativeSource TemplatedParent}}"
                                      ContentTemplate="{Binding Model.Root.Manager.DocumentTitleTemplate, RelativeSource={RelativeSource TemplatedParent}}"
                                      ContentTemplateSelector="{Binding Model.Root.Manager.DocumentTitleTemplateSelector, RelativeSource={RelativeSource TemplatedParent}}" />


                    <Button shell:WindowChrome.IsHitTestVisibleInChrome="True"
                            Focusable="False"
                            Visibility="{Binding IsMaximized, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource InverseBoolToVisibilityConverter}}"
                            Style="{DynamicResource {x:Static ToolBar.ButtonStyleKey}}"
                            Command="{x:Static shell:SystemCommands.MaximizeWindowCommand}"
                            CommandParameter="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                            ToolTip="{x:Static avalonDockProperties:Resources.Window_Maximize}"
                            Grid.Column="2">
                      <Image Source="{xctk:ImageUri AssemblyName=Xceed.Wpf.AvalonDock, Path=Themes/Generic/Images/PinMaximize.png}">
                      </Image>
                    </Button>

                    <Button shell:WindowChrome.IsHitTestVisibleInChrome="True"
                            Focusable="False"
                            Visibility="{Binding IsMaximized, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BoolToVisibilityConverter}}"
                            Style="{DynamicResource {x:Static ToolBar.ButtonStyleKey}}"
                            Command="{x:Static shell:SystemCommands.RestoreWindowCommand}"
                            CommandParameter="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                            ToolTip="{x:Static avalonDockProperties:Resources.Window_Restore}"
                            Grid.Column="2">
                      <Image Source="{xctk:ImageUri AssemblyName=Xceed.Wpf.AvalonDock, Path=Themes/Generic/Images/PinRestore.png}">
                      </Image>
                    </Button>

                    <Button shell:WindowChrome.IsHitTestVisibleInChrome="True"
                            Focusable="False"
                            Style="{DynamicResource {x:Static ToolBar.ButtonStyleKey}}"
                            Command="{Binding Path=RootDocumentLayoutItem.CloseCommand, RelativeSource={RelativeSource TemplatedParent}}"
                            ToolTip="{x:Static avalonDockProperties:Resources.Document_Close}"
                            Visibility="{Binding Path=IsEnabled, RelativeSource={RelativeSource Self}, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}"
                            Grid.Column="3">
                      <Image Source="{xctk:ImageUri AssemblyName=Xceed.Wpf.AvalonDock, Path=Themes/Generic/Images/PinClose.png}">
                      </Image>
                    </Button>
                  </Grid>
                  <ContentPresenter Content="{TemplateBinding Content}"
                                    Grid.Row="1" />
                </Grid>
              </Border>
            </Grid>
          </AdornerDecorator>
          <ControlTemplate.Triggers>
            <Trigger Property="WindowState"
                     Value="Maximized">
              <Setter Property="Padding"
                      Value="3"
                      TargetName="WindowBorder" />
            </Trigger>
            <DataTrigger Binding="{Binding Model.RootDocument.IsActive, RelativeSource={RelativeSource Self}}"
                         Value="True">
              <Setter TargetName="WindowBorder"
                      Property="BorderBrush"
                      Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
            </DataTrigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>