WPF 基础控件之 TabControl样式

最新推荐文章于 2024-04-20 15:15:16 发布
最新推荐文章于 2024-04-20 15:15:16 发布
阅读量2.1k 收藏 7
点赞数
文章标签： html css animation qml checkbox
原文链接：https://mp.weixin.qq.com/s?__biz=MzAwNTMxMzg1MA==&mid=2654091135&idx=7&sn=f05321c6cf169a229d00d771288e0330&chksm=80d8132ab7af9a3c0b294ced7fd9287341857e1bfe37cb9db91d9edbd5d1df83973d42e56808&scene=126&&sessionid=0
版权

其他基础控件

1.Window
2.Button
3.CheckBox
4.ComboBox
5.DataGrid
6.DatePicker
7.Expander
8.GroupBox
9.ListBox
10.ListView
11.Menu
12.PasswordBox
13.TextBox
14.RadioButton
15.ToggleButton
16.Slider
17.TreeView

TabControl  实现下面的效果

e191e3f5a02624c55625317c808ce1be.png

1）TabControl来实现动画；

  • TabControl分为横向和纵向；

  • 横向Border设置RenderTransform的ScaleTransform.ScaleY="1"，动画控制ScaleTransform.ScaleX从0到1；

  • 纵向Border设置RenderTransform的ScaleTransform.ScaleX="1"，动画控制ScaleTransform.ScaleY从0到1；

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:sys="clr-namespace:System;assembly=mscorlib"
                    xmlns:wpfs="clr-namespace:WPFDevelopers.Minimal.Helpers">
    
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="../Themes/Basic/ControlBasic.xaml"/>
        <ResourceDictionary Source="../Themes/Basic/Animations.xaml"/>
    </ResourceDictionary.MergedDictionaries>

    <Thickness x:Key="BorderThickness">0,0,0,2</Thickness>
    
    <Style x:Key="BaseTAndBTabItem" TargetType="{x:Type TabItem}" BasedOn="{StaticResource ControlBasicStyle}">
        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="MinHeight" Value="48"/>
        <Setter Property="MinWidth" Value="100"/>
        <Setter Property="BorderThickness" Value="{StaticResource BorderThickness}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid Background="{TemplateBinding Background}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected" />
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <DoubleAnimation Duration="00:00:.2"
                                                            To="1"
                                                            Storyboard.TargetName="PART_Border"
                                                            Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleX)"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver" />
                                <VisualState x:Name="Disabled"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="PART_Border" BorderThickness="{TemplateBinding BorderThickness}"
                                RenderTransformOrigin=".5,.5">
                            <Border.RenderTransform>
                                <ScaleTransform ScaleX="0" ScaleY="1"/>
                            </Border.RenderTransform>
                        </Border>
                        <ContentPresenter ContentSource="Header"
                                              VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="PART_Border" Property="BorderBrush" Value="{DynamicResource PrimaryNormalSolidColorBrush}" />
                            <Setter Property="Background" Value="{DynamicResource DefaultBackgroundSolidColorBrush}" />
                            <!--<Setter Property="FontWeight" Value="Black"/>-->
                            <Setter Property="Foreground" Value="{DynamicResource PrimaryNormalSolidColorBrush}"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Foreground" Value="{DynamicResource PrimaryNormalSolidColorBrush}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="BaseLAndRTabItem" TargetType="{x:Type TabItem}" BasedOn="{StaticResource ControlBasicStyle}">
        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="MinHeight" Value="48"/>
        <Setter Property="MinWidth" Value="100"/>
        <Setter Property="BorderThickness" Value="{StaticResource BorderThickness}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid Background="{TemplateBinding Background}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected" />
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <DoubleAnimation Duration="00:00:.2"
                                                            To="1"
                                                            Storyboard.TargetName="PART_Border"
                                                            Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleY)"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver" />
                                <VisualState x:Name="Disabled"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="PART_Border" BorderThickness="{TemplateBinding BorderThickness}"
                                RenderTransformOrigin=".5,.5">
                            <Border.RenderTransform>
                                <ScaleTransform ScaleX="1" ScaleY="0"/>
                            </Border.RenderTransform>
                        </Border>
                        <ContentPresenter ContentSource="Header"
                                              VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="PART_Border" Property="BorderBrush" Value="{DynamicResource PrimaryNormalSolidColorBrush}" />
                            <Setter Property="Background" Value="{DynamicResource DefaultBackgroundSolidColorBrush}" />
                            <!--<Setter Property="FontWeight" Value="Black"/>-->
                            <Setter Property="Foreground" Value="{DynamicResource PrimaryNormalSolidColorBrush}"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Foreground" Value="{DynamicResource PrimaryNormalSolidColorBrush}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="LeftTabItem" TargetType="{x:Type TabItem}" BasedOn="{StaticResource BaseLAndRTabItem}">
        <Setter Property="BorderThickness" Value="0,0,2,0"/>
    </Style>

    <Style x:Key="RightTabItem" TargetType="{x:Type TabItem}" BasedOn="{StaticResource BaseLAndRTabItem}">
        <Setter Property="BorderThickness" Value="2,0,0,0"/>
    </Style>

    <Style x:Key="TopTabItem" TargetType="{x:Type TabItem}" BasedOn="{StaticResource BaseTAndBTabItem}">
        <Setter Property="BorderThickness" Value="0,0,0,2"/>
    </Style>
    <Style x:Key="BottomTabItem" TargetType="{x:Type TabItem}" BasedOn="{StaticResource BaseTAndBTabItem}">
        <Setter Property="BorderThickness" Value="0,2,0,0"/>
    </Style>

    <Style TargetType="{x:Type TabControl}" BasedOn="{StaticResource ControlBasicStyle}">
        <Setter Property="TabStripPlacement" Value="Top" />
        <!--<Setter Property="Margin" Value="2" />-->
        <!--<Setter Property="Padding" Value="2"/>-->
        <Setter Property="Background" Value="{DynamicResource WhiteSolidColorBrush}" />
        <Setter Property="ItemContainerStyle" Value="{StaticResource TopTabItem}"/>
        <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="{DynamicResource BaseSolidColorBrush}" 
                            BorderThickness="0,0,0,1" 
                            Grid.Row="0"
                            Background="{DynamicResource WhiteSolidColorBrush}">
                            <TabPanel IsItemsHost="True"
                                  Name="HeaderPanel" 
                                  Panel.ZIndex="1"
                                  KeyboardNavigation.TabIndex="1"/>
                        </Border>

                        <Grid Name="ContentPanel"
                          KeyboardNavigation.TabIndex="2" 
                          KeyboardNavigation.TabNavigation="Local" 
                          KeyboardNavigation.DirectionalNavigation="Contained" 
                          Grid.Column="0" 
                          Grid.Row="1">
                            <Border>
                                <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="RowDefinition0" Property="RowDefinition.Height" Value="*" />
                            <Setter TargetName="RowDefinition1" Property="RowDefinition.Height" Value="Auto" />
                            <Setter TargetName="HeaderBorder" Property="Grid.Row" Value="1" />
                            <Setter TargetName="ContentPanel" Property="Grid.Row" Value="0" />
                            <Setter TargetName="HeaderBorder" Property="BorderThickness" Value="0,1,0,0" />
                            <Setter Property="ItemContainerStyle" Value="{StaticResource BottomTabItem}"/>
                        </Trigger>
                        <Trigger Property="TabControl.TabStripPlacement" Value="Left">
                            <Setter TargetName="ContentPanel" Property="Grid.Row" 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="BorderThickness" Value="0,0,1,0" />
                            <Setter Property="ItemContainerStyle" Value="{StaticResource LeftTabItem}"/>
                        </Trigger>
                        <Trigger Property="TabControl.TabStripPlacement" Value="Right">
                            <Setter TargetName="ContentPanel" Property="Grid.Row" Value="0" />
                            <Setter TargetName="HeaderBorder" 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="BorderThickness" Value="1,0,0,0" />
                            <Setter Property="ItemContainerStyle" Value="{StaticResource RightTabItem}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

2）Styles.TabControl.xaml 代码如下；

<UniformGrid Columns="2" Rows="2" Margin="0,10">
                    <UniformGrid.Resources>
                        <Style TargetType="{x:Type Rectangle}">
                            <Setter Property="Width" Value="{x:Static SystemParameters.PrimaryScreenWidth}"/>
                            <Setter Property="Height" Value="400"/>
                        </Style>
                    </UniformGrid.Resources>
                    <TabControl>
                        <TabItem Header="TabItem1">
                            <Rectangle Fill="{DynamicResource DangerSolidColorBrush}"/>
                        </TabItem>
                        <TabItem Header="TabItem2">
                            <Rectangle Fill="{DynamicResource InfoSolidColorBrush}"/>
                        </TabItem>
                        <TabItem Header="TabItem3" >
                            <Rectangle Fill="{DynamicResource WarningSolidColorBrush}"/>
                        </TabItem>
                    </TabControl>
                    <TabControl TabStripPlacement="Bottom">
                        <TabItem Header="TabItem1">
                            <Rectangle Fill="{DynamicResource InfoSolidColorBrush}"/>
                        </TabItem>
                        <TabItem Header="TabItem2">
                            <Rectangle Fill="{DynamicResource DangerSolidColorBrush}"/>
                        </TabItem>
                        <TabItem Header="TabItem3" >
                            <Rectangle Fill="{DynamicResource WarningSolidColorBrush}"/>
                        </TabItem>
                    </TabControl>
                    <TabControl TabStripPlacement="Left">
                        <TabItem Header="TabItem1">
                            <Rectangle Fill="{DynamicResource WarningSolidColorBrush}"/>
                        </TabItem>
                        <TabItem Header="TabItem2">
                            <Rectangle Fill="{DynamicResource InfoSolidColorBrush}"/>
                        </TabItem>
                        <TabItem Header="TabItem3" >
                            <Rectangle Fill="{DynamicResource DangerSolidColorBrush}"/>
                        </TabItem>
                    </TabControl>
                    <TabControl TabStripPlacement="Right" IsEnabled="False">
                        <TabItem Header="TabItem1">
                            <Rectangle Fill="{DynamicResource SuccessSolidColorBrush}"/>
                        </TabItem>
                        <TabItem Header="TabItem2">
                            <Rectangle Fill="{DynamicResource InfoSolidColorBrush}"/>
                        </TabItem>
                        <TabItem Header="TabItem3" >
                            <Rectangle Fill="{DynamicResource WarningSolidColorBrush}"/>
                        </TabItem>
                    </TabControl>
                </UniformGrid>

Nuget Install-Package WPFDevelopers.Minimal

ca9cbeac349065f1e3af3dcecdcd172a.gif

[1][2]

参考资料

[1]

GitHub: https://github.com/WPFDevelopersOrg

[2]

Gitee: https://gitee.com/WPFDevelopersOrg

dotNET跨平台
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
C# WPF TabControl控件用法详解
weixin_68436326的博客
02-11 478
C# WPF TabControl用法指南(精品)，上节主要讲解了tabcontrol控件的左右翻页，以及页面筛选，以及数据绑定等内容，这节内容继续接续上节内容进行扩展讲解，主要针对页面删除、增加以及对应的事件进行讲解.
C# WPF TabControl用法指南(精品)
zls365365的博客
11-07 3079
概述 TabControl是我们常用的翻页控件，但是wpf自带的TabControl功能和样式比较单一，假如我的tab页面比较多，标题在有限的空间放不下，需要用左右箭头翻页，同时需要加一个筛选跳转的功能，这时候我们就需要使用Dev的控件DXTabControl.功能演示代码实现 前台XAML:<UserControl x:Class="Caliburn.Micro.Hell...
【WPF应用33】WPF基本控件-TabControl的详解与示例
qq_35320456的博客
04-04 3808
WPF基本控件-TabControl的详解与示例
C# WPF TabControl控件使用
最新发布
fhqiwmc的博客
04-20 365
TabControl 表示包含多个项的控件，这些项共享屏幕上的同一空间。它允许用户在多个标签页之间切换，每个标签页都可以显示不同的内容。这种控件在组织信息、提供选项卡式界面等方面非常有用。正常标签是在项部排列放置， 第一个标签页加上一个路径图标。但有时候我们需要把标签页放左边或右边，这时就使用属性 TabStripPlacement 设置方向。但是放左边时候，文字长占空间时，这里可以使用旋转角度的方法让文字转270度，解决占空间问题。另外还可以增加绑定和动画等效果。
WPF中使用TabControl为每个页签添加不同窗体的方法。
xieehu的博客
02-21 3109
对于一些上位机控制程序来说，一个窗体根本放不下所有的功能，所以我们通常会使用TabControl控件来进行分类布局。通过选择分类选项卡，来展示不同的功能界面。注：每一个页签添加不同窗体，其实不能叫是窗体，只能叫做控件。我们可以右键项目名称，添加一个文件夹，取名为子窗口。然后右键子窗口，添加-用户控件(WPF).首先给TabControl创建一个SelectionChanged的事件，再加入事件代码。一、先建立一个主窗口MainWindow.xaml。三、打开主窗口代码，对控件进行绑定。
WPF TabControl样式
韬光养晦
12-30 1180
WPF TabControl样式
WPF如何自定义TabControl控件样式示例详解
08-27
在 WPF 应用程序中，TabControl控件是非常常用的控件之一。然而，默认的TabControl控件样式可能不符合我们的要求。这篇文章将为大家介绍如何自定义TabControl控件样式，包括如何实现TabControl标题的居中、平均分布...
WPF漂亮的TabControl样式
03-28
综上所述，自定义WPF的TabControl样式是一项涉及样式、模板、VisualStateManager和交互设计的工作。通过精心设计和调试，我们可以创建出既功能强大又具有视觉吸引力的TabControl，提升用户在应用中的体验。在实际...
带关闭按钮可自定义样式的wpf tabcontrol控件
03-13
在Windows Presentation Foundation (WPF) 中，TabControl是一个常用的控件，用于展示...通过学习和实践，开发者不仅可以创建出具有关闭按钮的TabControl，还能掌握更多WPF控件和UI设计技巧，从而提高自己的开发技能。
WPF 自定义控件样式
01-21
本资源包含了一系列自定义的WPF控件样式，如TabControl、Button和ComboBox，非常适合初学者作为学习起点。 1. **WPF 控件样式基础** - **模板化**: WPF中的控件样式基于模板，包括ControlTemplate（控制模板）和...
WPF TabControl 美化_代码
03-07
WPF TabControl 美化 博客提供的代码
WPF 自定义TabControl控件样式（转）
cuoban的学习空间
12-09 4295
WPF 自定义TabControl控件样式 一、前言 程序中经常会用到TabControl控件，默认的控件样式很普通。而且样式或功能不一定符合我们的要求。比如：我们需要TabControl的标题能够居中、或平均分布；或者我们希望TabControl的标题能够进行关闭。要实现这些功能我们需要对TabControl的样式进行定义。 二、实现TabControl的标题平均分布 默认的TabCon...
WPF TabControl基本功能的使用
flysh05的专栏
02-09 9397
因为遇到了一个需求，需要将3个不同的模组的功能整合到一起，当时使用GridSplit将一个界面分隔为3个列，每个列中的内容很多，导致UI不美观。也使用Region的方式去折叠，感觉还是使用TabControl的方式更佳。所以就测试了一下该控件的基本功能，了解了这些基本功能后，就可以很好的使用这个控件了。 基本结构如下： 1. TabItem的创建 <TabControl> <TabItem Header="Tab 1"&gt...
WPF - 界面美化 MahApps.Metro UI
hbspring007的专栏
07-17 788
WPF - 界面美化 MahApps.Metro UI欢迎使用MahApps.Metro我的接入效果接入方式 欢迎使用MahApps.Metro MahApps.Metro资料： 官网地址：https://mahapps.com/ 官网快速开始地址：https://mahapps.com/guides/quick-start.html#explanation 我的接入效果 引入效果版本：2.0 界面效果1： 界面效果2： 操作简单 ，只需使用NuGet安装MahApps.Metro、调整xaml和a.
WPF TabControl 美化
weixin_30614109的博客
12-17 1632
WPF TabControl 美化 千遍一律的面孔，看着都没有新鲜感，就如男人对女人的感觉，美女看久了就开始怀疑自己不是有审美疲劳了。换掉自带的控件样式，换个角度去疲劳。 这里要换的是 TabControl 的默认外观。 先看效果图： 美化过程中遇到的问题： 1，BlurEffect 及 DropShadowEffect 会应...
WPF 自定义控件TabControl
韬光养晦
09-05 2071
WPF 自定义控件TabControl 新TabControl效果： 新添加一个自定义控件ZTabControl： public class ZTabControl : TabControl { #region Private属性 #endregion #region 依赖属性定义 public static readonly DependencyProperty TypeProperty; #endregion
WPF更改TabControl的样式
爱喝奶茶的博客
01-10 943
这个做的不错： https://www.cnblogs.com/ljs0322/p/7084691.html 用Blend来绘制。
WinForm TabControl美化
Sakuya__的博客
04-10 9339
设置Alignment=left 设置DrawMode=OwnerDrawFixed // 设置该属性，可以自己绘制标签内的字 设置ItemSize=30,100 设置SizeMode=Fixed
wpf tabcontrol样式
06-05
WPF中的TabControl是一种非常常见的控件，用于在页面或窗口中显示多个选项卡。为了使TabControl更具吸引力和易用性，可以自定义其样式。 首先，可以为TabControl添加样式，包括边框、边距、背景颜色等，使其更加吸引人。还可以更改选项卡的颜色，包括选定和未选定的选项卡，以及鼠标悬停时的效果。 其次，可以通过自定义头部模板来更改选项卡的外观。可以使用文本、图标或自定义的视觉元素来代替标准选项卡。 在自定义TabControl时，也可以添加其他自定义元素，如工具栏、标签、搜索框等，以增加其功能。 最后，可以通过在子内容中更改样式来自定义选项卡的内容。可以为每个选项卡单独添加样式，并为选项卡中的控件设置样式，以便与其外观一致。 总之，WPF的TabControl样式可以通过自定义选项卡和内容外观以及其他自定义元素，从而使其更加个性化和易用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值