WPF 高仿360功能界面

WPF 高仿360功能界面，如图：

XAML TabControl 控件

<TabControl Style="{StaticResource TabControlStyle}">
    <TabItem Header="资源共享" Style="{StaticResource TabItemStyle}">
        <TabItem.Background>
            <ImageBrush ImageSource="pack://application:,,,/Micro.Client;component/Image/ico_dsmain.png"/>
        </TabItem.Background>
        <Grid>
            <Button Content="资源共享" Height="28" Width="180"/>
        </Grid>
    </TabItem>
    <TabItem Header="数据同步" Style="{StaticResource TabItemStyle}">
        <TabItem.Background>
            <ImageBrush ImageSource="pack://application:,,,/Micro.Client;component/Image/ico_Examine.png"/>
        </TabItem.Background>
        <Grid>
            <Button Content="数据同步" Height="28" Width="180"/>
        </Grid>
    </TabItem>
    <TabItem Header="升级程序" Style="{StaticResource TabItemStyle}">
        <TabItem.Background>
            <ImageBrush ImageSource="pack://application:,,,/Micro.Client;component/Image/ico_softmgr.png"/>
        </TabItem.Background>
        <Grid>
            <Button Content="升级程序" Height="28" Width="180"/>
        </Grid>
    </TabItem>
    <TabItem Header="任务计划" Style="{StaticResource TabItemStyle}">
        <TabItem.Background>
            <ImageBrush ImageSource="pack://application:,,,/Micro.Client;component/Image/ico_SpeedupOpt.png"/>
        </TabItem.Background>
        <Grid>
            <Button Content="任务计划" Height="28" Width="180"/>
        </Grid>
    </TabItem>
    <TabItem Header="更新程序" Style="{StaticResource TabItemStyle}">
        <TabItem.Background>
            <ImageBrush ImageSource="pack://application:,,,/Micro.Client;component/Image/ico_SysRepair.png"/>
        </TabItem.Background>
        <Grid>
            <Button Content="更新程序" Height="28" Width="180"/>
        </Grid>
    </TabItem>
    <TabItem Header="插件服务" Style="{StaticResource TabItemStyle}">
        <TabItem.Background>
            <ImageBrush ImageSource="pack://application:,,,/Micro.Client;component/Image/ico_TraceCleaner.png"/>
        </TabItem.Background>
        <Grid>
            <Button Content="插件服务" Height="28" Width="180"/>
        </Grid>
    </TabItem>
</TabControl>

 XAML TabControl 样式

<ImageBrush x:Key="EnterBrush" ImageSource="pack://application:,,,/Micro.Client;component/Image/enter.png"/>
<ImageBrush x:Key="MoverBrush" ImageSource="pack://application:,,,/Micro.Client;component/Image/mover.png"/>
<Style TargetType="TabControl" x:Key="TabControlStyle">
    <Setter Property="Control.Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
    <Setter Property="Control.Padding" Value="4,4,4,4" />
    <Setter Property="Control.BorderThickness" Value="1" />
    <Setter Property="Control.BorderBrush" Value="#8C8E94" />
    <Setter Property="Control.Background" Value="#FFF9F9F9" />
    <Setter Property="Control.HorizontalContentAlignment" Value="Center" />
    <Setter Property="Control.VerticalContentAlignment" Value="Center" />
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
                <Grid Name="templateRoot" SnapsToDevicePixels="True" KeyboardNavigation.TabNavigation="Local">
                    <DockPanel HorizontalAlignment="Stretch" Height="Auto" LastChildFill="True" Margin="0" Grid.Row="0" VerticalAlignment="Stretch" Width="Auto" Grid.RowSpan="1">
                        <StackPanel Name="HeaderPanel" Height="Auto" VerticalAlignment="Top" Width="Auto" DockPanel.Dock="Top" IsItemsHost="True" Orientation="Horizontal" CanHorizontallyScroll="True" />
                        <Border Name="ContentPanel" BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="{TemplateBinding Control.BorderThickness}" Width="Auto" DockPanel.Dock="Bottom" Margin="0" Background="{TemplateBinding Control.Background}">
                            <ContentPresenter Name="PART_SelectedContentHost" ContentSource="SelectedContent" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" Height="Auto" />
                        </Border>
                    </DockPanel>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="TabControl.TabStripPlacement" Value="Bottom">
                        <Setter TargetName="HeaderPanel" Property="DockPanel.Dock" Value="Bottom" />
                        <Setter TargetName="ContentPanel" Property="DockPanel.Dock" Value="Top" />
                    </Trigger>
                    <Trigger Property="TabControl.TabStripPlacement" Value="Left">
                        <Setter TargetName="HeaderPanel" Property="StackPanel.Orientation" Value="Vertical" />
                        <Setter TargetName="HeaderPanel" Property="DockPanel.Dock" Value="Left" />
                        <Setter TargetName="ContentPanel" Property="DockPanel.Dock" Value="Right" />
                    </Trigger>
                    <Trigger Property="TabControl.TabStripPlacement" Value="Right">
                        <Setter TargetName="HeaderPanel" Property="DockPanel.Dock" Value="Right" />
                        <Setter TargetName="HeaderPanel" Property="StackPanel.Orientation" Value="Vertical" />
                        <Setter TargetName="ContentPanel" Property="DockPanel.Dock" Value="Left" />
                    </Trigger>
                    <Trigger Property="UIElement.IsEnabled" Value="False">
                        <Setter Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" Property="Control.Foreground" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style x:Key="TabItemStyle" TargetType="{x:Type TabItem}">
    <Setter Property="Width" Value="80"/>
    <Setter Property="Height" Value="75"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="FrameworkElement.FocusVisualStyle">
        <Setter.Value>
            <Style>
                <Setter Property="Control.Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Rectangle Margin="2" SnapsToDevicePixels="True" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Setter.Value>
    </Setter>
    <Setter Property="Control.BorderBrush" Value="#FFACACAC" />
    <Setter Property="FrameworkElement.Margin" Value="0" />
    <Setter Property="Control.Padding" Value="6,2" />
    <Setter Property="Control.HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="Control.VerticalContentAlignment" Value="Stretch" />
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Grid Name="templateRoot" SnapsToDevicePixels="True" Width="{TemplateBinding FrameworkElement.Width}" Height="{TemplateBinding FrameworkElement.Height}" Background="#00FFFFFF">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="20" />
                    </Grid.RowDefinitions>
                    <Border Name="mainBorder" BorderThickness="1,1,1,0" Margin="0" Grid.RowSpan="1" Background="{TemplateBinding Control.Background}" Width="48" Height="48" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" />
                    <ContentPresenter Name="contentPresenter" ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}" Content="{TemplateBinding HeaderedContentControl.Header}" ContentStringFormat="{TemplateBinding HeaderedContentControl.HeaderStringFormat}" ContentSource="Header" Focusable="False" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Top" TextElement.Foreground="{TemplateBinding Control.Foreground}" />
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="Selector.IsSelected" Value="True">
                        <Setter TargetName="templateRoot" Value="{StaticResource MoverBrush}" Property="Panel.Background" />
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="UIElement.IsMouseOver" Value="True" />
                            <Condition Property="Selector.IsSelected" Value="False" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="templateRoot" Value="{StaticResource EnterBrush}" Property="Panel.Background" />
                        <Setter TargetName="mainBorder" Property="UIElement.RenderTransform">
                            <Setter.Value>
                                <TransformGroup>
                                    <ScaleTransform ScaleX="1.05" ScaleY="1.05" />
                                    <SkewTransform />
                                    <RotateTransform />
                                    <TranslateTransform />
                                </TransformGroup>
                            </Setter.Value>
                        </Setter>
                    </MultiTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

 

样式素材，enter.png 和 mover.png