WPF tabcontrol stylizacja

Question

Mam interfejs użytkownika o dość standardowym wyglądzie i stylu. Ma kolumnę ikon po lewej stronie, która po kliknięciu otwiera inną kontrolę użytkownika po prawej stronie. Obecnie używam osobnych kontrolek dla ikon wyboru i ograniczenia kontroli użytkownika. Mam dziwne problemy z ogniskiem, że jestem zmęczony próbą złagodzenia i zastanawiam się, czy mógłbym ustawić tabcontrol, aby wyglądał jak mój interfejs użytkownika (przy założeniu, że tabcontrol nie będzie miał problemów z ustawieniem ostrości podczas nawigacji na kartach).

Oto zrzut ekranu podstawowego interfejsu użytkownika. Stylizacja polega głównie na tym, jak sprawić, by wybór stron tabli kontrolnych wyglądał jak moja kolumna ikon. Czy ktoś chce rzucić kapelusz w ringu, w jaki sposób mogę to osiągnąć za pomocą tabcontrol? Mój xaml jest dość słaby w tym momencie.

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

Answer 1

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

Następnie można umieścić ikony w nieruchomości nagłówku TabItems i UserControls w własności partnerskiej. To sprawi, że będziesz w połowie drogi. Jeśli chcesz uzyskać ten sam wygląd, powinieneś ponownie sprawdzić TabControl i TabItem, kopiując bieżący szablon (użyj Blend lub ShowMeTheTemplate, aby skopiować bieżący szablon) i zmodyfikuj go w razie potrzeby. Ale zmiana tych właściwości pozwoli ci sprawdzić, czy TabControl pozbywa się twoich problemów z ogniskiem.

Edycja: Oto przykład szablon, który powinien być dość blisko do zrzucie

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

to w zasadzie kopia normalnego TabControl z jakimś Granic dodawane i usuwane. Nadzieja, która pomaga.

Answer 2

Jak o temlating do TabControl z DockPanel i wiązania DockPanel.Dock z TabPanel do pierwotnego nieruchomości TabStripPlacement? .. jak pokazano

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>