WPF tabcontrol style

J'ai une INTERFACE utilisateur avec un assez standard regarder et se sentir. Il a une colonne d'icônes sur le côté gauche, qui lorsqu'il est cliqué ouvrir un autre contrôle de l'utilisateur sur le côté droit. Actuellement, je suis en utilisant des commandes séparées pour les icônes de sélection et le contrôle usercontrol de confinement. Je vais avoir d'étranges problèmes de focus que je suis fatigué d'essayer de les atténuer et je me demande si je pourrais le style d'un tabcontrol pour ressembler à mon UI (sous l'hypothèse d'un tabcontrol n'aurait pas les problèmes de focus lors de la navigation dans les onglets).

Voici une capture d'écran de l'INTERFACE utilisateur de base. Le style est surtout sur la façon d'obtenir le tabcontrols sélection de la page ressemble à ma colonne d'icônes. Quelqu'un veut jeter son chapeau dans l'anneau de la façon dont je puisse accomplir cela avec un tabcontrol? Mon xaml est assez faible à ce point.

le texte d'alt http://img413.imageshack.us/img413/8399/directoru.png

Ou il pourrait me prendre presque une semaine à trouver le temps d'ajouter un exemple. J'espère que cela aide.
Il a été BrentRobi à l'origine du post et aurait l'image. L'exemple dont je parlais est à la modifier pour la accepté de répondre ci-dessous.
Je suis désolé, vous avez raison. J'ai tapé '@B' et a accepté la première entrée sans vérifier.
Imageshack image n'est plus active. Aucune chance qu'il peut être intégré?
Désolé j'ai depuis longtemps perdu la trace de cette image et même de l'application, elle a été de. Impressionnant de voir ce toujours pertinent, 7 ans plus tard...

OriginalL'auteur BrettRobi | 2010-03-25

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

Ensuite, vous mettez les icônes dans l'en-Tête de la propriété de la TabItems et les contrôles utilisateur dans le Contenu de la propriété. Vous obtenez environ à mi-chemin. Si vous voulez exactement le même look que vous aurez besoin de retemplate le TabControl et TabItem en copiant le modèle en cours (utilisation de Mélange ou de ShowMeTheTemplate de copier le modèle actuel) et de la modifier au besoin. Mais seulement la modification de ces propriétés vous permettra de tester si un TabControl de se débarrasser de vos problèmes de focus.

Edit: Voici un exemple de modèle qui devrait être assez près de votre capture d'écran

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

C'est essentiellement une copie de la normale TabControl avec certaines Frontières ajoutés et supprimés. Espérons que cela aide.

Merci pour la réponse. C'est vraiment le retemplating que je suis à la recherche pour obtenir des conseils sur. C'est la partie que je pense pourrait bloquer ce à partir d'une solution viable.
Je peux poster un exemple quand je rentre à la maison en quelques heures.
Brett, je pense que vous trouverez que retemplating ne sera pas si mauvais. Il semble effrayant, mais une fois que vous obtenez en elle est assez amusant. De Plus, ayant de l'ancien modèle de revenir à la signifie que vous pouvez toujours recommencer si le pire arrive au pire.
Merci pour l'exemple de Bryan. Je vais regarder de plus près dans les prochains jours.

OriginalL'auteur Bryan Anderson

Comment sur temlating le TabControl avec un DockPanel, et la liaison de la DockPanel.Quai de la TabPanel à l'origine TabStripPlacement propriété ?.. comme le montre

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>

OriginalL'auteur Michael Sutton

Vous devez vous connecter pour publier un commentaire.