您当前的位置: 首页 > 

寒冰屋

暂无认证

  • 0浏览

    0关注

    2286博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

WPF标签页眉控件,其中包含滚动按钮,可移动标签项和每个标签中的关闭按钮

寒冰屋 发布时间:2020-05-30 14:41:23 ,浏览量:0

目录

介绍

背景

使用代码

自定义

实现

注释

  • 下载演示-29 KB
介绍

对于许多应用程序,希望有一个带有可滚动,重新排列和关闭的选项卡项的选项卡控件。幸运的是,使用标准WPF组件来实现此目标并不难。

本文介绍了一个选项卡页眉控件,其中包含可使用左右箭头按钮滚动并使用简单的拖动操作重新排列的项目。我决定创建一个选项卡页眉控件,而不是一个完整的选项卡控件,以允许更大程度的自定义。将选项卡页眉控件与其他WPF控件组合在一起以创建完整的选项卡控件非常容易。

选项卡页眉控件包括许多依赖项属性,以允许自定义,例如,用于选定和未选定选项卡背景的画笔。

该示例代码包括以下演示应用程序:

顶部选项卡控件包含四个选项卡项。选项卡页眉的每一侧都有左右滚动按钮。默认情况下,滚动按钮绘制为简单的绿色三角形。最右边是显示弹出菜单的按钮,允许用户选择以下选项卡项之一:

中间的标签控件具有标签内容窗格下面的标签,以及滚动按钮的自定义模板。

底部的标签控件具有标签内容窗格上方的标签,以及每个标签项的自定义模板。

主窗口底部的控件允许用户配置字体,标签边框和背景颜色。请注意,该设置不适用于第三个选项卡控件,因为它使用了自定义项目容器样式。

每个选项卡控件的一个关键功能是能够通过将选项卡项拖动到新位置来重新排列它们。

背景

您将需要对C#和Windows开发有充分的了解,并需要WPF的基础知识。

使用代码

在XAML中,第一个标签控件由标签页眉控件、按钮和简单标签构成,以显示当前标签项目的内容。选项卡标题控件的定义如下:


    
    HeaderText
    
        
    
    
        
    
    
        
    
    Black
    
    White
    
    
        
    
    
        
    
    Transparent
    

以上大部分内容都是自我解释。通过TabHeaderItem向ItemsSource属性分配实例的可观察集合来填充选项卡列表。所述TabHeaderItem类的定义如下:

class TabHeaderItem
{
    public string Label { get; set; }
    public int ID { get; set; }

    public string HeaderText
    {
        get
        {
            return Label + " : " + ID;
        }
    }
}

DisplayMemberPath属性的行为方式与ListBox的DisplayMemberPath属性完全相同。它设置为“HeaderText”,因此每个选项卡都显示由关联TabHeaderItem实例的HeaderText属性返回的文本。

有许多属性可控制选项卡项的外观。因此,UnselectedTabBackground属性为未选择的选项卡定义背景画笔。

第二个选项卡控件类似,除了选项卡标题项在选项卡内容下方,并且滚动按钮已重新设置样式。

第三个选项卡控件最有趣,因为它覆盖TabHeaderControl的ItemContainerStyle属性。这样可以完全自定义标签的外观和功能。在这种情况下,大多数属性如UnselectedTabBackground都不会使用。该示例定义了一个带有文本字符串和关闭按钮的选项卡项,其中关闭功能在后面的代码中实现。ItemContainerStyle属性定义如下:


    
        
            
            
            
            
            

            
                
                    
                        
                            
                                
                                    
                                    
                                    
                                    
                                    
                                
                                
                                    
                                        
                                        
                                    
                                
                                
                            
                        
                    
                
            
            
                
                    
                    
                
                
                    
                    
                
            
        
    
    
        
    

触发器用于选择和未选择时设置选项卡的样式。

需要注意的有趣一点是数据模板的以下摘录:

ListBoxItem_PreviewMouseLeftButtonDown处理程序的按钮单击事件之前调用。sender参数是ListBoxItem允许后面的代码确定与后续按钮按下关联的选项卡项目的索引。处理程序代码如下:

private void ListBoxItem_PreviewMouseLeftButtonDown
(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
    System.Windows.Controls.ListBoxItem listBoxItem = 
                   sender as System.Windows.Controls.ListBoxItem;
    if (listBoxItem == null)
    {
        return;
    }

    TabHeaderItem tabHeaderItem = listBoxItem.DataContext as TabHeaderItem;
    if (tabHeaderItem == null)
    {
        return;
    }

    _listBoxItemIndex = (DataContext as MainWindowModel).ListBoxItems.IndexOf(tabHeaderItem);
}

因此,_listBoxItemIndex值定义了与随后的关闭按钮单击事件关联的列表框项目的索引。

自定义

可以使用以下依赖项属性来修改控件的外观和行为:

ItemsSource

获取或设置用于生成选项卡内容的集合

SelectedItem

获取或设置当前选定的项目

SelectedIndex

获取或设置当前选定标签的索引,如果没有选定标签,则返回-1

SelectedValue

获取或设置当前选择的值

SelectedValuePath

获取或设置用于从SelectedItem获取SelectedValue的路径

ArrowTemplate

获取或设置箭头按钮的控制模板。右手按钮与左手按钮相同,只是旋转了180度。

DisplayMemberPath

获取或设置源对象上的值的路径,以用作对象的视觉表示

SelectedTabBackground

获取或设置用于所选选项卡背景的画笔

UnselectedTabBackground

获取或设置用于未选中选项卡的背景的画笔

SelectedTabBorderThickness

获取或设置所选标签的边框粗细

SelectedTabForeground

获取或设置用于选定选项卡的前景的画笔

UnselectedTabForeground

获取或设置用于未选中选项卡的前景的画笔

ItemContainerStyle

获取或设置应用于为每个项目生成的容器元素的Style

 

 

ItemContainerStyle是最强大的依赖属性,因为它允许每个标签项目的完全定制。该演示应用程序包括带有自定义ItemContainerStyle标签的页眉控件。

另外,控件中显示的文本遵循用户控件的标准FontSize,FontFamily和FontStyle的依赖特性。

实现

选项卡页眉控件使用两个按钮控件和一个水平列表的修改列表框实现。列表框由TabHeader类实现,该类派生自标准ListBox类,并增加了重新排列项目的功能。尽管确定如何实现所需的功能并非易事,但是代码很容易理解。

注释

选项卡页眉控件不支持垂直选项卡。通过修改基础TabHeader类来添加它并不难。

关注
打赏
1665926880
查看更多评论
立即登录/注册

微信扫码登录

0.0453s