Articles in this section
Category / Section

How to customize the floatwindow template of WPF DockingManager?

1 min read

The FloatWindow Template can be customized using FloatWindowTemplate property in WPF DockingManager. The following code has been demonstrated to modify the height of the Header of the Float Window.

MainWindow.Xaml

<Window.Resources>
  <ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
      <ResourceDictionary Source="/Syncfusion.Tools.WPF;component/Framework/DockingManager/Themes/vista.aero.xaml"/>
    </ResourceDictionary.MergedDictionaries>
    <ControlTemplate x:Key="FloatWindowTemplate" TargetType="{x:Type ContentControl}">
      <AdornerDecorator>
        <DockPanel Focusable="False" LastChildFill="True" Opacity="{Binding Path=Opacity, RelativeSource={RelativeSource AncestorType={x:Type Syncfusion:IWindow}}}" >
          <Border Name="FloatWindowOutBorder"  Focusable="False"
                  BorderBrush="{StaticResource Aero.FloatHeaderBorderBrush}"
                  BorderThickness="{StaticResource SingleThickness}"
                  Background="{StaticResource Default.WindowBackground}" >
            <Grid Focusable="False">
              <Grid.RowDefinitions>
                <RowDefinition Name="TopRow" Style="{StaticResource RowDefinitionStyle}" />
                <RowDefinition Height="*" />
                <RowDefinition Name="BottomRow" Height="7" />
              </Grid.RowDefinitions>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Name="LeftCol" Width="7" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Name="RightCol" Width="7" />
              </Grid.ColumnDefinitions>
              <Syncfusion:FloatWindowBorder BorderMode="LeftTop" Name="BorderLeftTop" Grid.Column="0" Grid.Row="0" />
              <Syncfusion:FloatWindowBorder BorderMode="Header" Height="30" Name="BorderHeader" Grid.Column="1" Grid.Row="0" />
              <Syncfusion:FloatWindowBorder BorderMode="RightTop" Name="BorderRightTop" Grid.Column="2" Grid.Row="0"/>
              <Syncfusion:FloatWindowBorder BorderMode="Left" Name="BorderLeft" Grid.Column="0" Grid.Row="1" />
              <ContentPresenter Name="ContentPresenter" Grid.Column="1" Grid.Row="1" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" Content="{TemplateBinding ContentControl.Content}"/>
                <Syncfusion:FloatWindowBorder BorderMode="Right" Name="BorderRight" Grid.Column="2" Grid.Row="1" />
                <Syncfusion:FloatWindowBorder BorderMode="LeftBottom" Name="BorderLeftBottom" Grid.Column="0" Grid.Row="2" />
                <Syncfusion:FloatWindowBorder BorderMode="Bottom" Name="BorderBottom" Grid.Column="1" Grid.Row="2" />
                <Syncfusion:FloatWindowBorder BorderMode="RightBottom" Name="BorderRightBottom" Grid.Column="2" Grid.Row="2" />
            </Grid>
          </Border>
        </DockPanel>
      </AdornerDecorator>
    </ControlTemplate>
  </ResourceDictionary>
</Window.Resources>
 
<Grid>
  <Syncfusion:DockingManager x:Name="DockingManager" UseDocumentContainer="True" DockFill="True" FloatWindowTemplate="{StaticResource FloatWindowTemplate}">
    <ContentControl x:Name="contentcontrol" Syncfusion:DockingManager.Header="Window1" Syncfusion:DockingManager.State="Dock" />
    <ContentControl x:Name="contentcontrol2" Syncfusion:DockingManager.Header="Window2" Syncfusion:DockingManager.State="Dock"/>
    <ContentControl x:Name="contentcontrol3" Syncfusion:DockingManager.Header="Window3" Syncfusion:DockingManager.State="Dock"/>
  </Syncfusion:DockingManager>
</Grid>

 

Customizing float window of WPF DockingManager

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied