How do I add a close button to the header of a ContentPane

170

Joe posted over 16 years ago

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 Andrew Smith [Infragistics] posted over 16 years ago

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}" />
Cancel
Reply

Reject Answer

Cancel

Reply

170

Joe posted over 15 years ago in reply to Andrew Smith [Infragistics]

Thanks for the DataTemplate solution - that works great. We ended up purchasing Licenses for the WPF suite, and the prompt assistance from Infragistics was definitely a factor.

We have tasks being run in each of these tabs, and the client would like each tab to visually indicate that such a task is running and when its done running the task. To do this, I modified the DataTemplate to include a WPF ProgressBar control, whose state reflects the running task. This works fine when the tab is the active pane, and the ProgressBar displays correctly. However, when you switch to another tab, the ProgressBar goes back to looking empty and is not updated at all. In other words, only the ProgressBar in the header of the active tab displays correctly, and the ProgressBars in all other tabs display empty.

This is of course not useful, as it is the status of inactive tabs that needs to be displayed.

Would you have a fix for this, or an alternate suggestion to display a working ProgressBar or an animated icon in the header of an inactive ContentPane?

Also, could you provide an example of the alternative approach you've mentined, namely "You can retemplate the PaneTabItem so that it contains a Button whose command is ContentPaneCommands.Close with a CommandTarget of its Pane property."?

Best regards, and thanks in advance.
Cancel
Reply

Cancel

Children

54937

Offline Andrew Smith [Infragistics] posted over 15 years ago in reply to Joe

I'm not sure I understand why the datatemplate would behave one way or the other based on the selected state. Can you provide an example that shows that problem? With regards to the alternate approach, basically you would take the Style for the PaneTabItem or the ControlTemplate keyed with either PaneTabItem.DockableTabItemTemplateKey, PaneTabItem.DocumentTabItemTemplateKey and/or PaneTabItem.UnpinnedTabItemTemplateKey and modify the template such that it includes a button similar to that of the datatemplate approach. The xaml files are installed with the product in the DefaultStyles directory.
Cancel
Reply

Cancel