WPF 自定义控件TabControl

article/2025/10/10 19:10:37

WPF 自定义控件TabControl

新TabControl效果：
在这里插入图片描述
在这里插入图片描述
新添加一个自定义控件ZTabControl：

public class ZTabControl : TabControl{#region Private属性#endregion#region 依赖属性定义public static readonly DependencyProperty TypeProperty;#endregion#region 依赖属性set getpublic EnumTabControlType Type{get { return (EnumTabControlType)GetValue(TypeProperty); }set { SetValue(TypeProperty, value); }}public object HeaderContent{get { return (object)GetValue(HeaderContentProperty); }set { SetValue(HeaderContentProperty, value); }}// Using a DependencyProperty as the backing store for HeaderContent.  This enables animation, styling, binding, etc...public static readonly DependencyProperty HeaderContentProperty =DependencyProperty.Register("HeaderContent", typeof(object), typeof(ZTabControl));#endregion#region Constructorsstatic ZTabControl(){DefaultStyleKeyProperty.OverrideMetadata(typeof(ZTabControl), new FrameworkPropertyMetadata(typeof(ZTabControl)));ZTabControl.TypeProperty = DependencyProperty.Register("Type", typeof(EnumTabControlType), typeof(ZTabControl), new PropertyMetadata(EnumTabControlType.Line));}#endregion#region Override方法protected override DependencyObject GetContainerForItemOverride(){return new TabItem();}#endregion#region Private方法#endregion}

添加一个ControlEnum类文件，删除默认的类，创建一个枚举变量；

  public enum EnumTabControlType{Line,Card,}

最后在Themes文件夹下的Generic.xaml中添加样式：

<ResourceDictionaryxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:WpfApp10"><SolidColorBrush x:Key="TabItem.MouseOver.Border" Color="#7EB4EA" /><SolidColorBrush x:Key="TabItem.Disabled.Background" Color="#F0F0F0" /><SolidColorBrush x:Key="TabItem.Disabled.Border" Color="#D9D9D9" /><SolidColorBrush x:Key="TabItem.Selected.Background" Color="#00FFFFFF" /><SolidColorBrush x:Key="TabItem.Selected.Border" Color="#D7DDE4" /><Style x:Key="TabItemStyle" TargetType="{x:Type TabItem}"><Setter Property="FocusVisualStyle" Value="{x:Null}" /><Setter Property="Foreground" Value="#818181" /><Setter Property="Padding" Value="5,3,5,3" /><Setter Property="HorizontalContentAlignment" Value="Stretch" /><Setter Property="VerticalContentAlignment" Value="Stretch" /><Setter Property="SnapsToDevicePixels" Value="True" /><Setter Property="UseLayoutRounding" Value="True" /><Setter Property="BorderThickness" Value="0,0,0,2" /><Setter Property="Background" Value="#FFFFFF" /><Setter Property="BorderBrush" Value="Transparent" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type TabItem}"><Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"BorderThickness="{TemplateBinding BorderThickness}" Margin="{TemplateBinding Margin}"Padding="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"UseLayoutRounding="{TemplateBinding UseLayoutRounding}"><ContentPresenter x:Name="contentPresenter"Margin="{TemplateBinding Padding}"HorizontalAlignment="{Binding HorizontalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"VerticalAlignment="{Binding VerticalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"ContentSource="Header" Focusable="False" RecognizesAccessKey="True"SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /></Border><ControlTemplate.Triggers><MultiDataTrigger><MultiDataTrigger.Conditions><Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true" /><Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top" /><Condition Binding="{Binding Type, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Line" /></MultiDataTrigger.Conditions><Setter TargetName="border" Property="Cursor" Value="Hand" /><Setter Property="BorderBrush" Value="#007ACC" /></MultiDataTrigger><MultiDataTrigger><MultiDataTrigger.Conditions><Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true" /><Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top" /><Condition Binding="{Binding Type, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Line" /></MultiDataTrigger.Conditions><Setter Property="Panel.ZIndex" Value="1" /><Setter Property="BorderBrush" Value="#007ACC" /><Setter Property="Foreground" Value="#007ACC" /><Setter Property="Background" Value="#FFFFFF" /></MultiDataTrigger><MultiDataTrigger><MultiDataTrigger.Conditions><Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true" /><Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top" /><Condition Binding="{Binding Type, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Card" /></MultiDataTrigger.Conditions><Setter TargetName="border" Property="Cursor" Value="Hand" /><Setter Property="Background" Value="#FFFFFF" /><Setter Property="BorderBrush" Value="#007ACC" /></MultiDataTrigger><MultiDataTrigger><MultiDataTrigger.Conditions><Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true" /><Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top" /><Condition Binding="{Binding Type, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Card" /></MultiDataTrigger.Conditions><Setter Property="Panel.ZIndex" Value="1" /><Setter Property="BorderBrush" Value="#D7DDE4" /><Setter Property="Background" Value="#FFFFFF" /><Setter Property="BorderThickness" Value="1,1,1,0" /><Setter Property="Foreground" Value="#64778D" /><Setter Property="Margin" Value="0,0,5,-1.3" /></MultiDataTrigger><MultiDataTrigger><MultiDataTrigger.Conditions><Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="False" /><Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top" /><Condition Binding="{Binding Type, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Card" /></MultiDataTrigger.Conditions><Setter Property="Panel.ZIndex" Value="1" /><Setter Property="BorderBrush" Value="#D7DDE4" /><Setter Property="BorderThickness" Value="1,1,1,0" /><Setter Property="Background" Value="#F5F7F9" /><Setter Property="Foreground" Value="#64778D" /><Setter Property="Margin" Value="0,0,5,0" /></MultiDataTrigger><DataTrigger Binding="{Binding Type, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Line"><Setter Property="Margin" Value="0" /><Setter Property="UseLayoutRounding" Value="True" /></DataTrigger><DataTrigger Binding="{Binding Type, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Card"><Setter TargetName="border" Property="CornerRadius" Value="3,3,0,0" /></DataTrigger><MultiDataTrigger><MultiDataTrigger.Conditions><Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false" /><Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top" /></MultiDataTrigger.Conditions><Setter TargetName="contentPresenter" Property="Opacity" Value="0.56" /></MultiDataTrigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><Style TargetType="{x:Type local:ZTabControl}"><Setter Property="Padding" Value="0" /><Setter Property="HorizontalContentAlignment" Value="Center" /><Setter Property="VerticalContentAlignment" Value="Center" /><Setter Property="Background" Value="{StaticResource TabItem.Selected.Background}" /><Setter Property="BorderBrush" Value="{StaticResource TabItem.Selected.Border}" /><Setter Property="BorderThickness" Value="0,1,0,0" /><Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" /><Setter Property="ItemContainerStyle" Value="{StaticResource TabItemStyle}" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type local:ZTabControl}"><Grid x:Name="templateRoot" ClipToBounds="true" KeyboardNavigation.TabNavigation="Local" SnapsToDevicePixels="true"><Grid.ColumnDefinitions><ColumnDefinition /><ColumnDefinition Width="auto" /></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition Height="Auto" /><RowDefinition Height="*" /></Grid.RowDefinitions><TabPanel x:Name="headerPanel" Grid.Row="0" Grid.Column="0" Margin="0,2,0,0"Panel.ZIndex="1" Background="Transparent" IsItemsHost="true" KeyboardNavigation.TabIndex="1" /><ContentPresenter Content="{TemplateBinding HeaderContent}" Grid.Column="1" /><Border x:Name="contentPanel" Grid.Row="1" Grid.ColumnSpan="2"Background="{TemplateBinding Background}"BorderBrush="{TemplateBinding BorderBrush}"BorderThickness="{TemplateBinding BorderThickness}"KeyboardNavigation.DirectionalNavigation="Contained" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local" SnapsToDevicePixels="True"UseLayoutRounding="True"><ContentPresenter x:Name="PART_SelectedContentHost"Margin="{TemplateBinding Padding}"ContentSource="SelectedContent"SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /></Border></Grid><ControlTemplate.Triggers><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>
</ResourceDictionary>

注意如果样式文件在其他路径下面，需要在App.xaml文件中添加如下引用：

<Application x:Class="WpfApp10.App"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:WpfApp10"StartupUri="MainWindow.xaml"><Application.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><ResourceDictionary Source="myControls/Themes/Generic.xaml"></ResourceDictionary></ResourceDictionary.MergedDictionaries></ResourceDictionary></Application.Resources>
</Application>

窗体Xaml代码：
Type可以选择Card或Line

<Grid><local:ZTabControl Margin="10" Type="Card"><local:ZTabControl.HeaderContent><Button Content="增加" Width="50" Height="25" /></local:ZTabControl.HeaderContent><TabItem Header="计算机"><Border><TextBlock Text="计算机" VerticalAlignment="Center" HorizontalAlignment="Center" /></Border></TabItem><TabItem Header="物联网"><Border><TextBlock Text="物联网" VerticalAlignment="Center" HorizontalAlignment="Center" /></Border></TabItem><TabItem Header="区块链"><Border><TextBlock Text="区块链" VerticalAlignment="Center" HorizontalAlignment="Center" /></Border></TabItem><TabItem Header="数据库"><Border><TextBlock Text="数据库" VerticalAlignment="Center" HorizontalAlignment="Center" /></Border></TabItem><TabItem Header="云计算"><Border><TextBlock Text="云计算" VerticalAlignment="Center" HorizontalAlignment="Center" /></Border></TabItem><TabItem Header="大数据"><Border><TextBlock Text="大数据" VerticalAlignment="Center" HorizontalAlignment="Center" /></Border></TabItem></local:ZTabControl></Grid>

http://chatgpt.dhexx.cn/article/3PXuqnwY.shtml

相关文章

Winform TabControl标签美化

Winform TabControl标签美化

前期工作&#xff1a; 加载资源文件&#xff0c;双击“Resources.resx" 类型选择Images 【添加资源】——【添加现有文件】 选择需要添加的图片文件&#xff0c;保存即可。 在下面的资源文件夹中即可看到添加的图片列表 **方法一&#xff1a;**重绘标签及背景 新建窗体…
阅读更多...
WPF 自定义TabControl控件样式（转）

WPF 自定义TabControl控件样式（转）

WPF 自定义TabControl控件样式 一、前言 程序中经常会用到TabControl控件&#xff0c;默认的控件样式很普通。而且样式或功能不一定符合我们的要求。比如&#xff1a;我们需要TabControl的标题能够居中、或平均分布&#xff1b;或者我们希望TabControl的标题能够进行关闭。要…
阅读更多...
WPF TabControl 数据绑定

WPF TabControl 数据绑定

WPF TabControl in Binding’s world 首先&#xff0c;TabControl是间接继承自ItemControl的控件&#xff0c;因此可以像ItemControl那样自如的使用。 自此&#xff0c;我们知道了ItemControl的派生控件有&#xff1a; ItemControl–>Selector–>ListBox ItemControl…
阅读更多...
WPF TabControl Styles

WPF TabControl Styles

WPF TabControl Styles 水平使用的TabControl 效果&#xff1a; 样式资源 <!-- 顶部TabControl控件样式 --><SolidColorBrush x:Key"TabItem.Static.Background" Color"White"/><SolidColorBrush x:Key"TabItem.Static.Border&quo…
阅读更多...
MFC tabcontrol切换界面

MFC tabcontrol切换界面

1.添加控件tabcontrol。 2.切换到资源界面->Dialog->插入Dialog&#xff0c;创建两个Dialog界面。 3.为新建的两个Dialog添加类&#xff0c;在新建的Dialog界面右键类向导添加对应的类。 4.添加TabSheet.cpp 和TabSheet.h 这两个文件从网上下载即可&#xff0c;具体源码如…
阅读更多...
TabControl控件

TabControl控件

点餐用到的控件&#xff1a; 1&#xff09;TabControl: 管理并向用户显示可以包含控件和组件的相关选项卡的信息 2&#xff09;ComboBox: 显示一个可编辑的文本框&#xff0c;其中包含一个允许值下拉列表 3&#xff09;DateTimePicker: 允许用户设定日期和时间&#x…
阅读更多...
WPF 控件专题 TabControl控件详解

WPF 控件专题 TabControl控件详解

1、TabControl 介绍 TabControl 表示包含多个项的控件&#xff0c;这些项共享屏幕上的同一空间&#xff0c;每个区域都可以通过单击通常位于控件顶部的选项卡标题来访问。 也叫选项卡控件。 *******************************************************************************…
阅读更多...
WPF 基础控件之 TabControl样式

WPF 基础控件之 TabControl样式

其他基础控件 1.Window2.Button3.CheckBox4.ComboBox5.DataGrid 6.DatePicker7.Expander8.GroupBox9.ListBox10.ListView11.Menu12.PasswordBox13.TextBox14.RadioButton15.ToggleButton16.Slider 17.TreeView TabControl 实现下面的效果 1&#xff09;TabControl来实现动画&…
阅读更多...
WPF TabControl美化

WPF TabControl美化

实现效果 XMAL样式 <Window.Resources><!-- TabItem的样式 --><Style TargetType"{x:Type TabItem}"><Setter Property"Template"><Setter.Value><ControlTemplate TargetType"{x:Type TabItem}"><Gr…
阅读更多...
WPF动态加载TabControl

WPF动态加载TabControl

主要讲一下如何通过点击菜单&#xff0c;实现动态加载TabControl的功能&#xff0c;准确来说应该是动态加载TabItem,要实现这个功能&#xff0c;我们需要解决两个问题&#xff1a; 点击菜单的时候&#xff0c;需要传进来一个你要加载的UserControl控件的名称&#xff0c;让程序…
阅读更多...
C# TabControl

C# TabControl

C# TabControl 你好&#xff01; 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章&#xff0c;了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持&#xff0c;除了标…
阅读更多...
TabControl

TabControl

jquery主体&#xff1a; var TabControl function (ops) {this._ops {items: ops.items || [],hashItems: {},selectedIndex: ops.selectedIndex || 0};this._element $(ops.element);this._tabContainerId "ui-tabcontrol-container-";this._convertHashItems()…
阅读更多...
WinForm TabControl美化

WinForm TabControl美化

一、简述 TabControl控件是winform里非常常用的一个控件&#xff0c;但是默认的tab控件的标签页和文字颜色都是无法修改的。有时候我们会要用到竖排列的标签页&#xff0c;或者想要更改标签页的背景颜色和字体时&#xff0c;自带的TabControl就满足不了我们的需求了&#xff0…
阅读更多...
MFC中选项卡TabControl控件的用法

MFC中选项卡TabControl控件的用法

前言&#xff1a;我这里的开发环境是VS2010&#xff0c;其它不同的开发环境可能会有所差别&#xff0c;但绝不会差太多&#xff0c;其根本方法一般是不会变的。 选项卡控件(英文名&#xff1a;TabControl),这个控件使用在开发一些比较复杂&#xff0c;和用户交互性比较多的软件…
阅读更多...
C#中TabControl相关用法

C#中TabControl相关用法

最近在用C#做项目时&#xff0c;用到TabControl这个控件&#xff0c;将学到的东西做个总结&#xff1a; 一、拖一个TabControl控件到窗口上&#xff0c;在控件上点击右键&#xff0c;可以添加选项卡/删除选项卡&#xff1b;或者在属性中找到TabPages,点击进去&#xff0c;可以看…
阅读更多...
【Wayland】Weston启动流程分析

【Wayland】Weston启动流程分析

Weston启动流程分析 Weston是Wayland Compositor的实现。其Server端作为独立的进程运行在系统中。MakeFile中编译成果为&#xff0c;“weston”的可执行程序MakeFile.am(weston 2.0.0) bin_PROGRAMS westonweston_LDFLAGS -export-dynamic weston_CPPFLAGS $(AM_CPPFLAGS)…
阅读更多...
Weston 纹理倒置(render-gl)

Weston 纹理倒置(render-gl)

纹理倒置 背景 在 render-gl 接入 frame buffer object 实现 off-screen 渲染后,发现得到的渲染图发生了180的倒置. 查阅了有关资料后,在 eglspec.1.5 中的 2.2.2.1 Native Surface Coordinate Systems 找到了答案: The coordinate system for native windows and pixmaps …
阅读更多...
【Wayland】Wayland简介与定制指导

【Wayland】Wayland简介与定制指导

Wayland与Weston简介 由于某些原因。移植并定制一套基于Wayland的Compositor。Wayland与Weston&#xff0c;是两个相辅相成的概念。这里简单总结一下&#xff1a; wayland是一套为“显示”服务的协议&#xff0c;基于C/S结构。它定制了一套标准的接口、基本通信方式。wayland…
阅读更多...
display:weston:weston-simple-egl

display:weston:weston-simple-egl

写在前面&#xff1a; 客户端渲染 在Wayland架构中&#xff0c;客户端UI的所有呈现均由客户端代码执行&#xff0c;通常由客户端使用的图形工具包执行。 图形工具箱可以使用其希望呈现UI元素的任何方法&#xff1a;在CPU上进行软件呈现&#xff0c;使用GLES进行硬件呈现。 W…
阅读更多...
Ubuntu 20.04 X86成功编译运行wayland、wayland-protocols、weston,亲测有效，踩了很多坑，完美解决。

Ubuntu 20.04 X86成功编译运行wayland、wayland-protocols、weston,亲测有效，踩了很多坑，完美解决。

编译前期准备&#xff1a; 1、更换国内源&#xff1a; #添加阿里源 deb http://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse deb-src http://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse deb http://mirrors.aliyun.c…
阅读更多...
推荐文章

Copyright @ 2022~2023