Tab Control Content Presenter gets Local Vertical Alignment Top instead of respecting the control template

26 Apr 2024, 15:39

Hello everyone, I am currently creating a template for TabControl and for some reason, there is a discrepancy between what is displayed on Blend and what is displayed in unreal.
This is the Control Template I have assigned to the TabControl :

<ControlTemplate TargetType="{x:Type TabControl}">
				<Grid KeyboardNavigation.TabNavigation="Local">
					<Grid.RowDefinitions>
						<RowDefinition Height="Auto" MinHeight="50" />
						<RowDefinition Height="*" />
					</Grid.RowDefinitions>
					<VisualStateManager.VisualStateGroups>
						<VisualStateGroup x:Name="CommonStates">
							<VisualState x:Name="Disabled">
								<Storyboard>
									<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
										<EasingColorKeyFrame KeyTime="0" Value="#FFAAAAAA" />
									</ColorAnimationUsingKeyFrames>
								</Storyboard>
							</VisualState>
						</VisualStateGroup>
					</VisualStateManager.VisualStateGroups>
					<TabPanel x:Name="HeaderPanel" Grid.Row="0" Panel.ZIndex="1" Margin="0,0,4,-1"
    IsItemsHost="True" KeyboardNavigation.TabIndex="1" Background="Transparent" />
					<Border x:Name="Border" Grid.Row="1" BorderThickness="0" KeyboardNavigation.TabNavigation="Local"  
							KeyboardNavigation.DirectionalNavigation="Contained" KeyboardNavigation.TabIndex="2" >
						<ContentPresenter x:Name="PART_SelectedContentHost" 
										  Margin="4" 
										  ContentSource="SelectedContent" 
										 HorizontalAlignment="Stretch"
										 VerticalAlignment="Stretch"/>
						
					</Border>
				</Grid>
</ControlTemplate>

When displayed in game, the content of the TabControl doesn't expand vertically as if it was VerticalAlignment=Top and, indeed, upon investigation on the Inspector, it looks like there is a local value attached as Top instead of stretched. see the image below.

I have tried both using VerticalAlignment={TemplateBinding VerticalContentAlignment} and not put any value. It always goes to Top after reimport + play in the engine.
Is there anything I might be missing here ?

29 Apr 2024, 16:03

Hi,

The PART_SelectedContentHost alignment is overriden by the selected TabItem Horizontal/VerticalContentAlignment properties of the tab as you can see in the WPF code here (we do the same): https://referencesource.microsoft.com/# ... rol.cs,576

So just set the VerticalContentAlignment="Stretch" to the TabItem and it should work.

Please let me know if you still find any trouble with it.

01 May 2024, 12:59

It was indeed what was missing.
I assumed the default behavior of the content would be to stretch but it is now working appropriately with the proper VerticalContentAlignment on TabItem's Style.
Thank you

wijeba3933 · Yesterday, 09:29

It seems like there might be an issue with the VerticalAlignment property in your Control Template for the TabControl. Have you tried explicitly setting the VerticalAlignment to Stretch for the content presenter within the Border elementtime card calculator?

Tab Control Content Presenter gets Local Vertical Alignment Top instead of respecting the control template Topic is solved

Tab Control Content Presenter gets Local Vertical Alignment Top instead of respecting the control template

Re: Tab Control Content Presenter gets Local Vertical Alignment Top instead of respecting the control template

Re: Tab Control Content Presenter gets Local Vertical Alignment Top instead of respecting the control template

Re: Tab Control Content Presenter gets Local Vertical Alignment Top instead of respecting the control template

Who is online