WPF tabcontrol styling

Question

У меня есть пользовательский интерфейс с довольно стандартным внешним видом. Он имеет столбец с иконами с левой стороны, которые при нажатии открывают другой пользовательский элемент управления с правой стороны. В настоящее время я использую отдельные элементы управления для значков выбора и сдерживания usercontrol. У меня возникли странные проблемы с фокусом, которые я устал от попытки смягчить, и мне интересно, смогу ли стиль tabcontrol выглядеть как мой пользовательский интерфейс (в предположении, что tabcontrol не будет иметь проблем с фокусом при навигации по вкладкам).

Вот скриншот основного пользовательского интерфейса. Стиль в основном состоит в том, как заставить выбор страницы tabcontrols выглядеть как столбец значков. Кто-нибудь хочет бросить свою шляпу на ринг, как я могу это сделать с помощью tabcontrol? На данный момент мой xaml довольно слаб.

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

Answer 1

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

Затем вы кладете иконки в свойстве заголовка из TabItems и UserControls в содержании собственности. Это поможет вам примерно на полпути. Если вам нужен точный внешний вид, вам нужно будет перепроверить TabControl и TabItem, скопировав текущий шаблон (используйте Blend или ShowMeTheTemplate, чтобы скопировать текущий шаблон) и, при необходимости, изменив его. Но просто изменение этих свойств позволит вам проверить, избавляет ли TabControl от проблем с фокусом.

Edit: Вот пример шаблона, который должен быть довольно близко к скриншоту

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

Это в основном копия нормальной TabControl с некоторыми Borders добавлены и удалены. Надеюсь, это поможет.

Answer 2

Как насчет temlating в TabControl с DockPanel и связывания DockPanel.Dock в TabPanel к первоначальному TabStripPlacement собственности? .. как показано

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>