0

Имеется TabControl с например тремя вкладками хочу расположить их так две слева сверху одна слева снизу.

Как на изображении введите сюда описание изображения

Имеется макет

<Grid>
    <TabControl TabStripPlacement="Left">
        <TabControl.Resources>
            <Style TargetType="TabItem">
                <Setter Property="Height" Value="50" />
                <Setter Property="Width" Value="50" />
            </Style>
        </TabControl.Resources>
        <TabItem>
            <TabItem.Header>
                <TextBlock Text="Tab1" />
            </TabItem.Header>
            <TabItem.Content>
                <TextBlock Text="Tab1 content" />
            </TabItem.Content>
        </TabItem>
        <TabItem>
            <TabItem.Header>
                <TextBlock Text="Tab2" />
            </TabItem.Header>
            <TabItem.Content>
                <TextBlock Text="Tab2 content" />
            </TabItem.Content>
        </TabItem>
        <TabItem>
            <TabItem.Header>
                <TextBlock Text="Tab3" />
            </TabItem.Header>
            <TabItem.Content>
                <TextBlock Text="Tab3 content" />
            </TabItem.Content>
        </TabItem>
    </TabControl>
</Grid>

1 ответ 1

0

С C# разбираюсь вторую неделю, потому может коряво. Объединил информацию полученную c MSDN и wpf-tutorial.

Используется два стиля, один - чтобы расположить вкладки, второй чтобы изменить их вид

пример

        <TabControl TabStripPlacement="Left" Width="300" Margin="45,20,447,196">
            <TabControl.Resources>
                <SolidColorBrush x:Key="TabControlNormalBorderBrush" Color="#8C8E94"/>
                <Style TargetType="{x:Type TabControl}">
                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                    <Setter Property="Padding" Value="4,4,4,4"/>
                    <Setter Property="BorderThickness" Value="1"/>
                    <Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/>
                    <Setter Property="Background" Value="#F9F9F9"/>
                    <Setter Property="HorizontalContentAlignment" Value="Center"/>
                    <Setter Property="VerticalContentAlignment" Value="Center"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="TabControl">
                                <DockPanel>
                                    <ScrollViewer DockPanel.Dock="Left"
                            HorizontalScrollBarVisibility="Disabled"
                            VerticalScrollBarVisibility="Auto">
                                        <DockPanel LastChildFill="False" IsItemsHost="true" />
                                    </ScrollViewer>
                                    <Border x:Name="ContentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="1" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="0" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
                                        <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                    </Border>
                                </DockPanel>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
                <Style TargetType="TabItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="TabItem">
                                <Border Name="Border" BorderThickness="1,1,0,1" BorderBrush="#8C8E94" CornerRadius="4,0,0,4" Margin="0,0">
                                    <ContentPresenter x:Name="ContentSite"
                                        VerticalAlignment="Center"
                                        HorizontalAlignment="Center"
                                        ContentSource="Header"
                                        Margin="10,2"/>
                                </Border>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter TargetName="Border" Property="Background" Value="LightSkyBlue" />
                                    </Trigger>
                                    <Trigger Property="IsSelected" Value="False">
                                        <Setter TargetName="Border" Property="Background" Value="GhostWhite" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TabControl.Resources>
            <TabItem DockPanel.Dock="Top" Header="aaa" Content="aaaaa" ></TabItem>
            <TabItem DockPanel.Dock="Top" Header="bbb" Content="bbbbb" ></TabItem>
            <TabItem DockPanel.Dock="Top" Header="ccc" Content="ccccc" ></TabItem>
            <TabItem DockPanel.Dock="Top" Header="ddd" Content="ddddd" ></TabItem>
            <TabItem DockPanel.Dock="Bottom" Header="eee" Content="eeeee" ></TabItem>
        </TabControl>

Ещё один вариант, больше похож на то, что спрашивали: прямоугольные вкладки с отступами сверху и снизу

пример

        <TabControl TabStripPlacement="Left" Margin="69,33,0,51" HorizontalAlignment="Left" Width="353">
            <TabControl.Resources>
                <SolidColorBrush x:Key="TabControlNormalBorderBrush" Color="#8C8E94"/>
                <Style TargetType="{x:Type TabControl}">
                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                    <Setter Property="Padding" Value="4,4,4,4"/>
                    <Setter Property="BorderThickness" Value="1"/>
                    <Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/>
                    <Setter Property="Background" Value="#F9F9F9"/>
                    <Setter Property="HorizontalContentAlignment" Value="Center"/>
                    <Setter Property="VerticalContentAlignment" Value="Center"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="TabControl">
                                <DockPanel>
                                    <ScrollViewer DockPanel.Dock="Left"
                                        HorizontalScrollBarVisibility="Disabled"
                                        VerticalScrollBarVisibility="Auto">
                                        <DockPanel LastChildFill="False" IsItemsHost="true" />
                                    </ScrollViewer>
                                    <Border x:Name="ContentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="1" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="0" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
                                        <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                    </Border>
                                </DockPanel>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
                <Style TargetType="TabItem">
                    <Setter Property="Height" Value="50" />
                    <Setter Property="Width" Value="50" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="TabItem">
                                <Border Name="Border" BorderThickness="1,1,0,1" BorderBrush="#8C8E94" CornerRadius="4,0,0,4" Margin="0,0">
                                    <ContentPresenter x:Name="ContentSite"
                                        VerticalAlignment="Center"
                                        HorizontalAlignment="Center"
                                        ContentSource="Header"
                                        Margin="10,2"/>
                                </Border>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter TargetName="Border" Property="Background" Value="LightSkyBlue" />
                                    </Trigger>
                                    <Trigger Property="IsSelected" Value="False">
                                        <Setter TargetName="Border" Property="Background" Value="GhostWhite" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TabControl.Resources>
            <TabItem DockPanel.Dock="Top" Header="aaa" Content="aaaaa" Margin="0,5,0,0"></TabItem>
            <TabItem DockPanel.Dock="Top" Header="bbb" Content="bbbbb" ></TabItem>
            <TabItem DockPanel.Dock="Top" Header="ccc" Content="ccccc" ></TabItem>
            <TabItem DockPanel.Dock="Top" Header="ddd" Content="ddddd" ></TabItem>
            <TabItem DockPanel.Dock="Bottom" Header="eee" Content="eeeee" Margin="0,0,0,5"></TabItem>
        </TabControl>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.