Edit Floating Window close button

Question

I am wondering is it possible to change the close button on a floating window in wpf? I currently have it like a windows close with white cross and red background. I also have an image of a black cross and wondering is it possible to take off teh red background and white cross and replace it with my image?

    <syncfusion:DockingManager x:Name="DockingManager"
                           PersistState="True"
                           UseDocumentContainer="True"
                           Margin="0,0,0,0"
                           syncfusion:SkinManager.ActiveColorScheme="#E7E7E7"
                           HeaderForeground="Black"
                           SelectedHeaderBackground="{DynamicResource selectedHeaderBackground}"
                           syncfusion:DockingManager.DesiredHeightInFloatingMode="27"
                           syncfusion:DockingManager.DesiredHeightInDockedMode="27"
                           FloatWindowMouseOverHeaderBackground="#F6CD1D"
                           FloatWindowHeaderBackground="#F6CD1D"
                           HeaderForegroundSelected="Black"
                           TabItemBackgroundSelected="{DynamicResource headerBackground}"
                           TabPanelBackground="#FFE7E7E7"
                           SidePanelBackground="White" 
                           TabItemsForeground="{DynamicResource {x:Static SystemColors.ActiveCaptionTextBrushKey}}" 
                           Background="White" 
                           FloatWindowHeaderForeground="{DynamicResource headerBackground}"
                           TabItemsBackground="{DynamicResource headerBackground}" 
                           FloatWindowSelectedHeaderForeground="{DynamicResource headerBackground}" 
                           FloatWindowMouseOverHeaderForeground="{DynamicResource headerBackground}" 
                           HeaderBorderBrush="{x:Null}"
                           OpacityMask="{DynamicResource headerBackground}" 
                           TabItemsBorderBrush="{DynamicResource headerBackground}" 
                           FloatWindowSelectedHeaderBackground="{DynamicResource headerBackground}"
                           HeaderBackground="{DynamicResource headerBackground}" 
                           TabItemForegroundSelected="#FF4A515A">
    <syncfusion:DockingManager.SideItemsBorderBrush>
        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#FFEFEEEE" Offset="0"/>
            <GradientStop Color="#E7000000"/>
        </LinearGradientBrush>
    </syncfusion:DockingManager.SideItemsBorderBrush>
    <dockWindow:LocationMap x:Name="Locationmap"
                            syncfusion:DockingManager.DesiredHeightInDockedMode="100"
                            Background="White"
                            syncfusion:DockingManager.SideInDockedMode="Left"
                            syncfusion:DockingManager.State="Dock"
                            syncfusion:DockingManager.DesiredWidthInDockedMode="300" FontWeight="Bold" FontSize="10.667">
        <syncfusion:DockingManager.HeaderTemplate>
            <DataTemplate>
                <DockPanel>
                    <Image Source="Images/dragger.png" Height="20" Width="5" HorizontalAlignment="Left"/>
                    <Image Source="Images/Earth.png" Height="15" Width="15" VerticalAlignment="Center" HorizontalAlignment="Left"/>
                    <TextBlock Text="Location Map" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="2"/>
                </DockPanel>
            </DataTemplate>
        </syncfusion:DockingManager.HeaderTemplate>
        <dockWindow:LocationMap.Foreground>
            <ImageBrush />
        </dockWindow:LocationMap.Foreground>
    </dockWindow:LocationMap>
    <dockWindow:Tornado x:Name="TornadoDiagram"
                  syncfusion:DockingManager.SideInDockedMode="Right"
                  syncfusion:DockingManager.State="Dock" 
                  syncfusion:DockingManager.DesiredWidthInDockedMode="400"
                  syncfusion:DockingManager.DesiredHeightInDockedMode="200" FontWeight="Bold">
        <syncfusion:DockingManager.HeaderTemplate>
            <DataTemplate>
                <DockPanel>
                    <Image Source="Images/dragger.png" Height="20" Width="5" HorizontalAlignment="Left"/>
                    <Image Source="Images/Tornado1.png" Height="15" Width="15" VerticalAlignment="Center" HorizontalAlignment="Left"/>
                    <TextBlock Text="Tornado Diagram" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="2"/>
                </DockPanel>
            </DataTemplate>
        </syncfusion:DockingManager.HeaderTemplate>
    </dockWindow:Tornado>
    <dockWindow:Cdf x:Name="CdfDiagram"
                  syncfusion:DockingManager.SideInDockedMode="Bottom"
                  syncfusion:DockingManager.State="Dock"
                  syncfusion:DockingManager.TargetNameInDockedMode="TornadoDiagram"
                  syncfusion:DockingManager.DesiredWidthInDockedMode="400"
                  syncfusion:DockingManager.DesiredHeightInDockedMode="200" FontWeight="Bold" >
        <syncfusion:DockingManager.HeaderTemplate>
            <DataTemplate>
                <DockPanel>
                    <Image Source="Images/dragger.png" Height="20" Width="5" HorizontalAlignment="Left" Margin="1"/>
                    <Image Source="Images/CDF1.png" Height="15" Width="15" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="1"/>
                    <TextBlock Text="CDF" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="2"/>
                    <Image Source="Images/dragger.png" Height="20" Width="5" HorizontalAlignment="Right" Margin="1"/>
                </DockPanel>
            </DataTemplate>
        </syncfusion:DockingManager.HeaderTemplate>
    </dockWindow:Cdf>

Ryan Archibald Ryan Archibald · Accepted Answer · 2015-10-19T09:28:15

So the best way to do this is to create custom windows yourself and then this allows you to create the window exactly how you want it. It's bit longer than a simple change of one thing in the XAML but it works

Edit Floating Window close button

1 Answers