WP7自定义控件 TabSwitch控件
我在写一个类似tabcontrol的选项控件,在很多网站的Menu的效果,不知道怎么取名字,暂时就叫TabSwitch吧。
TabSwitch控件要点
1. 类似横排的单选框组,可以多个选项卡,只能选择一个。
2. 可以点击其中一个选择一个选项,选中后背景图块移动到选中项,背景图块的刷子可以自定义
3. 支持选中事件和选择项的绑定。
4. 为了提高视觉效果,有一个动画过度。
实现控件要点的方法描述
1 继承ItemsControl控件可以容纳多个Item,并添加TabSwitchItem类
2 图块用一个Rectangle搞定,为了实现移动位置将RenderTransform设置为CompositeTransform。
3 添加一个Selected的event实现选中数据,添加多个SelectItem依赖属性实现绑定。
4 通过选中位置获取相对的X坐标,通过Item长度计算x所在的index,然后应用动画修改CompositeTransform的TranslateX,TranslateX位置设置为index*Item宽度。
5 DoubleAnimation+EasingFunction 的弹簧效果ElasticEase可以实现动画过度。
完整代码
View Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace KiminozoStudio
{
public class TabSwitchItem : ContentControl
{
public TabSwitchItem()
{
this.DefaultStyleKey = typeof(TabSwitchItem);
}
}
public class TabSwitch : ItemsControl
{
#region Propertys
public static readonly DependencyProperty SelectedWidthProperty =
DependencyProperty.Register("SelectedWidth", typeof(double), typeof(TabSwitch),
new PropertyMetadata(65.0, SelectedWidthPropertyChanged));
/// <summary>
/// 选中项的宽度
/// </summary>
public double SelectedWidth
{
get { return (double)GetValue(SelectedWidthProperty); }
set { SetValue(SelectedWidthProperty, value); }
}
public static readonly DependencyProperty SelectedItemProperty =
DependencyProperty.Register("SelectedItem", typeof(TabSwitchItem), typeof(TabSwitch),
new PropertyMetadata(null));
/// <summary>
/// 选中的TabSwitchItem控件
/// </summary>
public TabSwitchItem SelectedItem
{
get { return (TabSwitchItem)GetValue(SelectedItemProperty); }
private set { SetValue(SelectedItemProperty, value); }
}
public static readonly DependencyProperty SelectedValueProperty =
DependencyProperty.Register("SelectedValue", typeof(object), typeof(TabSwitch),
new PropertyMetadata(null));
/// <summary>
/// 选中项的内容值
/// </summary>
public object SelectedValue
{
get { return GetValue(SelectedValueProperty); }
private set { SetValue(SelectedValueProperty, value); }
}
public static readonly DependencyProperty SelectedIndexProperty =
DependencyProperty.Register("SelectedIndex", typeof(int), typeof(TabSwitch),
new PropertyMetadata(0, SelectedIndexPropertyChanged));
/// <summary>
/// 选中项的序号
/// </summary>
public int SelectedIndex
{
get { return (int)GetValue(SelectedIndexProperty); }
set { SetValue(SelectedIndexProperty, value); }
}
public static readonly DependencyProperty SelectedBackgroundProperty =
DependencyProperty.Register("SelectedBackground", typeof(Brush), typeof(TabSwitch),
new PropertyMetadata(new SolidColorBrush(Colors.Red),
SelectedBackgroundPropertyChanged));
/// <summary>
/// 选择项的背景刷子
/// &l
补充:移动开发 , Windows Phone ,