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

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

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

　　.xaml

View Code

<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

View Code

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);说明转化到哪个状态。这样便定义了一个可以有两状态相互转化的内容控件！如图：