当前位置:编程学习 > wap >>

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 ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,