Как центрировать UserControl в TabControl - PullRequest
0 голосов
/ 20 марта 2020

Мое MainWindow построено с TabContol, содержащим в каждой вкладке UserControl в файлах xaml. Открытие спецификаций c UserControl не является проблемой, но выравнивание это. Я был в состоянии горизонтально центрировать содержимое вкладки, но изо всех сил пытался сделать то же самое по вертикали. Я обнаружил, что проблема root в том, что UserControl не занимает все свободное место (высоту) во вкладке. Я попытался сделать основную сетку VerticalAlignment = "Растянуть" и "Центр", но это не помогло. Я мог бы использовать поле с указанным c числом или определить фиксированную высоту строки, но это не сработает при каждом разрешении, и я не хочу писать метод в коде, но использую мощь xaml. Как я могу заставить UserControl брать всю высоту в Tab и затем вертикально центрировать ее (это важно сделать для указания c UserControl, потому что другие должны иметь положение по умолчанию)?

ps. Я использую MetroWindow от MahApps.Metro.

enter image description here

Основная сетка 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>

Основная сетка UserControl:

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

1 Ответ

1 голос
/ 21 марта 2020

Из того, что я понял, вы можете попробовать:

  1. Удалите StackPanel в вашем главном окне Grid. Если вы не собираетесь иметь более 1 дочернего элемента в панели стека (кроме вашего TabControl), это бесполезно.
  2. Добавьте VerticalAlignement="Stretch" к вашему TabControl. Это позволит ему занять все пространство, которое он может располагать вертикально.

Тогда вы должны быть в значительной степени настроены на go.

Причина, по которой вы не должны использовать StackPanel , если вы не намерены складывать элементы внутри, как в

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

, то, что свойство StackPanel.Orientation влияет на то, как все будет выглядеть внутри, включая выравнивание каждого дочернего элемента. Таким образом, Orientation="Vertical" (по умолчанию) влияет на VerticalAlignement его дочерних элементов. Та же идея с Horizontal.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...