Page 1 of 1

TabControl in TabControl alignment issue

Posted: 21 Aug 2020, 18:58
by mdube
When upgrading from 2.2.4 to 3.0.4 our pages where we have nested TabControls started to show alignment issues. I was able to simplify to this, where I have two nested tab controls, with tabs (that should be) positioned to the right.
<Grid
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Grid.Resources>
    <Geometry x:Key="name_icon">M7,87.24S164.317,41.759,300.5,29c0,0,53.045,9.816,75.5,147,24.908,152.175,134,203.35,134,203.35S417.951,409.361,328,451l-85-3,44,21-75,23s-84.943-51.492-106.829-231.86C84.814,92.371,7,87.24,7,87.24Zm93.183,14.56S220.326,73.9,285.32,64.49l11.133,14.56s-88.445,9.616-185.161,38.22Zm23.29,44.59s124.106-30.9,189.1-40.31l5.061,15.47s-90.385,12.616-187.1,41.22Zm16.193,53.41s122.07-35.9,187.064-45.31l3.037,16.38s-89.337,17.616-186.053,46.22Zm11.519,55.74s113.1-34.141,186.246-49.05L340,221s-90.284,23.4-187,52ZM236,422l-27.911-14.23S243.012,367.4,262,343c0,0-58.369-14.412-92.093-23.05L186.1,295.38s36.425,14.881,88.881,30.31c0,0,28.218-37.883,41.507-61.43l29.35,15.47s-27.443,24.5-48.616,52.97c0,0,54.03,12.729,91.954,15.39l-16.193,22.75S304.567,355.757,285,350C285,350,263.326,377.415,236,422z</Geometry>
    <Style TargetType="TabItem">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="TabItem">
            <Grid>
              <Grid>
                <Border Name="Border" BorderThickness="2" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="0">
                  <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center"
                                    ContentSource="Header"/>
                </Border>
              </Grid>
            </Grid>

          </ControlTemplate>
        </Setter.Value>
      </Setter>
      <!--
      <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
      <Setter Property="VerticalContentAlignment" Value="Stretch"/>
      -->
    </Style>
  </Grid.Resources>

  <Grid>
    <TabControl Padding="0" TabStripPlacement="Right" Background="{x:Null}">
      <TabControl.Resources>
        <Style TargetType="{x:Type TabPanel}">
          <Setter Property="HorizontalAlignment" Value="Center" />
        </Style>

      </TabControl.Resources>


      <TabItem>
        <TabItem.Header>
          <Grid RenderTransformOrigin="0.5,0.5">
            <Path Data="{StaticResource name_icon}" Height="42" Width="42" Stretch="Fill" Fill="#FFE0E1EC" RenderTransformOrigin="0.5,0.5"/>
          </Grid>
        </TabItem.Header>

        <TabControl Padding="0" TabStripPlacement="Right" Background="{x:Null}">
          <TabControl.Resources>
            <Style TargetType="{x:Type TabPanel}">
              <Setter Property="VerticalAlignment" Value="Center" />
            </Style>

          </TabControl.Resources>
          <TabItem>
            <TabItem.Header>
              <Grid RenderTransformOrigin="0.5,0.5">
                <Path Data="{StaticResource name_icon}" Height="42" Width="42" Stretch="Fill" Fill="#FFE0E1EC" RenderTransformOrigin="0.5,0.5"/>
              </Grid>
            </TabItem.Header>


          </TabItem>

          <TabItem RenderTransformOrigin="0.5,0.5">
            <TabItem.Header>
              <Grid RenderTransformOrigin="0.5,0.5">
                <Path Data="{StaticResource name_icon}" Height="42" Width="42" Stretch="Fill" Fill="#FFE0E1EC" RenderTransformOrigin="0.5,0.5"/>
              </Grid>
            </TabItem.Header>

          </TabItem>

          <TabItem RenderTransformOrigin="0.5,0.5">
            <TabItem.Header>
              <Grid RenderTransformOrigin="0.5,0.5">
                <Path Data="{StaticResource name_icon}" Height="42" Width="42" Stretch="Fill" Fill="#FFE0E1EC" RenderTransformOrigin="0.5,0.5"/>
              </Grid>
            </TabItem.Header>

          </TabItem>
        </TabControl>

      </TabItem>
      <TabItem>
        <TabItem.Header>
          <Grid RenderTransformOrigin="0.5,0.5">
            <Path Data="{StaticResource name_icon}" Height="42" Width="42" Stretch="Fill" Fill="#FFE0E1EC" RenderTransformOrigin="0.5,0.5"/>
          </Grid>
        </TabItem.Header>


      </TabItem>
    </TabControl>
  </Grid>
</Grid>
Uncomment the HorizontalContentAlignment and VerticalContentAlignment setters and both tab sets will be properly placed to the right. Is it because the default value for those is incorrect or simply that we must specify those? I'm asking since with 2.2.x the alignment was correct without specifying.

Re: TabControl in TabControl alignment issue

Posted: 21 Aug 2020, 19:31
by sfernandez
You are defining a local style for the TabItem, so only the properties specified in that local style will be applied unless you use BasedOn.
<Style TargetType="TabItem" BasedOn="{StaticResource {x:Type TabItem}}">
This will extend the local style with the properties of the Application theme. If you are using our NoesisTheme then HorizontalContentAligment and VerticalContentAlignment are correctly set to Stretch for the TabItem.

In 3.0 we made changes to the internal default styles as explained in our documentation.