Forums Ultimate UI for WPF
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Joe
170
How do I add a close button to the header of a ContentPane
posted

By default, the TabGroupPane within the DocumentContentHost shows a common Close (little x) button at the far right, which when clicked closes the currently active ContentPane.  How do we change this so the Header within each ContentPanel has the Close button as well?

 If this is possible using styles or templates, a detailed example would be much appreciated.

Parents
  • 54937
    Verified Answer
    Offline posted

    When a ContentPane is within a DocumentContentHost it doesn't show a header so you''re probably referring to the tab item, which is actually an instance of a PaneTabItem. I can think of a couple of options. You can retemplate the PaneTabItem so that it contains a Button whose command is ContentPaneCommands.Close with a CommandTarget of its Pane property. Another approach would be to set the TabHeaderTemplate to a DataTemplate that contains a button with the same command(target) I mentioned for the previous approach.

    e.g. The datatemplate could be something like:

                <DataTemplate x:Key="tabItemHeaderWithClose">
                    <DockPanel x:Name="pnl">
                        <Button x:Name="closeBtn"
    DockPanel.Dock="Right"
                                Visibility="Collapsed"
                                Margin="3,3,0,3"
    Command="{x:Static igDock:ContentPaneCommands.Close}"
                                CommandTarget="{Binding Path=Pane,RelativeSource={RelativeSource AncestorType={x:Type igDock:PaneTabItem}}}"
    Style="{DynamicResource {x:Static igDock:TabGroupPane.DocumentCloseButtonStyleKey}}" 
    />
                        <TextBlock Text="{Binding}" />
                    </DockPanel>
                    <DataTemplate.Triggers>
                        <Trigger Property="igDock:XamDockManager.PaneLocation" Value="Document">
                            <Setter TargetName="closeBtn" Property="Visibility" Value="Visible" />
                        </Trigger>
                    </DataTemplate.Triggers>
                </DataTemplate>

    Then set the TabHeaderTemplate on the ContentPane to that:

        <igDock:ContentPane 
            Header="A document" 
            TabHeaderTemplate="{StaticResource tabItemHeaderWithClose}" />
Reply Children