Restyle TabbedMdiContainer - Docking/MDI for WPF Forum

Posted 3 years ago by Oliver Rutsch

Version: 19.1.1

Platform: .NET 4.7

Environment: Windows 10 (64-bit)

Hi,

I'd like to restyle the tab-buttons in the docking window component in such a way, that they use the whole control size and have an equal width then.

So I mofified the docking:TabbedMdiHost style (from the styles package):

<Setter Property="TabControlStyle">
          <Setter.Value>
            <Style TargetType="docking:TabbedMdiContainerTabControl">
              <!--<Setter Property="TabCornerRadius" Value="10,10,0,0" />-->
              <Setter Property="TabBackground" Value="LightGray" />
              <Setter Property="TabBackgroundInactiveSelected" Value="White" />
              <Setter Property="TabBackgroundActiveSelected" Value="Red" />
              <Setter Property="TabBackgroundPointerOver" Value="Gray" />
              <Setter Property="Template">
                <Setter.Value>
                  <ControlTemplate TargetType="docking:AdvancedTabControl">
                    <Grid KeyboardNavigation.TabNavigation="Local">
                      <Grid.RowDefinitions>
                        <RowDefinition x:Name="RowDef0" Height="*" />
                        <RowDefinition x:Name="RowDef1" Height="Auto" />
                      </Grid.RowDefinitions>
                      <Grid.ColumnDefinitions>
                        <ColumnDefinition x:Name="ColDef0" Width="*" />
                        <ColumnDefinition x:Name="ColDef1" Width="Auto" />
                      </Grid.ColumnDefinitions>

                      <Rectangle x:Name="HeaderBackground" Grid.Row="1" Grid.ColumnSpan="2" Fill="{TemplateBinding HeaderBackground}" />

                      <Grid x:Name="HeaderPanel" Grid.Row="1" Panel.ZIndex="1" ClipToBounds="True" 
                              KeyboardNavigation.TabNavigation="Local" KeyboardNavigation.TabIndex="1">
                        <dockingPrimitives:NewTabButton x:Name="PART_NewTabButton" Panel.ZIndex="2" HorizontalAlignment="Left" Style="{TemplateBinding NewTabButtonStyle}"
								Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=HasNewTabButton, Converter={StaticResource BooleanToVisibilityConverter}}"
								TabStripPlacement="{TemplateBinding TabStripPlacement}" IsContentHorizontal="{TemplateBinding IsTabContentHorizontal}" Padding="{TemplateBinding TabPadding}"
								CornerRadius="{TemplateBinding TabCornerRadius}" Command="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=RequestNewTabCommand}">
                          <TextBlock Text="+" Opacity="0" />
                        </dockingPrimitives:NewTabButton>
                        <!--O. Rutsch: In diesem Presenter werden die Tab-Buttons angezeigt-->
                        <!--<ItemsPresenter/>-->
                        <UniformGrid IsItemsHost="True" Rows="1" />
                      </Grid>

Look at the end of the file: I've exchanged the ItemsPresenter with a UniformGrid and the tab-buttons are now equally spaced. This looks already fine but unfortunately I can't move or dock the tab-windows anymore. It looked that all docking functionality got lost here.

Any idea what to do?

Thanks and bye

Oliver

Comments (3)

Answer - Posted 3 years ago by Actipro Software Support - Cleveland, OH, USA

Hi Oliver,

Yes, there is a lot of drag/drop functionality located within the AdvancedTabPanel that is used by the control by default. You might be able to inherit that control and override its measure/arrange logic, but I don't believe that will work with drag/drop properly (at least where the tabs would be dropped) since there is internal code needed to support the animated tab movement.

That being said, I think you can still get things working how you wanted if you set TabbedMdiHost.TabOverflowBehavior="Shrink" and then add this Style to your Application.Resources:

<Style TargetType="docking:TabbedMdiContainer">
	<Setter Property="MinTabExtent" Value="3000" />
</Style>

That's basically saying to use very wide tab minimum widths and then Shrink mode will shrink them all down to fit in the available width.

Actipro Software Support

Posted 3 years ago by Oliver Rutsch

Yes, thank you. This looks not bad.

BTW: Is there a reason why there's no AdvancedTabPanel default style (which I may modify) in the style download? Or is this style in a different dll where you havn't access to the default style?

We have very heavy styled components in version 2014 and now I like to switch over to 2019. Especially the dock component is really hard work as the underlying components have changed so much.

Bye,

Oliver

Posted 3 years ago by Actipro Software Support - Cleveland, OH, USA

Hi Oliver,

AdvancedTabPanel is just a Panel-based element that does layout, so there is no Style for it. All styling of the tab control and its tab items is done against other controls like AdvancedTabControl, AdvancedTabItem, etc.

You mentioned you are working on v2019.1. You might want to move to v2020.1 since for that version we did a lot more with theming, creating a powerful theme generation framework. You can read our recent blog post for more details on that. I mention this because a lot of our default styles/templates changed in v2020.1 so I'd hate to see you do additional work down the road to get onto it.

Actipro Software Support

The latest build of this product (v24.1.1) was released 2 months ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.