2010-03-25 143 views
8

我有一个相当标准的外观和感觉的用户界面。它在左侧有一列图标,当点击右侧打开不同的用户控件时。目前,我对选择图标和用户控件包含使用单独的控件。我遇到了一些奇怪的焦点问题,我厌倦了缓解,并且想知道是否可以将tabcontrol设计为我的UI(假设tabcontrol在导航标签时不会出现焦点问题)。WPF tabcontrol样式

下面是基本UI的截图。样式主要是关于如何让tabcontrols页面选择看起来像我的图标列。任何人都想在戒指中戴上帽子,以便我可以用tabcontrol完成这件事情?我的xaml在这一点上相当薄弱。

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

+2

或者,它可以带我快一个星期了,找时间添加一个例子。我希望它有帮助。 – 2010-04-01 02:35:46

+0

@CJBS这是BrentRobi,做了原来的职位,并会有图像。我正在讨论的例子是编辑下面接受的答案。 – 2017-03-21 19:30:16

+0

@BryanAnderson--对不起 - 你说得对。我输入了'@B',并且没有检查就接受了第一个条目。 – CJBS 2017-03-21 20:35:10

回答

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

然后你把图标中的TabItems并在内容属性中的用户控件的标题属性。那会让你一半左右。如果需要完全相同的外观,则需要通过复制当前模板(使用Blend或ShowMeTheTemplate复制当前模板)并根据需要修改它来重新设置TabControl和TabItem。但只是改变这些属性可以让你测试一个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的副本,添加和删除一个示例模板。希望有所帮助。

+0

感谢您的答复。这确实是我正在寻求建议的模拟。这是我认为可以阻止它成为可行解决方案的部分。 – BrettRobi 2010-03-25 20:24:20

+0

我可以在几个小时后回家时发表一个例子。 – 2010-03-25 20:33:39

+0

布雷特,我希望你会发现再模板不会那么糟糕。这听起来很可怕,但一旦你进入它有点儿有趣。另外,让旧模板恢复到意味着如果最糟糕的情况发生,您可以随时重新开始。 – 2010-03-25 20:54:02

1

如何用DockPanel中temlating的TabControl的,并绑定的TabPanel的DockPanel.Dock原来的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>