WP7:模拟 选择框列表 效果

对WP7系统里自带的动画效果很感兴趣，看到了 一个 CheckBoxList （自己起的名字，呵呵）显示隐藏CheckBox的效果（比如WIFI的高级设置选项列表），于是简单模仿下。

首先创建一个工程，然后添加一个自定义控件。

起名字：CheckBoxListItem.

下面开始在这个自定义控件里组装零件。

模拟一下的，所以很简单，一个CheckBox，一个TextBlock 放在StackPanel 里。

在控件后台代码里，先声明一个布尔类型的依赖属性：IsShowEnabled.

public bool IsShowEnabled
        {
            get { return (bool)GetValue(IsShowEnabledProperty); }
            set { SetValue(IsShowEnabledProperty, value); }
        }

        // Using a DependencyProperty as the backing store for IsShowEnabled.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty IsShowEnabledProperty =
            DependencyProperty.Register("IsShowEnabled", typeof(bool), typeof(CheckBoxListItem), 
            new PropertyMetadata(false,(d,e)=>OnIsShowEnabledChanged(d,e)));

作用就是用来获取是否显示或者隐藏CheckBox.

然后创建一个回调：OnIsShowEnabledChanged，用来处理属性更改后要做的事情。

显示或者隐藏CheckBox，选择用动画来处理。

写一个生成动画的方法。

/// <summary>
        /// 
        /// </summary>
        /// <param name="element">元素</param>
        /// <param name="from">from</param>
        /// <param name="to">to</param>
        /// <param name="delay">开始时间</param>
        /// <param name="duration">持续时间</param>
        /// <returns></returns>
        public static Storyboard Animation(FrameworkElement element, double from, double to, double delay, double duration)
        {
            Storyboard sb = new Storyboard();

            TranslateTransform trans = new TranslateTransform() { X = from };
            element.RenderTransform = trans;

            DoubleAnimation db = new DoubleAnimation();
            db.To = to;
            db.From = from;
            db.EasingFunction = new PowerEase() { EasingMode = EasingMode.EaseOut };
            sb.Duration = db.Duration = TimeSpan.FromSeconds(duration);
            sb.BeginTime = TimeSpan.FromSeconds(delay);
            sb.Children.Add(db);

            Storyboard.SetTarget(db, trans);
            Storyboard.SetTargetProperty(db, new PropertyPath("X"));

            return sb;
        }

这个动画就是来处理元素的 TranslateTransform 的 X 属性，来达到效果。

下面是回调方法。

private static void OnIsShowEnabledChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            CheckBoxListItem c = d as CheckBoxListItem;
            c.txt.Text = e.NewValue.ToString();

            Storyboard story1 =
                (bool)e.NewValue == true ? Animation(c.checkBox, 0, -60, 0, 0.2) : Animation(c.checkBox, -60, 0, 0, 0.3);
            Storyboard story2 =
                (bool)e.NewValue == true ? Animation(c.panel, 60, 0, 0.1, 0.2) : Animation(c.panel, 0, 60, 0.15, 0.3);
            story1.Begin();
            story2.Begin();
        }

前台的代码：

<!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <ListBox Name="listBox" Margin="0,70,0,0">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <my:CheckBoxListItem IsShowEnabled="{Binding IsChecked, ElementName=checkBox}" />
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
            <CheckBox Content="{Binding IsChecked,ElementName=checkBox}" Height="72" HorizontalAlignment="Left" Name="checkBox" VerticalAlignment="Top" />
        </Grid>

系统自带的还有很多功能。需要慢慢实现。这里简单的模仿下

Demo：CheckBoxList.zip