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.
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:
Then set the TabHeaderTemplate on the ContentPane to that:
Very nice Template, it basically works really well!
However, I noticed that the close button is also shown in the files menu. This is not a real problem, but somehow the command target is lost. The following error appears in the output (in VS debug mode):
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='Infragistics.Windows.DockManager.PaneTabItem', AncestorLevel='1''. BindingExpression:Path=Pane; DataItem=null; target element is 'Button' (Name='closeBtn'); target property is 'CommandTarget' (type 'IInputElement')
As a effect, the closeButton does not work as intended. Is it possible to alter the template, so that the close button does not appear in the files menu?
Thanks,Patrick
Good point. I had forgotten that we use the tab related properties for the menu items as well. In that case the best option would be to use the TabHeaderSelector so that you can conditionally return this datatemplate when the container handed to the selector is the PaneTabItem. Alternatively you could try to use a findancestor binding to look for an ancestor menuitem and then hide the close button. e.g.
Ok so I've taken the original template along with the change discussed to hide it from the menu and added another trigger that would hide it from the tab item unless it was selected. These are handled in the triggers and are each commented so it is easy to modify/remove triggers.
<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> <!-- To only show it for things in the DocumentContentHost: --> <Trigger Property="igDock:XamDockManager.PaneLocation" Value="Document"> <Setter TargetName="closeBtn" Property="Visibility" Value="Visible" /> </Trigger> <!-- To hide it from the menu items in the TabGroupPane's Files List menu: --> <DataTrigger Binding="{Binding Path=Role, RelativeSource={RelativeSource AncestorType={x:Type MenuItem}}}" Value="SubmenuItem"> <Setter TargetName="closeBtn" Property="Visibility" Value="Collapsed" /> </DataTrigger> <!-- To only show it when the tab item is selected: --> <DataTrigger Binding="{Binding Path=IsSelected, FallbackValue=true, RelativeSource={RelativeSource AncestorType={x:Type igDock:PaneTabItem}}}" Value="False"> <Setter TargetName="closeBtn" Property="Visibility" Value="Collapsed" /> </DataTrigger> </DataTemplate.Triggers> </DataTemplate>
Thanks Andrew for the help. It worked.
How should i modify the DateTemplate provided so that only the selected TabItem has the close button?
D'OH! Never mind - found it. I just had a bad case of pastinginthewrongplacitis.
Andrew Smith"] Good point. I had forgotten that we use the tab related properties for the menu items as well. In that case the best option would be to use the TabHeaderSelector so that you can conditionally return this datatemplate when the container handed to the selector is the PaneTabItem. Alternatively you could try to use a findancestor binding to look for an ancestor menuitem and then hide the close button. e.g. <DataTrigger Binding="{Binding Path=Role, RelativeSource={RelativeSource AncestorType={x:Type MenuItem}}}" Value="SubmenuItem"> <Setter TargetName="closeBtn" Property="Visibility" Value="Collapsed" /> </DataTrigger>
Where would this DataTrigger go?