WPF自定义TabControl样式

article/2025/10/10 18:25:27
WPF自定义TabControl样式
原文: WPF自定义TabControl样式

WPF自定义TabControl,TabControl美化

XAML代码:

<TabControl x:Class="SunCreate.Common.Controls.TabControlEx"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:SunCreate.Common.Controls"mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300" SelectionChanged="TabControl_SelectionChanged" ><TabControl.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries></ResourceDictionary.MergedDictionaries><!--菜单样式--><ControlTemplate x:Key="menuTemplate" TargetType="ContextMenu"><Border Name="bd" Background="#99001133"><ItemsPresenter/></Border></ControlTemplate><ControlTemplate x:Key="menuSeperatorTemplate" TargetType="Separator"><Border Background="#6fff"></Border></ControlTemplate><ControlTemplate x:Key="menuItemTemplate" TargetType="MenuItem"><Border Name="bd" Height="30" Background="Transparent"><StackPanel Orientation="Horizontal"><Image x:Name="img" Stretch="None" Margin="10,0,10,0" Source="/SunCreate.Common.Controls;Component/Images/Controls/二级菜单左箭头.png"></Image><TextBlock x:Name="tb" Margin="0,0,10,0" Foreground="#fff" VerticalAlignment="Center" Text="{Binding Header, RelativeSource={RelativeSource TemplatedParent}}"/></StackPanel></Border><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter TargetName="bd" Property="Background" Value="#99001133" /><Setter TargetName="tb" Property="Foreground" Value="#ff5e5e" /><Setter TargetName="tb" Property="Margin" Value="0,0,9,0" /><Setter TargetName="img" Property="Source" Value="/SunCreate.Common.Controls;Component/Images/Controls/左箭头_选中.png"></Setter></Trigger></ControlTemplate.Triggers></ControlTemplate></ResourceDictionary></TabControl.Resources><TabControl.Template><ControlTemplate TargetType="TabControl" ><ControlTemplate.Resources><Style TargetType="TabItem"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="TabItem"><Grid x:Name="gridTabItem" Tag="{Binding ElementName=tabCloseBtn}" HorizontalAlignment="Center" MouseLeftButtonDown="tabItem_MouseLeftButtonDown" MouseRightButtonUp="tabItem_MouseRightButtonUp" ><Grid.ColumnDefinitions><ColumnDefinition></ColumnDefinition><ColumnDefinition></ColumnDefinition><ColumnDefinition Width="16"></ColumnDefinition><ColumnDefinition></ColumnDefinition></Grid.ColumnDefinitions><Path x:Name="pathLeft" Height="4" Width="5" Data="M 0,4 L 5,4 5,0 C 5,0 5,4 0,4 Z" Fill="#096691" StrokeThickness="0" VerticalAlignment="Bottom" Visibility="Collapsed" SnapsToDevicePixels="True" ></Path><Path x:Name="pathRight" Height="4" Width="5" Data="M 0,0 L 0,4 5,4 C 5,4 0,4 0,0 Z" Grid.Column="3" Fill="#096691" StrokeThickness="0" VerticalAlignment="Bottom" Visibility="Collapsed" SnapsToDevicePixels="True" ></Path><Border x:Name="bdText" Grid.Column="1" Margin="0 0 0 0" Background="#096691" CornerRadius="3 0 0 0" SnapsToDevicePixels="True" ><TextBlock x:Name="txt" Margin="15 0 10 0" FontSize="12" Foreground="#fff" FontFamily="微软雅黑,黑体" Text="{TemplateBinding Header}" VerticalAlignment="Center"></TextBlock></Border><Border x:Name="bdBtn" Grid.Column="2" Margin="0 0 0 0" Background="#096691" CornerRadius="0 3 0 0" SnapsToDevicePixels="True" ></Border><Button x:Name="btnTabItemClose" Grid.Column="2" Width="7" Height="7" HorizontalAlignment="Right" Click="btnTabItemClose_Click" VerticalAlignment="Top"  Margin="0,5,5,0"><Button.Template><ControlTemplate TargetType="{x:Type Button}"><Border Background="Transparent"><Image Stretch="Fill" x:Name="imgTabClose" Source="/SunCreate.Common.Controls;Component/Images/Controls/菜单关闭.png" ></Image></Border><ControlTemplate.Triggers><Trigger Property="IsPressed" Value="true"><Setter TargetName="imgTabClose"  Property="Margin" Value="1"></Setter></Trigger><Trigger Property="IsMouseOver" Value="true"><Setter TargetName="imgTabClose"  Property="Margin" Value="1"></Setter></Trigger></ControlTemplate.Triggers></ControlTemplate></Button.Template></Button></Grid><ControlTemplate.Triggers><Trigger Property="IsSelected" Value="true"><Setter TargetName="bdText" Property="Background" Value="#012f3f"></Setter><Setter TargetName="bdBtn" Property="Background" Value="#012f3f"></Setter><Setter TargetName="pathLeft" Property="Fill" Value="#012f3f"></Setter><Setter TargetName="pathRight" Property="Fill" Value="#012f3f"></Setter><Setter TargetName="pathLeft" Property="Visibility" Value="Visible"></Setter><Setter TargetName="pathRight" Property="Visibility" Value="Visible"></Setter><Setter TargetName="gridTabItem" Property="Margin" Value="0 0 -8 0"></Setter></Trigger><Trigger Property="IsSelected" Value="false"><Setter TargetName="gridTabItem" Property="Margin" Value="5 0 -3 0"></Setter><Setter TargetName="txt" Property="Foreground" Value="#78a7c1"></Setter></Trigger><Trigger Property="IsMouseOver" Value="true"><Setter TargetName="txt" Property="Foreground" Value="#f2f5f7"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></ControlTemplate.Resources><Grid><Grid.RowDefinitions><RowDefinition Height="26"></RowDefinition><RowDefinition Height="1*"></RowDefinition></Grid.RowDefinitions><Border><StackPanel MinWidth="{TemplateBinding Property=ActualWidth}" Orientation="Horizontal" Margin="2,0,0,0" IsItemsHost="True"></StackPanel></Border><Border Grid.Row="1" Background="#012f3f" CornerRadius="2" ><ContentPresenter  Content="{TemplateBinding Property=SelectedContent }"></ContentPresenter></Border></Grid></ControlTemplate></TabControl.Template><TabControl.ContextMenu><ContextMenu Name="menu" Template="{StaticResource menuTemplate}"><MenuItem Header="关闭标签" Template="{StaticResource menuItemTemplate}" CommandParameter="0" Click="menuItemClick"></MenuItem><Separator Height="1" Template="{StaticResource menuSeperatorTemplate}" Margin="1 0 1 0"></Separator><MenuItem Header="关闭其他标签" Template="{StaticResource menuItemTemplate}" CommandParameter="1" Click="menuItemClick"></MenuItem><MenuItem Header="关闭左侧标签" Template="{StaticResource menuItemTemplate}" CommandParameter="2" Click="menuItemClick"></MenuItem><MenuItem Header="关闭右侧标签" Template="{StaticResource menuItemTemplate}" CommandParameter="3" Click="menuItemClick"></MenuItem></ContextMenu></TabControl.ContextMenu>
</TabControl>
View Code

C#代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;namespace SunCreate.Common.Controls
{/// <summary>/// TabControl控件封装/// </summary>public partial class TabControlEx : TabControl{/// <summary>/// TabItem右键菜单源/// </summary>private TabItem _contextMenuSource;public TabControlEx(){InitializeComponent();}private void tabItem_MouseLeftButtonDown(object sender, MouseButtonEventArgs e){}private void tabItem_MouseRightButtonUp(object sender, MouseButtonEventArgs e){_contextMenuSource = (sender as Grid).TemplatedParent as TabItem;this.menu.PlacementTarget = sender as Grid;this.menu.Placement = PlacementMode.MousePoint;this.menu.IsOpen = true;}#region TabItem右键菜单点击事件private void menuItemClick(object sender, RoutedEventArgs e){MenuItem btn = e.Source as MenuItem;int data = Convert.ToInt32(btn.CommandParameter.ToString());if (_contextMenuSource != null){List<TabItem> tabItemList = new List<TabItem>();if (data == 0){tabItemList.Add(_contextMenuSource);}if (data == 1){for (int i = 0; i < this.Items.Count; i++){TabItem tabItem = this.Items[i] as TabItem;if (tabItem != _contextMenuSource){tabItemList.Add(tabItem);}}}if (data == 2){for (int i = 0; i < this.Items.Count; i++){TabItem tabItem = this.Items[i] as TabItem;if (tabItem != _contextMenuSource){tabItemList.Add(tabItem);}else{break;}}}if (data == 3){for (int i = this.Items.Count - 1; i >= 0; i--){TabItem tabItem = this.Items[i] as TabItem;if (tabItem != _contextMenuSource){tabItemList.Add(tabItem);}else{break;}}}foreach (TabItem tabItem in tabItemList){CloseTabItem(tabItem);}}}#endregionprivate void btnTabItemClose_Click(object sender, RoutedEventArgs e){var btn = sender as Button;var tmplParent = (btn.Parent as Grid).TemplatedParent;var tabItem = tmplParent as TabItem;CloseTabItem(tabItem);}#region 关闭TabItem/// <summary>/// 关闭TabItem/// </summary>private void CloseTabItem(TabItem tabItem){if (tabItem.Content is WorkSpaceContent){var content = tabItem.Content as WorkSpaceContent;if (content != null){content.Disposed();}tabItem.Content = null;content = null;}this.Items.Remove(tabItem);}#endregionprivate void TabControl_SelectionChanged(object sender, SelectionChangedEventArgs e){foreach (TabItem tabItem in e.RemovedItems){Panel.SetZIndex(tabItem, 99);}foreach (TabItem tabItem in e.AddedItems){Panel.SetZIndex(tabItem, 999);}}}
}
View Code

效果图:

 

posted on 2019-04-02 11:38 NET未来之路 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/10641641.html


http://chatgpt.dhexx.cn/article/7I0gr7bQ.shtml

相关文章

C# WinForm TabControl美化

窗口Load加下面代码&#xff0c;ItemSize根据自己显示文本长度调整 #region tabMainItem属性设置this.tabModuleMainItem.DrawMode TabDrawMode.OwnerDrawFixed;this.tabModuleMainItem.Alignment TabAlignment.Top;this.tabModuleMainItem.SizeMode TabSizeMode.Fixed;this…

浅谈C#tabcontrol应用

作为Winfrom开发者来说&#xff0c;我们很多时候会用到tabcontrol来实现和网页标签页相关的效果。同时微软自带的控件样式不符合我们的需求&#xff0c;我们该如何去实现更加美观且可以自定义的组合控件呢&#xff1f;带着这个问题进入我们今天的主题&#xff0c;组合控件tabco…

C# WPF TabControl控件用法详解

概述 TabControl我之前有讲过一节&#xff0c;内容详见&#xff1a; C# WPF TabControl用法指南(精品)&#xff0c;上节主要讲解了tabcontrol控件的左右翻页&#xff0c;以及页面筛选&#xff0c;以及数据绑定等内容&#xff0c;这节内容继续接续上节内容进行扩展讲解&#xff…

WPF 自定义控件TabControl

WPF 自定义控件TabControl 新TabControl效果&#xff1a; 新添加一个自定义控件ZTabControl&#xff1a; public class ZTabControl : TabControl{#region Private属性#endregion#region 依赖属性定义public static readonly DependencyProperty TypeProperty;#endregion#r…

Winform TabControl标签美化

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

WPF 自定义TabControl控件样式(转)

WPF 自定义TabControl控件样式 一、前言 程序中经常会用到TabControl控件&#xff0c;默认的控件样式很普通。而且样式或功能不一定符合我们的要求。比如&#xff1a;我们需要TabControl的标题能够居中、或平均分布&#xff1b;或者我们希望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 水平使用的TabControl 效果&#xff1a; 样式资源 <!-- 顶部TabControl控件样式 --><SolidColorBrush x:Key"TabItem.Static.Background" Color"White"/><SolidColorBrush x:Key"TabItem.Static.Border&quo…

MFC tabcontrol切换界面

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

TabControl控件

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

WPF 控件专题 TabControl控件详解

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

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美化

实现效果 XMAL样式 <Window.Resources><!-- TabItem的样式 --><Style TargetType"{x:Type TabItem}"><Setter Property"Template"><Setter.Value><ControlTemplate TargetType"{x:Type TabItem}"><Gr…

WPF动态加载TabControl

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

C# TabControl

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

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美化

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

MFC中选项卡TabControl控件的用法

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

C#中TabControl相关用法

最近在用C#做项目时&#xff0c;用到TabControl这个控件&#xff0c;将学到的东西做个总结&#xff1a; 一、拖一个TabControl控件到窗口上&#xff0c;在控件上点击右键&#xff0c;可以添加选项卡/删除选项卡&#xff1b;或者在属性中找到TabPages,点击进去&#xff0c;可以看…

【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)…