WPF实现Android或IOS的Tab控件效果

最新推荐文章于 2025-06-13 16:28:26 发布

原创最新推荐文章于 2025-06-13 16:28:26 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#控件 #wpf #TabControl

C# 同时被 2 个专栏收录

48 篇文章

订阅专栏

wpf

20 篇文章

订阅专栏

本文介绍如何使用WPF自定义TabControl控件，通过在TabItem模板中添加自定义Label来实现选中项的下划线效果，并提供了一个简单的切换处理逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在手机上，我们看到干净整洁的TabControl，如下图所示：
QQ的TabControl界面：
这里写图片描述
网易云的TabControl界面：

最后我用WPF实现的TabControl:

虽然虽然丑了一大节，但是但是至少也做到了外观相似啊，颜色、字体、宽度都可以自定义。
做这个控件的思路如下：
1.从Blend中找到TabControl和TabItem的XAML模版
2.在TabItem的模版下面加上一个Lable,Lable的高度、颜色可以自定义
3.切换Page时，将当前选中的Item下的Lable设置为可见，其他设置为不可见。
4.由于要新增加属性和找到模版中的Lable,所以自定义了两个类：
TonyTabControl继承自TabControl
TonyTabItem继承自TabItem
然后在TonyTabItem中新增属性，下划线的隐藏处理也是在TonyTabItem中处理的。
具体的XAML模版代码我就不贴了，请从这里下载源码
后台处理隐藏与显示下划线的TabItem中的代码：

 public override void OnApplyTemplate()
       {
           base.OnApplyTemplate();

           lb = GetTemplateChild("lb") as Label;


           TonyTabControl tc = this.Parent as TonyTabControl;
           if (tc != null && this.lb != null)
           {
               if (tc.SelectedItem == this)
               {
                   this.lb.Visibility = System.Windows.Visibility.Visible;
                   this.Foreground = SelectedColor;
               }
               else
               {
                   this.lb.Visibility = System.Windows.Visibility.Collapsed;
                   this.Foreground = new SolidColorBrush(Colors.Black);
               }
           }                           
       }