How to center UserControl in a TabControl

Question

My MainWindow is built with TabContol containing in each tab UserControl in xaml files. Opening specific UserControl is not a problem, but aligning it is. I was able to horizontally center content of tab but struggle to vertically do this same. I found out that the root problem is that UserControl don't take the whole free space (height) in the Tab. I tried to make main grid VerticalAlignment="Stretch" and "Center" but that didn't help. I could use margin with specific number or define row fixed hight but that will not work on every resolution and I don't want to write method in code behind but use the power of xaml. How can I force UserControl to take whole height in Tab and then vertically center it (it's important to do it for specific UserControl because others should have default position)?

ps. I'm using MetroWindow from MahApps.Metro.

MainWindow main Grid:

<Grid>
    <StackPanel>
        <TabControl ItemsSource="{Binding Tabs}"
                    SelectedIndex="0">
            <TabControl.Resources>
                <Style TargetType="{x:Type TabPanel}">
                    <Setter Property="HorizontalAlignment"
                            Value="Center" />
                </Style>
                <DataTemplate DataType="{x:Type VMod:LoginViewModel}">
                    <Pages:LoginView />
                </DataTemplate>
                <DataTemplate DataType="{x:Type VMod:AdminViewModel}">
                    <Pages:AdminView />
                </DataTemplate>
                <DataTemplate DataType="{x:Type VMod:ProductsViewModel}">
                    <Pages:ProductsView />
                </DataTemplate>
                <DataTemplate DataType="{x:Type VMod:DistributionViewModel}">
                    <Pages:DistributionView />
                </DataTemplate>
                <DataTemplate DataType="{x:Type VMod:SummaryViewModel}">
                    <Pages:SummaryView />
                </DataTemplate>
                <DataTemplate DataType="{x:Type VMod:SettingsViewModel}">
                    <Pages:SettingsView />
                </DataTemplate>
            </TabControl.Resources>

            <TabControl.ItemTemplate>
                <DataTemplate DataType="{x:Type inter:ITab}">
                    <TextBlock>
                        <Run Text="{Binding TabName}" />
                    </TextBlock>
                </DataTemplate>
            </TabControl.ItemTemplate>
        </TabControl>
    </StackPanel>
</Grid>

UserControl main Grid:

<Grid Background="LightBlue" 
      VerticalAlignment="Center"
      HorizontalAlignment="Center">

    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>     

        <Border Height="300"
                Width="300"
                Grid.Row="2"
                BorderBrush="LightGray"
                BorderThickness="1">
            <StackPanel HorizontalAlignment="Center">
                <iconPacks:PackIconRPGAwesome Kind="Honeycomb"
                                              HorizontalAlignment="Center"
                                              Width="60"
                                              Height="60"
                                              Margin="0, 0, 0, 0"/>
                <TextBlock HorizontalAlignment="Center"
                           Text="DistributionTool"
                           FontSize="20"
                           FontWeight="Bold"
                           Margin="5" />

                <Grid Width="200">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="auto"/>
                    </Grid.ColumnDefinitions>

                    <TextBox Grid.Column="0"
                             Margin="5"                                 
                             TextAlignment="Left" 
                             FontSize="15"/>
                    <iconPacks:PackIconMaterial Grid.Column="1" 
                                                Kind="AccountTie" 
                                                Width="20"
                                                Height="20"
                                                VerticalAlignment="Center"/>
                </Grid>

                <Grid Width="200">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="auto" />
                    </Grid.ColumnDefinitions>

                    <PasswordBox Grid.Column="0"
                                 Margin="5"                                     
                                 HorizontalContentAlignment="Left"
                                 FontSize="15"
                                 Style="{StaticResource Win8MetroPasswordBox}" />
                    <iconPacks:PackIconMaterial Grid.Column="1"
                                                Kind="Key"
                                                Width="20"
                                                Height="20"
                                                VerticalAlignment="Center" />
                </Grid>                   

                <Button Content="LOGIN"
                        Width="80"
                        metro:ControlsHelper.ContentCharacterCasing="Normal"
                        Margin="5"
                        Style="{StaticResource AccentedSquareButtonStyle}" />
            </StackPanel>
        </Border>           
</Grid>

Just to get a more clear idea of what you're looking to do, you wish to have the contents of your Tab fill up the whole vertical space of your window, and have the internal UserControl be centered to that tab? — SharpNip
That's right. I guess I miss some simple element but after many trials and errors still don't know how to do it. — Mlorism

SharpNip SharpNip · Accepted Answer · 2020-03-21T15:16:39

From what I gather, what you could try would be:

Remove the StackPanel in your MainWindow Grid. Unless you intend to have more than 1 child inside the stack panel (Other than your TabControl), it is useless.
Add VerticalAlignement="Stretch" to your TabControl. This will allow it to take up all the space it can vertically.

Then you should be pretty much set to go.

The reason why you shouldn't use a StackPanel unless you intend to stack items inside, as in

<StackPanel>
<Child1/>
<Child2/>
</StackPanel>

is that the StackPanel.Orientation property affects how things will appear inside, including the Alignement of each child. So Orientation="Vertical" (the default), affects the VerticalAlignement of its children. Same idea with Horizontal.

How to center UserControl in a TabControl

1 Answers