TabControl in TabControl alignment issue
Posted: 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.
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.
Code: Select all
<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>