0

我查看了 stackoverflow 和互联网,但没有找到特定问题的答案。我想创建一个TabControl/TabItem像左导航一样的组合。我还是 XAML 的新手(现在只使用了几个月),我无法找到实现这一目标的最佳方法。我还想在当前选定的选项卡标题中添加一个小箭头图标。最后,我希望它看起来与 dnrtv 第 115 集中展示的设计相似,其中展示了比利霍利斯的出色设计,他提到这是一个TabControl看起来像它的样式。查看此链接并转到 4:43 了解我的意思:dnrtv Billy Hollis

到目前为止,我已经能够远离在网上搜索几乎一整天:

<TabControl TabStripPlacement="Left">
<TabControl.Resources>
<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.Resources>

<TabItem Header="Tab1Header"/>
<TabItem Header="Tab2Header" />
<TabItem Header="Tab3Header" /> 

</TabControl>

TabItem这段代码让我得到了左边的标题和一些外观,但我需要弄清楚当 a的IsSelected属性为真时如何添加图标。另外,如果可能的话,我想消除边界。请让我知道我是否在吠叫错误的树并且需要以不同的方式设置它。

我应该使用 aDataTemplateSelector或类似的东西吗?我想在所有 xaml 中都这样做,但如果那是不可能的,那也没关系。

任何帮助将不胜感激!

4

1 回答 1

0

这是我在 6 个月前做了一些改动的模型:

<Style x:Key="TransparentTabItems" TargetType="{x:Type TabItem}">
        <Setter Property="FocusVisualStyle">
                <Setter.Value>
                        <Style>
                                <Setter Property="Control.Template">
                                        <Setter.Value>
                                                <ControlTemplate>
                                                        <Rectangle Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="4,4,4,2" SnapsToDevicePixels="True"/>
                                                </ControlTemplate>
                                        </Setter.Value>
                                </Setter>
                        </Style>
                </Setter.Value>
        </Setter>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
        <Setter Property="Template">
                <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TabItem}">
                                <ControlTemplate.Resources>
                                        <Storyboard x:Key="TabTextGrow">
                                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TabName" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                                                        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
                                                </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                        <Storyboard x:Key="TabHeaderGrow">
                                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TabName" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                                                        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1.1"/>
                                                </DoubleAnimationUsingKeyFrames>
                                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TabName" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                                                        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1.1"/>
                                                </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                        <Storyboard x:Key="TextShrink">
                                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TabName" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                                                        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
                                                </DoubleAnimationUsingKeyFrames>
                                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TabName" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                                                        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
                                                </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                </ControlTemplate.Resources>
                                <TextBlock x:Name="TabName" Text="{TemplateBinding Header}" HorizontalAlignment="Right" Width="Auto" TextWrapping="Wrap" Margin="0,10,5,3" TextAlignment="Right" RenderTransformOrigin="0.5,0.5" LineStackingStrategy="MaxHeight" Height="20.167" LineHeight="9.333" Foreground="White" FontFamily="Arial" FontSize="13.333" VerticalAlignment="Center">
                                        <TextBlock.RenderTransform>
                                                <TransformGroup>
                                                        <ScaleTransform/>
                                                        <SkewTransform/>
                                                        <RotateTransform/>
                                                        <TranslateTransform/>
                                                </TransformGroup>
                                        </TextBlock.RenderTransform>

                                </TextBlock>
                                <ControlTemplate.Triggers>
                                        <EventTrigger RoutedEvent="Mouse.MouseEnter">
                                                <BeginStoryboard Storyboard="{StaticResource TabHeaderGrow}"/>
                                        </EventTrigger>
                                        <EventTrigger RoutedEvent="Mouse.MouseLeave">
                                                <BeginStoryboard x:Name="TextShrink_BeginStoryboard" Storyboard="{StaticResource TextShrink}"/>
                                        </EventTrigger>
                                        <Trigger Property="IsSelected" Value="True">
                                                <Setter TargetName="TabName" Property="BitmapEffect">
                                                        <Setter.Value>
                                                                <OuterGlowBitmapEffect GlowColor="White" GlowSize="1"/>
                                                        </Setter.Value>
                                                </Setter>
                                        </Trigger>
                                        <MultiTrigger>
                                                <MultiTrigger.Conditions>
                                                        <Condition Property="IsSelected" Value="True"/>
                                                        <Condition Property="TabStripPlacement" Value="Top"/>
                                                </MultiTrigger.Conditions>
                                                <Setter Property="Margin" Value="-2"/>
                                        </MultiTrigger>
                                        <MultiTrigger>
                                                <MultiTrigger.Conditions>
                                                        <Condition Property="IsSelected" Value="True"/>
                                                        <Condition Property="TabStripPlacement" Value="Bottom"/>
                                                </MultiTrigger.Conditions>
                                                <Setter Property="Margin" Value="-2"/>
                                        </MultiTrigger>
                                        <MultiTrigger>
                                                <MultiTrigger.Conditions>
                                                        <Condition Property="IsSelected" Value="True"/>
                                                        <Condition Property="TabStripPlacement" Value="Left"/>
                                                </MultiTrigger.Conditions>
                                                <Setter Property="Padding" Value="11,2,14,2"/>
                                                <Setter Property="Margin" Value="-2"/>
                                        </MultiTrigger>
                                        <MultiTrigger>
                                                <MultiTrigger.Conditions>
                                                        <Condition Property="IsSelected" Value="True"/>
                                                        <Condition Property="TabStripPlacement" Value="Right"/>
                                                </MultiTrigger.Conditions>
                                                <Setter Property="Padding" Value="14,2,11,2"/>
                                                <Setter Property="Margin" Value="-2"/>
                                        </MultiTrigger>
                                        <Trigger Property="IsEnabled" Value="False">
                                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                                        </Trigger>
                                </ControlTemplate.Triggers>
                        </ControlTemplate>
                </Setter.Value>
        </Setter>
</Style>

TabItem 标题会在选择或鼠标悬停时增长并突出显示,而不是加粗。要在其上添加一点 >,只需在其中创建所需的路径,然后将可见性修饰符添加到要触发它的触发器(很可能是 IsSelected 触发器)。

于 2011-06-22T14:57:46.270 回答