Hello,
I have tried a lot to make a new style for TabGroupPane, to get a desired look, but I couldn't succeed.Hope you can help me. Here is what I have so far, I will also attach a solution with the full code:
I am using a XamDockManager with a TabGroupPane to the left side, and to the right side I have XamDocManager.Panes with SplitPane, TabGroupPane and ContentPane inside it.
<igD:XamDockManager x:Name="XdMgrTest"> <igD:TabGroupPane x:Name="TbGrpPnExplorer" Style="{StaticResource XmDckMngPnCustomPimStyle}"/> <igD:XamDockManager.Panes> <igD:SplitPane igD:XamDockManager.InitialLocation="DockedRight" SplitterOrientation="Vertical" Width="200"> <igD:TabGroupPane Style="{StaticResource XmDckMngPnToolsStyle}" TabStripPlacement="Left"> <igD:ContentPane Header="Property" x:Name="CntPnTest1"> <igD:ContentPane.TabHeader> <Grid> <Grid.LayoutTransform> <RotateTransform Angle="90"/> </Grid.LayoutTransform> <Label Content="Property" Foreground="Indigo"/> </Grid> </igD:ContentPane.TabHeader> <Grid Background="Indigo"/> </igD:ContentPane>
....
</igD:TabGroupPane> </igD:SplitPane> </igD:XamDockManager.Panes> </igD:XamDockManager>
I used the above code with the following style to get the desired view.
<Style x:Key="XmDckMngPnToolsStyle" TargetType="{x:Type igD:TabGroupPane}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type igD:TabGroupPane}"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentTemplateSelector="{TemplateBinding SelectedContentTemplateSelector}" ContentTemplate="{TemplateBinding SelectedContentTemplate}" Content="{TemplateBinding SelectedContent}" /> <TabPanel Grid.Row="1" x:Name="PART_TabHeaderPanel" IsItemsHost="True" KeyboardNavigation.TabIndex="1"/> </Grid> ..... </ControlTemplate> </Setter.Value> </Setter> </Style>
So far so good.
This only works until I drag and move one or all of the panes. below you can see what happens, when I move the panes:
The TabHeader suddenly changes from being stacked vertically to being stacked horizontally.
So my question is, which style do I have to change to get the desired view, so the the TabHeaders will stay stacked vertically?
Hello Nawed,
Thank you for your post. I have been looking into the question that you are having and the headers orientation of the ContentPanes in the TabGroupPane is based on the TabStripPlacement property of the TabGroupPane. If you wish to have all the TabGroupPanes to have vertically stacked headers, I can suggest creating a style without key for the TabGroupPane and set its TabStripPlacement to Left. This way the style will apply for the TabnGroupPanes that are created by moving the ContentPanes. I have modified the sample application that you have sent to show how you can implement this. I have added the style for the TabGroupPane in DockManagerStyles.xaml file.
Please let me know if I can assist you with anything else.
Sincerely,
Krasimir, MCPD
Developer Support Supervisor - XAML
Infragistics
www.infragistics.com/support
Hello Krasimir,
Thank you for the answer.
Thank you for your reply. I am very glad that my suggestion was helpful for you. Please let me know if you need any further assistance on the matter.