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

在手机上,我们看到干净整洁的TabControl,如下图所示:
QQ的TabControl界面:
WPF实现Android或IOS的Tab控件效果_第1张图片
网易云的TabControl界面:
WPF实现Android或IOS的Tab控件效果_第2张图片
最后我用WPF实现的TabControl:
WPF实现Android或IOS的Tab控件效果_第3张图片
WPF实现Android或IOS的Tab控件效果_第4张图片
WPF实现Android或IOS的Tab控件效果_第5张图片
WPF实现Android或IOS的Tab控件效果_第6张图片
虽然虽然丑了一大节,但是但是至少也做到了外观相似啊,颜色、字体、宽度都可以自定义。
做这个控件的思路如下:
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);
               }
           }                           
       }

在TabControl中,当切换Tab就触发OnApplyTemplate方法。

最后,本控件还有个缺点:没有实现切换下划线动画,嗯,正在构思当中,当有好的方案就会来及时更新,最后哪位大侠能实现请告知我一声,感激不尽!

本文代码下载

你可能感兴趣的:(wpf,C#)