如何在 TabControl 中将 UserControl 居中答案

【问题标题】：How to center UserControl in a TabControl如何在 TabControl 中将 UserControl 居中
【发布时间】：2020-03-21 23:16:39
【问题描述】：

我的 MainWindow 是使用 TabContol 构建的，其中包含 xaml 文件中的每个选项卡 UserControl。打开特定的 UserControl 不是问题，但对齐它是问题。我能够将选项卡的内容水平居中，但很难垂直地做到这一点。我发现根本问题是 UserControl 没有占用选项卡中的整个可用空间（高度）。我试图使主网格 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>

【问题讨论】：

只是为了更清楚地了解您要做什么，您希望 Tab 的内容填满窗口的整个垂直空间，并让内部 UserControl 居中到那个标签？
没错。我想我错过了一些简单的元素，但经过多次尝试和错误仍然不知道该怎么做。

标签： wpf tabs user-controls vertical-alignment tabcontrol

【解决方案1】：

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

删除主窗口Grid 中的StackPanel。除非您打算在堆栈面板中包含 1 个以上的孩子（除了您的 TabControl），否则它是没用的。
将VerticalAlignement="Stretch" 添加到您的TabControl。这将允许它垂直占用所有空间。

那么你应该准备好了。

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

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

StackPanel.Orientation 属性会影响事物在内部的显示方式，包括每个孩子的对齐方式。所以Orientation="Vertical"（默认值）会影响其子代的VerticalAlignement。与Horizontal 的想法相同。

【讨论】：