xaml - xaml WPF tabcontrol样式样式

  显示原文与译文双语对照的内容
87 0

我得到了一个相当标准的外观和感觉的用户界面。它左边有一列图标,当点击它时,在右边打开一个不同的用户控件。当前,我正在为选择图标和usercontrol控件使用单独的控件。我有些奇怪的问题是尝试减轻并且想知道我是否可以以样式化rtc看起来像我的UI ( 在assumption在导航选项卡时tabcontrol不会有焦点问题) 。

下面是基本用户界面的屏幕截图。样式主要是关于如何让tabcontrols页面选择看起来像我的图标列。谁想把他们的帽子扔到拳击场上,告诉我如何用tabcontrol来完成这个任务?我的xaml在这个时候很弱。

alt文本 http://img413.imageshack.us/img413/8399/directoru.png

时间:原作者:0个回答

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

然后将图标放在TabItems的标题属性中,在内容属性中放置 usercontrol 。那将会让你 halfway 。如果你想要完全相同的外观,你将需要通过复制当前模板( 使用混合或者 ShowMeTheTemplate 复制当前模板) 并修改它来retemplate和 as 。但是只要改变这些属性,就可以测试TabControl是否消除了焦点问题。

:这里是一个示例模板,应该非常接近你的屏幕截图。

<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的拷贝,其中添加了一些边框。希望有帮助

原作者:
62 0

使用 DockPanel,并将TabPanel的绑定到原始TabStripPlacement属性的TabControl如何。如所示

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>
原作者:
...