Mlorism
Mlorism

Reputation: 61

How to center UserControl in a TabControl

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.

enter image description here

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>

Upvotes: 0

Views: 747

Answers (1)

SharpNip
SharpNip

Reputation: 360

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

  1. 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.
  2. 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.

Upvotes: 1

Related Questions