WPF中的自定义样式选项卡

时间:2015-06-24 01:30:12

标签: wpf

我有问题要创建像下面的网址一样的标签。

http://prntscr.com/7kldyq

有三个选项卡:系统设置,运营商设置和Enterprise One。

任何人都可以帮我解决一下吗?任何帮助都会得到赞赏

2 个答案:

答案 0 :(得分:0)

请使用这种风格。

<Window.Resources>
        <Style  TargetType="{x:Type TabControl}">
        <Setter Property="Padding" Value="2" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalAlignment" Value="Stretch" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="Background" Value="White" />
        <Setter Property="BorderBrush" Value="#d0d1d1" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabControl}">
                    <Border BorderBrush="Black" BorderThickness="3,3,3,3">
                    <Grid x:Name="templateRoot"
                          ClipToBounds="true"
                          KeyboardNavigation.TabNavigation="Local"
                          SnapsToDevicePixels="true">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition x:Name="ColumnDefinition0" />
                            <ColumnDefinition x:Name="ColumnDefinition1" Width="0" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition x:Name="RowDefinition0" Height="Auto" />
                            <RowDefinition x:Name="RowDefinition1" Height="*" />
                        </Grid.RowDefinitions>
                        <TabPanel x:Name="headerPanel"
                                  Grid.Row="0"
                                  Grid.Column="0"
                                  Margin="2,0,0,0"
                                  HorizontalAlignment="Right"
                                  Panel.ZIndex="1"
                                  Background="Transparent"
                                  IsItemsHost="true"
                                  KeyboardNavigation.TabIndex="1" />
                        <Border x:Name="contentPanel"
                                Grid.Row="1"
                                Grid.Column="0"
                                Background="White"
                                BorderBrush="White"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                KeyboardNavigation.DirectionalNavigation="Contained"
                                KeyboardNavigation.TabIndex="2"
                                KeyboardNavigation.TabNavigation="Local">
                            <ContentPresenter x:Name="PART_SelectedContentHost"
                                              Margin="{TemplateBinding Padding}"
                                              ContentSource="SelectedContent"
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        </Border>
                    </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="TabStripPlacement" Value="Bottom">
                            <Setter TargetName="headerPanel" Property="Grid.Row" Value="1" />
                            <Setter TargetName="contentPanel" Property="Grid.Row" Value="0" />
                            <Setter TargetName="RowDefinition0" Property="Height" Value="*" />
                            <Setter TargetName="RowDefinition1" Property="Height" Value="Auto" />
                            <Setter TargetName="headerPanel" Property="Margin" Value="2,0,2,2" />
                        </Trigger>
                        <Trigger Property="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="Width" Value="Auto" />
                            <Setter TargetName="ColumnDefinition1" Property="Width" Value="*" />
                            <Setter TargetName="RowDefinition0" Property="Height" Value="*" />
                            <Setter TargetName="RowDefinition1" Property="Height" Value="0" />
                            <Setter TargetName="headerPanel" Property="Margin" Value="2,2,0,2" />
                        </Trigger>
                        <Trigger Property="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="Width" Value="*" />
                            <Setter TargetName="ColumnDefinition1" Property="Width" Value="Auto" />
                            <Setter TargetName="RowDefinition0" Property="Height" Value="*" />
                            <Setter TargetName="RowDefinition1" Property="Height" Value="0" />
                            <Setter TargetName="headerPanel" Property="Margin" Value="0,2,2,2" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter TargetName="templateRoot" Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

        <Style TargetType="{x:Type TabItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Border>
                        <Grid Margin="0,0,20,0" Height="40">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="24"/>
                                <ColumnDefinition Width="150"/>
                                <ColumnDefinition Width="24"/>

                            </Grid.ColumnDefinitions>
                            <Border
         x:Name="Border"
         Grid.Column="1"
         CornerRadius="0,0,0,0"    Margin="-2,0,0,0"
         Background="white" RenderTransformOrigin="0.5,0.5" >
                                <Border.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform Angle="180"/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </Border.RenderTransform>
                            </Border>
                            <Path
         x:Name="RoundedCorner"
         Grid.Column="0"
         Stretch="Fill"
         Data="M6.5,2.6C4.767,0.973 2.509,0 0,0 0,0 0,19 0,19L23,19z"
         Fill="white" RenderTransformOrigin="0.5,0.5" >
                                <Path.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform Angle="180"/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </Path.RenderTransform>
                            </Path>


                            <Path
         x:Name="RoundedCorner1"
         Grid.Column="3"
         Stretch="Fill"
         Data="M6.5,2.6C4.767,0.973 2.509,0 0,0 0,0 0,19 0,19L23,19z"
         Fill="white" RenderTransformOrigin="0.5,0.5" >
                                <Path.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform ScaleY="1" ScaleX="-1"/>
                                        <SkewTransform AngleY="0" AngleX="0"/>
                                        <RotateTransform Angle="180"/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </Path.RenderTransform>
                            </Path>
                           <!-- <Button
         x:Name="CloseButton"
         Grid.Column="1"
         Visibility="Collapsed"
         Margin="0,0,0,0"
         Width="6"
         Height="6"/>-->
                            <ContentPresenter               
         x:Name="ContentSite"
         Panel.ZIndex="20" Grid.Column="1"
         VerticalAlignment="Center"
         HorizontalAlignment="Center"
         ContentSource="Header"
         Margin="12,2,12,2"
         RecognizesAccessKey="True"/>
                        </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Panel.ZIndex" Value="100" />
                                <Setter TargetName="Border" Property="Background" Value="#FF333333" />
                                <Setter TargetName="RoundedCorner" Property="Fill" Value="#FF333333" />
                                <Setter TargetName="RoundedCorner1" Property="Fill" Value="#FF333333" />
                                <Setter TargetName="ContentSite" Property="TextElement.Foreground" Value="White" />
                        <!--        <Setter TargetName="CloseButton" Property="Visibility" Value="Visible" />-->
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter TargetName="Border" Property="Background" Value="white" />
                                <Setter TargetName="RoundedCorner" Property="Fill" Value="white" />
                                <Setter TargetName="RoundedCorner1" Property="Fill" Value="white" />
                               <Setter TargetName="ContentSite" Property="TextElement.Foreground" Value="Black" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

        </Style>
    </Window.Resources>
    <Grid>

        <TabControl  Height="300" Width="800">
            <TabItem Header="One dsfs sdf sf" ></TabItem>
            <TabItem Header="Two" ></TabItem>
            <TabItem Header="Three" ></TabItem>
        </TabControl

> 

    </Grid>`

请不要忘记标记作为答案。

答案 1 :(得分:0)

用此样式替换TabItem样式

b

你认为这还不完美吗?然后使用ExpressionBlend使用工具直接选择和笔来修改路径。