TabControl in TabControl alignment issue

mdube · 21 Aug 2020, 18:58

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.

21 Aug 2020, 19:31

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.

TabControl in TabControl alignment issue Topic is solved

TabControl in TabControl alignment issue

Re: TabControl in TabControl alignment issue

Who is online