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
1280
TabGroupPane style
posted

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?

XamDockManagerTestProject1.rar
Parents
  • 30945
    Verified Answer
    Offline posted

    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

    XamDockManagerTestProject1_1.zip
Reply Children