Silverlight带关闭动画的内容控件，可移动的内容控件（一）

本例给大家介绍两个自定义控件，一个有显示和关闭两种状态，在状态切换时有动画效果。另外一个是可以拖动的内容控件，可以制作能拖动的面板。

         A．带关闭动画的内容控件。

　　.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:SuperMapStandardMapApp1">
    <Style TargetType="local:CustomPanel">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:CustomPanel">
                    <Grid   x:Name="LayoutRoot" RenderTransformOrigin="{TemplateBinding RenderTransformOrigin}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="ViewStates">
                                <VisualState x:Name="Open">
                                    <Storyboard>
                                        <DoubleAnimation BeginTime="00:00:00" Duration="00:00:0.3" Storyboard.TargetName="CustomPanelScale" Storyboard.TargetProperty="ScaleY" To="1" />
                                        <DoubleAnimation BeginTime="00:00:00" Duration="00:00:0.3" Storyboard.TargetName="CustomPanelScale" Storyboard.TargetProperty="ScaleX" To="1" />
                                        <DoubleAnimation BeginTime="00:00:00" Duration="00:00:0.3" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Opacity" To="1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Close">
                                    <Storyboard>
                                        <DoubleAnimation BeginTime="00:00:00" Duration="00:00:0.2" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Opacity" To="0" />
                                        <DoubleAnimation BeginTime="00:00:00" Duration="00:00:0.2" Storyboard.TargetName="CustomPanelScale" Storyboard.TargetProperty="ScaleY" To="0" />
                                        <DoubleAnimation BeginTime="00:00:00" Duration="00:00:0.2" Storyboard.TargetName="CustomPanelScale" Storyboard.TargetProperty="ScaleX" To="1" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter x:Name="Content"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                Content="{TemplateBinding Content}"   
                                ContentTemplate="{TemplateBinding ContentTemplate}">
                        </ContentPresenter>
                        <Grid.RenderTransform>
                            <ScaleTransform x:Name="CustomPanelScale" ScaleX="1" ScaleY="1" />
                        </Grid.RenderTransform>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Foreground" Value="Red"/>
    </Style>

</ResourceDictionary>

　定义两　VisualState 一个open，一个close 代表内容控件的两个状态，添加ContentPresenter标签代表内容控件所添加的内容。

.cs

namespace SuperMapStandardMapApp1
{
    [TemplateVisualState(GroupName = "ViewStates", Name = "Open")]
    [TemplateVisualState(GroupName = "ViewStates", Name = "Close")]
    public partial class CustomPanel : ContentControl
    {
        public CustomPanel()
        {
            DefaultStyleKey = typeof(CustomPanel);
        }

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            this.ChangeVisualState(true);
        }

        #region Dependency Properties

        /// <summary>
        /// 获取或设置内容控件是否显示
        /// </summary>
        /// <value>
        ///     <c>true</c> 设置时控件进行显示; 否则不显示, <c>false</c>.
        /// </value>
        /// 

        public bool IsOpnen
        {
            get { return (bool)GetValue(IsOpenProperty); }
            set { SetValue(IsOpenProperty, value); }

        }

        public static readonly DependencyProperty IsOpenProperty = DependencyProperty.Register("IsOpen", typeof(bool), typeof(CustomPanel), new PropertyMetadata(true, OnIsOpenPertyChange));

        public static void OnIsOpenPertyChange(DependencyObject obj, DependencyPropertyChangedEventArgs e)
        {
            (obj as CustomPanel).ChangeVisualState(true);
        }

        #endregion

        private void ChangeVisualState(bool useTransitions)
        {
            if (IsOpnen)
            {
                VisualStateManager.GoToState(this, "Open", useTransitions);
            }
            else
            {
                VisualStateManager.GoToState(this, "Close", useTransitions);
            }
        }

    }
}

说明两个：TemplateVisualState分别代表close和open状态，注册一个DependencyProperty ISOpen表示此内容面板是否开启，在ChangeVisualState方法中，通过 VisualStateManager.GoToState(this, "Open", useTransitions); VisualStateManager.GoToState(this, "Close", useTransitions);说明转化到哪个状态。这样便定义了一个可以有两状态相互转化的内容控件！如图：