WPF 사용자 지정 TabControl

Question

사용자 지정 탭 컨트롤을 개발해야하며 WPF/XAML로 작성하기로 결정했습니다. 어쨌든 배울 계획 이었기 때문입니다.

내가 지금까지 잘 진행 상황을 만들었지 만, 두 가지 문제가 남아있다 : ​​그것은 다음과 같이한다 완료 때

1. 가 첫 번째/마지막 탭 항목이 둥근 있어야한다 왼쪽 위/왼쪽 아래 구석. 선택한 항목으로 수행 한 것과 비슷하게 이러한 항목의 스타일을 수정할 수 있습니까?

2. 선택한 탭 항목의 오른쪽에 테두리가 없어야합니다. 나는 Z- 인덱스와 오버랩으로 이것을 시도했지만 결과는 오히려 실망 스러웠다. 이것을 할 수있는 다른 방법이 있습니까?

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 업데이트를 참조하십시오.

편집 : 블라드가 첫 번째 문제를 수정했습니다.

Answer 1

두 번째 문제는 remove the clipping일까요? 그러나 possible issues을주의하십시오.

첫 번째 문제의 경우 IsSelected에 style trigger을 시도해야합니다. (편집 : 알겠습니다. 정확하게이 방법을 사용하고 있습니다.) 기본 템플릿 at MSDN에서 이것이 어떻게 구현되는지보십시오. 그들은 ZIndex도 사용하고 있습니다.

:
처음/마지막 탭 문제에 대한 해결 방법을 찾았습니다.

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

:

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

그런 다음 첫 번째 탭에서이 속성을 설정 : 당신이 연결된 속성을 정의하여 TestWindow 클래스에서

: 당신은 첫 번째/마지막 탭을 지정 연결된 속성을 사용할 필요가

그런 다음 그것을 위해 트리거를 정의해야합니다 :이 도움이 있어야합니다

<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 대신 숫자를 사용할 수 있습니다.