Hi,
I've been looking for a way to customize the tab header, found few posts about that but no clear answer.
I'm using Infragistics WPF 2016.1 version, XamDockManager, and when adding tabs, I want to achieve the following things:
1. Have a X button to close the tab on the tab itself (just like any browser).
2. Have a different appearance (background/foreground/other) based on the type of the tab. I'm adding tabs at run time and at this point I 'know' the type, so I would like to set the tab header per each tab accordingly.
Thanks.
Hello eligazit,
1. In order to add a close Button to all PaneTabItems, an approach I can suggest you is to set the TabHeaderTemplate property of the ContentPane element within a Style.
<Style TargetType="igDock:ContentPane"> <Setter Property="TabHeaderTemplate"> <Setter.Value> <DataTemplate> ... Text and close Button here ... </DataTemplate> </Setter.Value> </Setter></Style>
2. In order to set the Background and Foreground of the PaneTabItems, you can simply set the Background property of the PaneTabItem and set the Foreground property of the element that is responsible for the text (for example TextBlock) from the template above.
I have attached a sample application, that demonstrates the behavior from above. For more detailed information on this approach, you can take a look at the following thread.
If you have any further questions, please let me know.
Thanks, I've managed to make the first request (close button) works.
however, I'm having problems in the 2nd option - the background is ok only when the tab is not selected. when it is selected the style changes. I could not find the matching style key for the selected tab item, how can I find it?
SelectedTabHeaderTemplate ?
TabHeaderTemplateSelection?
... other guesses....?
Thanks
After testing for the missing Background behavior when the tab is selected with the sample from my initial reply, I was not able to reproduce it. Would you please modify the sample, so the issue is isolated and reproduced and send it back to me? Having this information will help me further investigate this matter for you.
You can always set the Background of a PaneTabItem whenever it is selected by using a Style Trigger:
<Style TargetType="igDock:PaneTabItem"> <Style.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter Property="Background" Value="Aqua" /> </Trigger> </Style.Triggers></Style>
If you have any questions, please let me know.
I've tried to add a small image to the tab-header template, which is different between each tab type, it works fine in the same manner you provided the background, but when the tab is selected, the image disappear, I've modified your example to show this.
you are right about the background - it stays the same even when selected.
I've manged to make it work by using data trigger and a convertor:
<Setter Property="Source" TargetName="tabImage" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Custom:PaneTabItem}},Converter={StaticResource imageConv}}" />
anyhow, you approach is much better, so I've fixed it,
Thanks!
In order to visualize the respective image for both states of the PaneTabItem (selected and not selected), you will also have to get both ContentPresenter elements that are responsible for visualizing the content of the PaneTabItem depending on whether it is selected or not. These two ContentPresenters contain a copy of the tabImage you have created and show their own copy if the tab is in the state they are responsible for.
In the sample application you have provided, you get only one of the images (the first one that GetDescendantFromName finds). By getting the ContentPresenters I mentioned above, we can get both Images and set the Source property to both of them (instead to only one of them). This way the image you are using will be visible at all time regardless of the PaneTabItem's state.
var cp = contentPresenter = Infragistics.Windows.Utilities.GetDescendantFromName(tabItem, "NormalContent") as ContentPresenter;var imgNormalState = Infragistics.Windows.Utilities.GetDescendantFromName(cp, "tabImage") as Image; var cpBold = contentPresenter = Infragistics.Windows.Utilities.GetDescendantFromName(tabItem, "NormalContentBold") as ContentPresenter;var imgBoldState = Infragistics.Windows.Utilities.GetDescendantFromName(cpBold, "tabImage") as Image;...imgNormalState.Source = logo;imgBoldState.Source = logo;
var cpBold = contentPresenter = Infragistics.Windows.Utilities.GetDescendantFromName(tabItem, "NormalContentBold") as ContentPresenter;var imgBoldState = Infragistics.Windows.Utilities.GetDescendantFromName(cpBold, "tabImage") as Image;...imgNormalState.Source = logo;imgBoldState.Source = logo;
I have modified the sample you have provided with the approach from above.