WPF Customized TabControl - PullRequest
Новая
       11

WPF Customized TabControl

12 голосов
/ 14 апреля 2010

Я должен разработать настраиваемый элемент управления вкладками и решил создать его с WPF / XAML, потому что я все равно планировал изучить его. Когда все будет готово, это должно выглядеть так:

Target

Пока я добился хорошего прогресса, но осталось две проблемы:

  1. Только первый / последний элемент вкладки должен иметь закругленный верхний левый / нижний левый угол. Можно ли изменить стиль этих элементов так же, как я сделал с выбранным элементом вкладки?

  2. Выбранный элемент вкладки не должен иметь рамки с правой стороны. Я пытался добиться этого с помощью z-index и перекрытия, но результаты были довольно разочаровывающими. Есть ли другой способ сделать это?

Current

XAML: 

<Window x:Class="MyProject.TestWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="TestWindow" Height="350" Width="500" Margin="5" Background="LightGray">
<Window.Resources>
    <LinearGradientBrush x:Key="SelectedBorderBrush" StartPoint="0,0" EndPoint="1,0">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="Gray" Offset="0.965"/>
                <GradientStop Color="WhiteSmoke" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    <Style TargetType="{x:Type TabControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabControl}">
                    <DockPanel>
                        <Border
                            Panel.ZIndex="50"
                            Margin="0,100,-1,0" 
                            Background="#FFAAAAAA"
                            BorderBrush="Gray"
                            CornerRadius="7,0,0,7"
                            BorderThickness="1">
                            <TabPanel
                                Margin="0,0,0,0"
                                IsItemsHost="True" />
                        </Border>
                        <Border
                            Background="WhiteSmoke"
                            BorderBrush="Gray"
                            BorderThickness="1"
                            CornerRadius="7,7,7,0" >
                            <ContentPresenter 
                                ContentSource="SelectedContent" />
                        </Border>
                    </DockPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style TargetType="{x:Type TabItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid>
                        <Border Name="Border" 
                            Background="#FFAAAAAA"
                            CornerRadius="7,0,0,0"
                            BorderBrush="Gray"
                            BorderThickness="0,0,0,1"
                            Panel.ZIndex="50"
                            Margin="0,0,0,0"
                                >

                            <ContentPresenter x:Name="ContentSite"             
                                VerticalAlignment="Center"
                                HorizontalAlignment="Left"
                                ContentSource="Header"
                                Margin="10,10,10,10"/>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Panel.ZIndex" Value="100" />
                            <Setter Property="Margin" Value="0,0,-2,0" />
                            <Setter TargetName="Border" 
                                    Property="BorderBrush" 
                                    Value="{StaticResource SelectedBorderBrush}"/>
                            <Setter TargetName="Border" 
                                Property="Background" 
                                Value="WhiteSmoke" />
                            <Setter TargetName="Border" 
                                Property="CornerRadius" 
                                Value="0,0,0,0" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid>
    <TabControl Name="_menuTabControl" TabStripPlacement="Left" Margin="5">
        <TabItem Name="_tabItem1" Header="First Tab Item" ></TabItem>

        <TabItem Name="_tabItem2" Header="Second Tab Item" >
            <Grid />
        </TabItem>
        <TabItem Name="_tabItem3" Header="Third Tab Item" >
            <Grid />
        </TabItem>
    </TabControl>
</Grid>

Редактировать: Благодаря Владу, я мог исправить вторую проблему с помощью градиентной кисти. Смотрите обновления XAML для решения.

Редактировать: Влад исправил первую проблему.

1 Ответ

9 голосов
/ 14 апреля 2010

Для второй проблемы, возможно, вам следует попробовать удалить вырезку ? Однако остерегайтесь возможных проблем .

Для первой проблемы вы должны попробовать стиль триггера для свойства IsSelected. (Edit: я вижу, вы делаете это именно так.) Посмотрите, как это реализовано в шаблоне по умолчанию в MSDN . Обратите внимание, что они также используют ZIndex.

Редактировать
Я нашел обходной путь для вашей проблемы первой / последней вкладки. Для обозначения первой / последней вкладки необходимо использовать вложенные свойства:

В вашем классе TestWindow вы определяете вложенное свойство: 

public static bool GetIsFirstTab(DependencyObject obj)
{
    return (bool)obj.GetValue(IsFirstTabProperty);
}

public static void SetIsFirstTab(DependencyObject obj, bool value)
{
    obj.SetValue(IsFirstTabProperty, value);
}

public static readonly DependencyProperty IsFirstTabProperty =
        DependencyProperty.RegisterAttached("IsFirstTab", typeof(bool),
               typeof(TestWindow), new UIPropertyMetadata(false));

Затем в первой вкладке вы устанавливаете это свойство: 

<Window x:Class="MyProject.TestWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:MyProject"
        ...
/>
    ...
    <TabItem Name="_tabItem1" Header="First Tab Item"
             local:TestWindow.IsFirstTab="true">
    </TabItem>

Затем вы должны определить для него триггер: 

<Trigger Property="IsSelected" Value="True">
    <Setter TargetName="Border" 
            Property="Background" 
            Value="WhiteSmoke" />
</Trigger>
<Trigger Property="local:Window1.IsFirstTab" Value="True">
    <Setter TargetName="Border" 
            Property="Background" 
            Value="Red" />
</Trigger>

Это должно помочь.

Тот же трюк будет работать с последней вкладкой. Или вы можете иметь номер вместо bool в качестве прикрепленного свойства.

...