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