WPF tabitem позиционирование

Question

Как правильно расположить, например, три табитема в самом верхнем левом углу и один в самом верхнем правом углу элемента управления вкладками с помощью WPF?

Я попытался переместить четвертый табит вправо, изменяя свою маржу, но это не дает хорошего результата;во-первых, он обрезается, а во-вторых, он не отображается правильно при выборе.

Answer 1

Проблема в том, что TabPanel , который используется для внутреннего использования TabControl для размещения вкладок, похоже, не поддерживает то, что вы хотите. Быстрый обходной путь - заменить TabPanel чем-то другим, например DockPanel:

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <TabControl>
        <TabControl.Template>
            <ControlTemplate TargetType="TabControl">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Border BorderThickness="0,0,1,1" BorderBrush="#D0CEBF" Grid.Row="1">
                        <Border BorderThickness="{TemplateBinding BorderThickness}" 
                                BorderBrush="{TemplateBinding BorderBrush}">
                            <Border Background="{TemplateBinding Background}">
                                <ContentPresenter ContentSource="SelectedContent"/>
                            </Border>
                        </Border>
                    </Border>
                    <DockPanel IsItemsHost="True" LastChildFill="False" Margin="2,2,2,0" />
                </Grid>
            </ControlTemplate>
        </TabControl.Template>

        <TabItem Header="Item 1" />
        <TabItem Header="Item 2" />
        <TabItem Header="Item 3" />
        <TabItem Header="Item 4" DockPanel.Dock="Right" />
    </TabControl>
</Window>

(Ссылка: это модифицированная версия MSDN-примера для стилизации TabControl.)

Простая DockPanel не работает так гладко, как TabPanel - вкладки немного «прыгают» при переключении между ними, но это может помочь вам начать работу. Возможно, создание подкласса TabPanel и переопределение соответствующих частей даст вам более точный результат; Я думаю, это зависит от того, сколько усилий вы хотите приложить к этому.

Answer 2

Я обнаружил, что, вставив «невидимую» вкладку, я мог бы отрегулировать интервал (то есть переместить вкладки сверху вниз)

Например:

TabItem  Height="100"  Visibility="Hidden" <br>
TabItem..... <br>
TabItem....  <br>

Answer 3

Это будет включать в себя пользовательский шаблон ControlTemplate для TabControl.Я попробовал пример с использованием DockPanel в качестве хоста элементов, а не TabPanel по умолчанию.

<Style  TargetType="{x:Type TabControl}">
        <Setter Property="OverridesDefaultStyle"
                Value="True" />
        <Setter Property="SnapsToDevicePixels"
                Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabControl}">
                    <Grid KeyboardNavigation.TabNavigation="Local">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <DockPanel Name="HeaderPanel"
                                   LastChildFill="False"
                                  Grid.Row="0"
                                  Panel.ZIndex="1"
                                  Margin="0,0,4,-1"
                                  IsItemsHost="True"
                                  KeyboardNavigation.TabIndex="1"
                                  Background="Transparent" />
                        <Border Name="Border"
                                Grid.Row="1"
                                Background="WhiteSmoke"
                                BorderBrush="Black"
                                BorderThickness="1"
                                CornerRadius="2"
                                KeyboardNavigation.TabNavigation="Local"
                                KeyboardNavigation.DirectionalNavigation="Contained"
                                KeyboardNavigation.TabIndex="2">
                            <ContentPresenter Name="PART_SelectedContentHost"
                                              Margin="4"
                                              ContentSource="SelectedContent" />
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Проблема в том, что я не знаю, как открыть свойство DockPanel.Dock для TabItems за пределамиControlTemplate EG

<TabControl Margin="10">
    <TabItem Header="Tab One" DockPanel.Dock="Left"/>
    <TabItem Header="Tab Two" DocKPanel.Dock="Left"/>
    <TabItem Header="Tab Three" DocKPanel.Dock="Left"/>
    <TabItem Header="Tab Four" DocKPanel.Dock="Right"/>
</TabControl>

// Note: This does not work!!

Полагаю, вам нужно написать собственную Panel для размещения TabItems;Обратите внимание, что это будет довольно много работы, так как вам нужно будет обрабатывать такие вещи, как поведение переполнения, встроенное в TabPanel.

Даже если вы попытались это сделать, я думаю, вам придется написать пользовательский TabControl , если вы хотите раскрыть эту функциональность вне ControlTemplate.

Если вы хотите пойти по этому пути, посмотрите мой ответ в этой записи

Answer 4

Вам нужно поменять TabPanel внутри TabControl на что-то нестандартное, обеспечивающее желаемое поведение.Ни одна из стандартных панелей не будет обеспечивать желаемое поведение из коробки.

Скорее всего, это потребует переопределения MeasureOverride и ArrangeOverride , чтобы обеспечить настраиваемое размещение на панели, которое требуется в зависимости от количества элементов, которые в нем содержатся.