WPF tabcontrol styling

Question

Tôi có giao diện người dùng với giao diện khá chuẩn. Nó có một cột của các biểu tượng ở phía bên trái mà khi nhấp vào mở một điều khiển người dùng khác nhau ở phía bên phải. Hiện tại tôi đang sử dụng các điều khiển riêng cho các biểu tượng lựa chọn và ngăn chặn usercontrol. Tôi đang có vấn đề tập trung kỳ lạ mà tôi mệt mỏi của cố gắng để giảm thiểu và đang tự hỏi nếu tôi có thể phong cách một tabcontrol để trông giống như giao diện người dùng của tôi (theo giả định một tabcontrol sẽ không có vấn đề tập trung khi điều hướng tab).

Đây là ảnh chụp màn hình giao diện người dùng cơ bản. Kiểu dáng chủ yếu là về cách để có được lựa chọn trang tabcontrols trông giống như cột biểu tượng của tôi. Bất cứ ai muốn ném mũ của họ trong vòng như thế nào tôi có thể thực hiện điều này với một tabcontrol? Xaml của tôi khá yếu vào thời điểm này.

alt text http://img413.imageshack.us/img413/8399/directoru.png

Answer 1

<TabControl TabStripPlacement="Left"> 
    ... 
</TabControl> 

Sau đó, bạn đặt các biểu tượng trong thuộc tính Tiêu đề của TabItems và UserControls trong sở hữu nội dung. Điều đó sẽ giúp bạn có được một nửa ở đó. Nếu bạn muốn chính xác cùng một cái nhìn bạn sẽ cần phải xem xét lại TabControl và TabItem bằng cách sao chép mẫu hiện tại (sử dụng Blend hoặc ShowMeTheTemplate để sao chép mẫu hiện tại) và sửa đổi nó khi cần thiết. Nhưng chỉ cần thay đổi các thuộc tính đó sẽ cho phép bạn kiểm tra xem liệu TabControl có loại bỏ các vấn đề tiêu điểm của bạn hay không.

Edit: Đây là một ví dụ mẫu mà nên được khá gần với ảnh chụp màn hình của bạn

<Style TargetType="{x:Type TabItem}"> 
    <Setter Property="Background" Value="Transparent" /> 

    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type TabItem}"> 

       <Border x:Name="PART_Border" Background="{TemplateBinding Background}" BorderThickness="1" BorderBrush="LightGray" Margin="2"> 
        <ContentPresenter ContentSource="Header" Margin="2" /> 
       </Border> 

       <ControlTemplate.Triggers> 
        <Trigger Property="IsSelected" Value="True"> 
         <Setter TargetName="PART_Border" Property="BorderBrush" Value="Black" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

<Style TargetType="{x:Type TabControl}"> 
    <Setter Property="TabStripPlacement" Value="Left" /> 
    <Setter Property="Margin" Value="2" /> 
    <Setter Property="Padding" Value="2" /> 
    <Setter Property="Background" Value="White" /> 


    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type TabControl}"> 
       <Grid ClipToBounds="True" SnapsToDevicePixels="True" KeyboardNavigation.TabNavigation="Local"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Name="ColumnDefinition0" /> 
         <ColumnDefinition Width="0" Name="ColumnDefinition1" /> 
        </Grid.ColumnDefinitions> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="Auto" Name="RowDefinition0" /> 
         <RowDefinition Height="*" Name="RowDefinition1" /> 
        </Grid.RowDefinitions> 

        <Border x:Name="HeaderBorder" 
          BorderBrush="Black" 
          BorderThickness="1" 
          CornerRadius="5" 
          Background="#FAFAFA" 
          Margin="0,0,0,5"> 
         <TabPanel IsItemsHost="True" 
            Name="HeaderPanel" 
            Panel.ZIndex="1" 
            KeyboardNavigation.TabIndex="1" 
            Grid.Column="0" 
            Grid.Row="0" 
         /> 
        </Border> 

        <Grid Name="ContentPanel" 
          KeyboardNavigation.TabIndex="2" 
          KeyboardNavigation.TabNavigation="Local" 
          KeyboardNavigation.DirectionalNavigation="Contained" 
          Grid.Column="0" 
          Grid.Row="1"> 
         <Border Background="{TemplateBinding Background}" 
           BorderBrush="{TemplateBinding BorderBrush}" 
           BorderThickness="{TemplateBinding BorderThickness}" 
           CornerRadius="5"> 
          <ContentPresenter Content="{TemplateBinding SelectedContent}" 
               ContentTemplate="{TemplateBinding SelectedContentTemplate}" 
               ContentStringFormat="{TemplateBinding SelectedContentStringFormat}" 
               ContentSource="SelectedContent" 
               Name="PART_SelectedContentHost" 
               Margin="2" 
               SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" 
          /> 
         </Border> 
        </Grid> 
       </Grid> 

       <ControlTemplate.Triggers> 
        <Trigger Property="TabControl.TabStripPlacement" Value="Bottom"> 
         <Setter TargetName="HeaderPanel" Property="Grid.Row" Value="1" /> 
         <Setter TargetName="ContentPanel" Property="Grid.Row" Value="0" /> 
         <Setter TargetName="RowDefinition0" Property="RowDefinition.Height" Value="*" /> 
         <Setter TargetName="RowDefinition1" Property="RowDefinition.Height" Value="Auto" /> 
         <Setter TargetName="HeaderBorder" Property="FrameworkElement.Margin" Value="0,5,0,0" /> 
        </Trigger> 
        <Trigger Property="TabControl.TabStripPlacement" Value="Left"> 
         <Setter TargetName="HeaderPanel" Property="Grid.Row" Value="0" /> 
         <Setter TargetName="ContentPanel" Property="Grid.Row" Value="0" /> 
         <Setter TargetName="HeaderPanel" Property="Grid.Column" Value="0" /> 
         <Setter TargetName="ContentPanel" Property="Grid.Column" Value="1" /> 
         <Setter TargetName="ColumnDefinition0" Property="ColumnDefinition.Width" Value="Auto" /> 
         <Setter TargetName="ColumnDefinition1" Property="ColumnDefinition.Width" Value="*" /> 
         <Setter TargetName="RowDefinition0" Property="RowDefinition.Height" Value="*" /> 
         <Setter TargetName="RowDefinition1" Property="RowDefinition.Height" Value="0" /> 
         <Setter TargetName="HeaderBorder" Property="FrameworkElement.Margin" Value="0,0,5,0" /> 
        </Trigger> 
        <Trigger Property="TabControl.TabStripPlacement" Value="Right"> 
         <Setter TargetName="HeaderPanel" Property="Grid.Row" Value="0" /> 
         <Setter TargetName="ContentPanel" Property="Grid.Row" Value="0" /> 
         <Setter TargetName="HeaderPanel" Property="Grid.Column" Value="1" /> 
         <Setter TargetName="ContentPanel" Property="Grid.Column" Value="0" /> 
         <Setter TargetName="ColumnDefinition0" Property="ColumnDefinition.Width" Value="*" /> 
         <Setter TargetName="ColumnDefinition1" Property="ColumnDefinition.Width" Value="Auto" /> 
         <Setter TargetName="RowDefinition0" Property="RowDefinition.Height" Value="*" /> 
         <Setter TargetName="RowDefinition1" Property="RowDefinition.Height" Value="0" /> 
         <Setter TargetName="HeaderBorder" Property="FrameworkElement.Margin" Value="5,0,0,0" /> 
        </Trigger> 
        <Trigger Property="UIElement.IsEnabled" Value="False"> 
         <Setter Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Đó là cơ bản một bản sao của TabControl bình thường với một số Borders thêm và loại bỏ. Hy vọng rằng sẽ giúp.

Answer 2

Làm thế nào về temlating TabControl với một DockPanel, và ràng buộc các DockPanel.Dock của TabPanel đến tài sản TabStripPlacement gốc? .. như

xaml 
<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}"> 
        <DockPanel KeyboardNavigation.TabNavigation="Local" LastChildFill="True"> 
         <TabPanel DockPanel.Dock="{TemplateBinding TabStripPlacement}" 
          Name="HeaderPanel" 
          Grid.Row="0" 
          Panel.ZIndex="1" 
          Margin="0,0,4,1" 
          IsItemsHost="True" 
          KeyboardNavigation.TabIndex="1" 
          Background="Transparent" /> 
         <Border 
          Name="Border" 
          Background="Transparent" 
          BorderBrush="Black" 
          BorderThickness="1" 
          CornerRadius="2" > 
          <ContentPresenter 
           ContentSource="SelectedContent" /> 
         </Border> 
        </DockPanel> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsEnabled" Value="False"> 
          <Setter Property="Foreground" Value="Black" /> 
          <Setter TargetName="Border" Property="BorderBrush" Value="DarkGray" /> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>