如何在 TabControl 中将 UserControl 居中

Question

我的 MainWindow 是用 xaml 文件中的每个选项卡 UserControl 中包含的 TabContol 构建的。打开特定的 UserControl 不是问题，但对齐它是问题。我能够水平居中选项卡的内容，但很难垂直地做同样的事情。我发现根本问题是 UserControl 没有在选项卡中占用整个 free space （高度）。我试图使主网格 VerticalAlignment="Stretch" 和 "Center" 但这没有帮助。我可以使用特定数字的边距或定义行固定高度，但这不适用于所有分辨率，我不想在代码后面编写方法，而是使用 xaml 的强大功能。我如何强制 UserControl 在 Tab 中占据整个高度，然后将其垂直居中（对特定的 UserControl 执行此操作很重要，因为其他用户应该具有默认位置）？

ps。我正在使用来自 MahApps.Metro.

的 MetroWindow

MainWindow 主网格：

<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>

用户控件主网格：

<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>

Answer 1

据我所知，您可以尝试的是：

删除主窗口 Grid 中的 StackPanel。除非你打算在堆栈面板中有超过 1 个 child（除了你的 TabControl），否则它是没有用的。
将 VerticalAlignement="Stretch" 添加到您的 TabControl。这将允许它在垂直方向占据所有 space。

那么你应该差不多准备好了。

你不应该使用 StackPanel 的原因 除非你打算 在里面堆放物品，如

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

是 StackPanel.Orientation 属性影响事物在内部的显示方式，包括每个 child 的对齐方式。所以 Orientation="Vertical"（默认），影响其 children 的 VerticalAlignement。与 Horizontal.

相同的想法

如何在 TabControl 中将 UserControl 居中

How to center UserControl in a TabControl

wpf

tabs

user-controls

vertical-alignment

tabcontrol