Category / Section
How to customize the header of native floatwindow in WPF DockingManager?
4 mins read
The style of Floatwindow Header can be customized based on the requirement, and the customized style can be accessed through NativeWindowStyle property of WPF DockingManager. For instance, we have added Refresh button in the header Style(“Header”) and bound the header style to the style of ContentControl in Template of NativeFloatWindow. The following code example explains the same,
Refresh button Template:
<ControlTemplate x:Key="RefreshKey" TargetType="{x:Type ToggleButton}">
<StackPanel>
<Border x:Name="brdBack" Width="15" Height="15" Margin="0,0,0,0" BorderThickness="1" Background="Transparent" BorderBrush="Transparent" >
<Path Name="pathButton" SnapsToDevicePixels="False" Stretch="Fill" StrokeThickness="1" Stroke="{TemplateBinding ToggleButton.Foreground}" Data="M6.3339996,3.6019864L12.67099,9.9400234 8.673996,9.9400234 8.673996,17.984999 16.054993,17.984999 16.054993,22.266001 4.3899994,22.266001 4.3899994,9.9400234 0,9.9400234z M14.825989,0L27.718994,0 27.718994,11.836994 32,11.836994 25.666,18.172987 19.328995,11.836994 23.435989,11.836994 23.435989,4.2809715 14.825989,4.2809715z" HorizontalAlignment="Center" VerticalAlignment="Center" Width="12" Height="11"/>
</Border>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="brdBack" Property="Background" Value="{StaticResource Default.ButtonOver}"/>
<Setter TargetName="brdBack" Property="BorderBrush" Value="{StaticResource Default.ButtonOverBorder}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Native FloatWindow Header Style:
<Style x:Key="Header" TargetType="{x:Type ContentControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ContentControl}">
<Border Name="borderTop" BorderBrush="#FFDEDEDE" >
<Border Name="borderWrap" BorderBrush="#FF595959" >
<Border.ContextMenu>
<Syncfusion:CustomContextMenu Name="PART_ContextMenu" Focusable="false" />
</Border.ContextMenu>
<DockPanel Name="MiddleHdrImg" LastChildFill="True"
Background="{StaticResource Aero.FloatHeaderMiddleBackgroundActive}">
<StackPanel DockPanel.Dock="Right" Orientation="Horizontal">
<ToggleButton x:Name="Restorebutton" Focusable="False" shell:WindowChrome.IsHitTestVisibleInChrome="True" Style="{StaticResource N_RestoreButton}" Margin="0,4,2,0" Padding="0" Command="Syncfusion:NativeFloatWindow.RestoreCommand"/>
<ToggleButton x:Name="m_button" Focusable="False" shell:WindowChrome.IsHitTestVisibleInChrome="True" Style="{StaticResource N_MaximizeButton}" Margin="0,4,2,0" Padding="0" Command="Syncfusion:NativeFloatWindow.MaximizeCommand"/>
<ToggleButton x:Name="m_RefreshButton" Command="{Binding RefreshCommand}" DataContext="{Binding DockingManager.DataContext, RelativeSource={RelativeSource AncestorType=Syncfusion:NativeFloatWindow}}" shell:WindowChrome.IsHitTestVisibleInChrome="True" Margin="0,4,2,0" Padding="0" Height="15" Width="15" VerticalAlignment="Top"
Template="{StaticResource RefreshKey}">
<ToggleButton.ToolTip>
<ToolTip Name="refreshtooltip">
<TextBlock Name="refreshtooltipText" Text="Refresh" />
</ToolTip>
</ToggleButton.ToolTip>
</ToggleButton>
<ToggleButton Name="button" Focusable="False" shell:WindowChrome.IsHitTestVisibleInChrome="True" Margin="3,4,0,0" Padding="0"
Command="Syncfusion:NativeFloatWindow.CloseCommand" Template="{Binding Path=(Syncfusion:NativeFloatWindow.DockingManager).(Syncfusion:DockingManager.CloseButtonTemplate),RelativeSource={RelativeSource AncestorType=Syncfusion:NativeFloatWindow}}">
<ToggleButton.ToolTip>
<ToolTip Name="tooltip">
<TextBlock Name="tooltipText" Text="{Binding Source={StaticResource ResourceWrapperKey}, Path=CloseButtonTooltipText}" />
</ToolTip>
</ToggleButton.ToolTip>
</ToggleButton>
</StackPanel>
<Border Name="Icon" DockPanel.Dock="Left" Margin="6,3,2,3" Width="16"
Background="{Binding Path=(Syncfusion:DockingManager.InternalDataContext).(Syncfusion:DockingManager.InternalDataContext).(Syncfusion:DockingManager.Icon)
, RelativeSource={RelativeSource FindAncestor
, AncestorType={x:Type Syncfusion:NativeFloatWindow}}}" />
<ContentPresenter Name="contentWraper" VerticalAlignment="Center" DockPanel.Dock="Left" HorizontalAlignment="Left"
TextBlock.Foreground="{StaticResource Aero.FloatWindowHeaderForeground}" IsHitTestVisible="True"
Content="{Binding Path=(Syncfusion:DockingManager.InternalDataContext).(Syncfusion:DockedElementTabbedHost.HostedElement).(Syncfusion:DockingManager.Header)
, RelativeSource={RelativeSource FindAncestor
, AncestorType={x:Type Syncfusion:NativeFloatWindow}}}" />
</DockPanel>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Background" SourceName="Icon" Value="{x:Null}">
<Setter TargetName="Icon" Property="Visibility" Value="Collapsed"/>
</Trigger>
<DataTrigger Binding="{Binding Path=(Syncfusion:NativeFloatWindow.DockingManager).(Syncfusion:DockingManager.IsTouchEnabled),RelativeSource={RelativeSource AncestorType=Syncfusion:NativeFloatWindow}}" Value="True">
<Setter Property="FontSize" Value="18"/>
</DataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=(Syncfusion:NativeFloatWindow.MaximizeButtonEnabled),RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type Syncfusion:NativeFloatWindow}}}" Value="True" />
<Condition Binding="{Binding Path=(Syncfusion:NativeFloatWindow.WindowState),RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type Syncfusion:NativeFloatWindow}}}" Value="Maximized" />
</MultiDataTrigger.Conditions>
<Setter TargetName="m_button" Property="Visibility" Value="Collapsed"/>
<Setter TargetName="Restorebutton" Property="Visibility" Value="Visible" />
<Setter TargetName="m_RefreshButton" Property="Visibility" Value="Visible" />
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=(Syncfusion:NativeFloatWindow.MaximizeButtonEnabled),RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type Syncfusion:NativeFloatWindow}}}" Value="True" />
<Condition Binding="{Binding Path=(Syncfusion:NativeFloatWindow.WindowState),RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type Syncfusion:NativeFloatWindow}}}" Value="Normal" />
</MultiDataTrigger.Conditions>
<Setter TargetName="m_button" Property="Visibility" Value="Visible"/>
<Setter TargetName="m_RefreshButton" Property="Visibility" Value="Visible" />
<Setter TargetName="Restorebutton" Property="Visibility" Value="Collapsed" />
</MultiDataTrigger>
<DataTrigger Binding="{Binding Path=(Syncfusion:NativeFloatWindow.MaximizeButtonEnabled),RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type Syncfusion:NativeFloatWindow}}}" Value="False">
<Setter TargetName="m_button" Property="Visibility" Value="Collapsed" />
<Setter TargetName="m_RefreshButton" Property="Visibility" Value="Visible" />
<Setter TargetName="Restorebutton" Property="Visibility" Value="Collapsed" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=(Syncfusion:DockingManager.InternalDataContext).(Syncfusion:DockedElementTabbedHost.HostedElement).(Syncfusion:DockingManager.CanDocument)
, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Syncfusion:NativeFloatWindow}}}" Value="False" >
<Setter TargetName="PART_ContextMenu" Property="IsEnabledTabbedMenuItem" Value="False" />
</DataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=(Syncfusion:DockingManager.InternalDataContext).(Syncfusion:DockedElementTabbedHost.HostedElement).(Syncfusion:DockingManager.CanClose)
, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Syncfusion:NativeFloatWindow}}}" Value="False" />
<Condition Binding="{Binding Path=(Syncfusion:DockingManager.InternalDataContext).(Syncfusion:DockedElementTabbedHost.ShowTabs)
, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Syncfusion:NativeFloatWindow}}}"
Value="False" />
</MultiDataTrigger.Conditions>
<Setter TargetName="PART_ContextMenu" Property="IsEnabledHiddenMenuItem" Value="False" />
<Setter TargetName="button" Property="IsEnabled" Value="False" />
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=(Syncfusion:NativeFloatWindow.DockingManager).(Syncfusion:DockingManager.CloseTabs),
RelativeSource={RelativeSource AncestorType={x:Type Syncfusion:NativeFloatWindow}}}" Value="CloseActive" />
<Condition Binding="{Binding Path=(Syncfusion:DockingManager.InternalDataContext).(Syncfusion:DockingManager.InternalDataContext).(Syncfusion:DockingManager.CanClose)
, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Syncfusion:NativeFloatWindow}}}" Value="False" />
<Condition Binding="{Binding Path=(Syncfusion:DockingManager.InternalDataContext).(Syncfusion:DockedElementTabbedHost.ShowTabs)
, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Syncfusion:NativeFloatWindow}}}"
Value="True" />
</MultiDataTrigger.Conditions>
<Setter TargetName="PART_ContextMenu" Property="IsEnabledHiddenMenuItem" Value="False" />
<Setter TargetName="button" Property="IsEnabled" Value="False" />
</MultiDataTrigger>
<DataTrigger Binding="{Binding Path=(PrimaryElement).(Syncfusion:DockingManager.NoHeader)
, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Syncfusion:NativeFloatWindow}}}"
Value="True" >
<Setter TargetName="PART_ContextMenu" Property="Visibility" Value="Visible"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsMultiHostsContainer
, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Syncfusion:NativeFloatWindow}}}"
Value="True" >
<Setter TargetName="contentWraper" Property="Visibility" Value="Hidden"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsKeyboardFocusWithin
, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Syncfusion:NativeFloatWindow}}}"
Value="False" >
<Setter TargetName="MiddleHdrImg" Property="Background" Value="{StaticResource Aero.FloatHeaderMiddleBackgroundInactive}" />
</DataTrigger>
<Trigger SourceName="MiddleHdrImg" Property="Visibility" Value="Visible">
<Setter TargetName="MiddleHdrImg" Property="Background"
Value="{Binding Path=(Syncfusion:NativeFloatWindow.DockingManager).(Syncfusion:DockingManager.FloatWindowHeaderBackground), RelativeSource={RelativeSource AncestorType={x:Type Syncfusion:NativeFloatWindow}}}" />
<Setter TargetName="contentWraper" Property="TextBlock.Foreground"
Value="{Binding Path=(Syncfusion:NativeFloatWindow.DockingManager).(Syncfusion:DockingManager.FloatWindowHeaderForeground), RelativeSource={RelativeSource AncestorType={x:Type Syncfusion:NativeFloatWindow}}}" />
</Trigger>
<DataTrigger Binding="{Binding Path=IsKeyboardFocusWithin, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Syncfusion:NativeFloatWindow}}}"
Value="True">
<Setter TargetName="MiddleHdrImg" Property="Background"
Value="{Binding Path=(Syncfusion:NativeFloatWindow.DockingManager).(Syncfusion:DockingManager.FloatWindowSelectedHeaderBackground), RelativeSource={RelativeSource AncestorType={x:Type Syncfusion:NativeFloatWindow}}}" />
<Setter TargetName="contentWraper" Property="TextBlock.Foreground"
Value="{Binding Path=(Syncfusion:NativeFloatWindow.DockingManager).(Syncfusion:DockingManager.FloatWindowSelectedHeaderForeground), RelativeSource={RelativeSource AncestorType={x:Type Syncfusion:NativeFloatWindow}}}" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsMouseOver
, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Syncfusion:NativeFloatWindow}}}"
Value="True" >
<Setter TargetName="MiddleHdrImg" Property="Background"
Value="{Binding Path=(Syncfusion:NativeFloatWindow.DockingManager).(Syncfusion:DockingManager.FloatWindowMouseOverHeaderBackground), RelativeSource={RelativeSource AncestorType={x:Type Syncfusion:NativeFloatWindow}}}" />
<Setter TargetName="contentWraper" Property="TextBlock.Foreground"
Value="{Binding Path=(Syncfusion:NativeFloatWindow.DockingManager).(Syncfusion:DockingManager.FloatWindowMouseOverHeaderForeground), RelativeSource={RelativeSource AncestorType={x:Type Syncfusion:NativeFloatWindow}}}" />
</DataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=(Syncfusion:NativeFloatWindow.DockingManager).(Syncfusion:DockingManager.IsEnableHotTracking),
RelativeSource={RelativeSource AncestorType={x:Type Syncfusion:NativeFloatWindow}}}" Value="True" />
<Condition Binding="{Binding Path=IsMouseOver
, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Syncfusion:NativeFloatWindow}}}"
Value="True" />
<Condition Binding="{Binding Path=IsKeyboardFocusWithin
, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Syncfusion:NativeFloatWindow}}}"
Value="False" />
</MultiDataTrigger.Conditions>
<Setter TargetName="MiddleHdrImg" Property="Background"
Value="{Binding Path=(Syncfusion:NativeFloatWindow.DockingManager).(Syncfusion:DockingManager.FloatWindowMouseOverHeaderBackground), RelativeSource={RelativeSource AncestorType={x:Type Syncfusion:NativeFloatWindow}}}" />
<Setter TargetName="contentWraper" Property="TextBlock.Foreground"
Value="{Binding Path=(Syncfusion:NativeFloatWindow.DockingManager).(Syncfusion:DockingManager.FloatWindowMouseOverHeaderForeground), RelativeSource={RelativeSource AncestorType={x:Type Syncfusion:NativeFloatWindow}}}" />
</MultiDataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Nativefloat window style:
<Style x:Key="ModifiedNativeWindowStyle" TargetType="{x:Type Syncfusion:NativeFloatWindow}">
<Setter Property="WindowStyle" Value="None"/>
<Setter Property="shell:WindowChrome.WindowChrome">
<Setter.Value>
<shell:WindowChrome ResizeBorderThickness="7" CornerRadius="0" CaptionHeight="20" GlassFrameThickness="0">
</shell:WindowChrome>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ContentControl}">
<AdornerDecorator>
<DockPanel Focusable="False" LastChildFill="True" >
<Border Name="FloatWindowOutBorder" Focusable="False" BorderBrush="{StaticResource Aero.FloatHeaderBorderBrush}" BorderThickness="{StaticResource SingleThickness}" Background="{StaticResource Default.WindowBackground}" >
<Border.Style>
<Style TargetType="{x:Type Border}">
<Setter Property="BorderThickness" Value="0"/>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=WindowState}" Value="Maximized">
<Setter Property="Margin" Value="8,5,2,0"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<Grid Focusable="False">
<Grid.RowDefinitions>
<RowDefinition Name="TopRow" Style="{StaticResource RowDefinitionStyle}" />
<RowDefinition Height="*" />
<RowDefinition Name="BottomRow" Height="4" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Name="LeftCol" Width="4" />
<ColumnDefinition Width="*" />
<ColumnDefinition Name="RightCol" Width="4" />
</Grid.ColumnDefinitions>
<ContentControl Focusable="False" Style="{StaticResource LeftTop}" Name="BorderLeftTop" Grid.Column="0" Grid.Row="0" />
<Border x:Name="Part_BorderMenu" Grid.Column="1" Grid.Row="0" >
<Border.ContextMenu>
<Syncfusion:CustomContextMenu x:Name="Part_CustomContextMenu" Focusable="false" ItemContainerStyle="{StaticResource VistaCustomMenuItemStyle}"/>
</Border.ContextMenu>
</Border>
<ContentControl Focusable="False" Style="{StaticResource Header}" Name="BorderHeader" Grid.Column="1" Grid.Row="0" Content="{Binding Path=Title,RelativeSource={RelativeSource TemplatedParent}}"/>
<ContentControl Focusable="False" Style="{StaticResource RightTop}" Name="BorderRightTop" Grid.Column="2" Grid.Row="0" />
<ContentControl Focusable="False" Style="{StaticResource 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}" />
<ContentControl Focusable="False" Style="{StaticResource Right}" Name="BorderRight" Grid.Column="2" Grid.Row="1" />
<ContentControl Focusable="False" Style="{StaticResource LeftBottom}" Name="BorderLeftBottom" Grid.Column="0" Grid.Row="2" />
<ContentControl Focusable="False" Style="{StaticResource Bottom}" Name="BorderBottom" Grid.Column="1" Grid.Row="2" />
<ContentControl Focusable="False" Style="{StaticResource RightBottom}" Name="BorderRightBottom" Grid.Column="2" Grid.Row="2" />
</Grid>
</Border>
</DockPanel>
</AdornerDecorator>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
MainWindow.xaml:
<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf" x:Class="DockingManager_135383.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:DockingManager_135383"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<local:ViewModel/>
</Window.DataContext>
<Grid>
<syncfusion:DockingManager UseNativeFloatWindow="True" UseDocumentContainer="True" NativeWindowStyle="{StaticResource ModifiedNativeWindowStyle}">
<ContentControl syncfusion:DockingManager.Header="ToolBox" syncfusion:DockingManager.DesiredWidthInFloatingMode="400" syncfusion:DockingManager.DesiredWidthInDockedMode="200" syncfusion:DockingManager.SideInDockedMode="Left"/>
<ContentControl syncfusion:DockingManager.Header="Solution Explorer" syncfusion:DockingManager.SideInDockedMode="Right" syncfusion:DockingManager.DesiredWidthInDockedMode="200" syncfusion:DockingManager.DesiredWidthInFloatingMode="400"/>
<ContentControl syncfusion:DockingManager.Header="Mainwindow.xaml" syncfusion:DockingManager.State="Document"/>
<ContentControl syncfusion:DockingManager.Header="Output" syncfusion:DockingManager.SideInDockedMode="Bottom" syncfusion:DockingManager.DesiredWidthInFloatingMode="400" syncfusion:DockingManager.DesiredWidthInDockedMode="200"/>
</syncfusion:DockingManager>
</Grid>
</Window>
Refresh command:
public class ViewModel
{
private ICommand refreshCommand;
public ICommand RefreshCommand
{
get
{
if (refreshCommand == null)
{
refreshCommand = new DelegateCommand(Refresh, CanRefresh);
}
return refreshCommand;
}
set { refreshCommand = value; }
}
internal bool CanRefresh(object arg)
{
return true;
}
public void Refresh(object obj)
{
MessageBox.Show("Refresh clicked");
}
}
Conclusion
I hope you enjoyed learning about how to customize the header of the native floatwindow in WPF DockingManager.
You can refer to our WPF DockingManager feature tour page to know about its other groundbreaking feature representations and documentation. You can also explore our WPF DockingManage example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
