AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

WPF自定义TabControl样式

2018-11-22 4798
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:WPF自定义TabControl样式WPF自定义TabControl，TabControl美化 XAML代码： ...
原文: 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);
                }
            }
        }
        #endregion

        private 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);
        }
        #endregion

        private 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

效果图：

 

文章标签：
C#
关键词：
wpf样式
wpf tabcontrol
wpf自定义
杰克.陈
目录
相关文章
关关长语
|
C#
WPF疑难问题之Treeview中HierarchicalDataTemplate多级样式
WPF疑难问题之Treeview中HierarchicalDataTemplate多级样式
关关长语
290 0
广州爱奇迪-伍华聪
|
1月前
|
开发框架 缓存 前端开发
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
广州爱奇迪-伍华聪
66 15
土木林森
|
21天前
|
开发者 C# 存储
WPF开发者必读：资源字典应用秘籍，轻松实现样式与模板共享，让你的WPF应用更上一层楼！
【8月更文挑战第31天】在WPF开发中，资源字典是一种强大的工具，用于共享样式、模板、图像等资源，提高了应用的可维护性和可扩展性。本文介绍了资源字典的基础知识、创建方法及最佳实践，并通过示例展示了如何在项目中有效利用资源字典，实现资源的重用和动态绑定。
土木林森
36 0
土木林森
|
21天前
|
开发者 C# 存储
WPF开发者必读：样式与模板的艺术，轻松定制UI外观，让你的应用程序更上一层楼！
【8月更文挑战第31天】在WPF应用开发中，样式与模板是实现美观界面与一致性的关键工具。样式定义了控件如字体、颜色等属性，而模板则允许自定义控件布局与子控件，两者均可存储于`.xaml`文件中。本文介绍了样式与模板的基础知识，通过示例展示了如何创建并应用它们来改变按钮的外观，从而提升用户体验。
土木林森
26 0
广州爱奇迪-伍华聪
|
1月前
|
开发框架 前端开发 JavaScript
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(3)--自定义用户控件
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(3)--自定义用户控件
广州爱奇迪-伍华聪
39 2
VipSoft
|
1月前
|
C#
WPF 自定义可拖动标题栏
WPF 自定义可拖动标题栏
VipSoft
26 0
mingupup
|
1月前
|
存储 前端开发 C#
WPF/C#:更改界面的样式
WPF/C#:更改界面的样式
mingupup
32 0
广州爱奇迪-伍华聪
|
1月前
|
开发框架 前端开发 C#
使用WPF开发自定义用户控件，以及实现相关自定义事件的处理
使用WPF开发自定义用户控件，以及实现相关自定义事件的处理
广州爱奇迪-伍华聪
54 0
关关长语
WPF-布局样式练习-Day02-聊天气泡
WPF-布局样式练习-Day02-聊天气泡
关关长语
203 1
老码识途
|
4月前
|
C#
浅谈WPF之样式与资源
WPF通过样式，不仅可以方便的设置控件元素的展示方式，给用户呈现多样化的体验，还简化配置，避免重复设置元素的属性，以达到节约成本，提高工作效率的目的，样式也是资源的一种表现形式。本文以一个简单的小例子，简述如何设置WPF的样式以及资源的应用，仅供学习分享使用，如有不足之处，还请指正。
老码识途
98 0