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

2017-06-14 08:39:23来源:CSDN作者:lishuangquan1987人点击

在手机上,我们看到干净整洁的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);               }           }                                  }

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

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

本文代码下载

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台