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