silverlight创建新的控件——类似可弹出的菜单

先上代码

CompasiblePanel.xaml（两个状态而已）

<ResourceDictionary
    x:Class="Popup.AllapsiblePanel"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Popup.UserControls">
    <Style TargetType="local:CompasiblePanel">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:CompasiblePanel">
                    <Grid x:Name="LayoutRoot" RenderTransformOrigin="{TemplateBinding RenderTransformOrigin}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="ViewStates">
                                <VisualState x:Name="Expanded">
                                    <Storyboard>
                                        <DoubleAnimation BeginTime="00:00:00" Duration="00:00:0.3"                                                                             Storyboard.TargetName="CollapsiblePanelScale"                                                                         Storyboard.TargetProperty="ScaleY" To="1" />

                                        <DoubleAnimation BeginTime="00:00:00" Duration="00:00:0.3"                                                                             Storyboard.TargetName="CollapsiblePanelScale"                                                                         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="Collapsed">
                                    <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="CollapsiblePanelScale"                                                                         Storyboard.TargetProperty="ScaleY" To="0" />
                                        <DoubleAnimation BeginTime="00:00:00" Duration="00:00:0.2"                                                                             Storyboard.TargetName="CollapsiblePanelScale"                                                                         Storyboard.TargetProperty="ScaleX" To="0" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter x:Name="Content"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                Content="{TemplateBinding Content}" 
                                Margin="{TemplateBinding Padding}" 
                                ContentTemplate="{TemplateBinding ContentTemplate}">
                        </ContentPresenter>
                        <Grid.RenderTransform>
                            <ScaleTransform x:Name="CollapsiblePanelScale" ScaleX="1" ScaleY="1" />
                        </Grid.RenderTransform>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

CompasiblePanel.xaml.cs （把IsExpanded注册成依赖属性，其改变会引发状态变化）

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace Popup.UserControls
{
    [TemplateVisualState(Name = "Collapsed", GroupName = "ViewStates")]
    [TemplateVisualState(Name = "Expanded", GroupName = "ViewStates")]
    public class CompasiblePanel : ContentControl
    {
        public CompasiblePanel()
        {
            DefaultStyleKey = typeof(CompasiblePanel);
        }

        #region Dependency Properties

        /// <summary>
        /// Gets or sets a value indicating whether this control is expanded.
        /// </summary>
        /// <value>
        ///     <c>true</c> if this instance is expanded; otherwise, <c>false</c>.
        /// </value>
        public bool IsExpanded
        {
            get { return (bool)GetValue(IsExpandedProperty); }
            set { SetValue(IsExpandedProperty, value); }
        }

        /// <summary>
        /// Identifies the <see cref="IsExpanded"/> dependency property.
        /// </summary>
        public static readonly DependencyProperty IsExpandedProperty =
            DependencyProperty.Register("IsExpanded", typeof(bool), typeof(CompasiblePanel),

            new PropertyMetadata(true, OnIsExpandedPropertyChanged));

        private static void OnIsExpandedPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            (d as CompasiblePanel).ChangeVisualState(true);
            MessageBox.Show("OK");
        }

        #endregion

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

        private void ChangeVisualState(bool useTransitions)
        {
            if (IsExpanded)
            {
                VisualStateManager.GoToState(this, "Expanded", useTransitions);
                MessageBox.Show("have goto state expanded");
            }
            else
            {
                VisualStateManager.GoToState(this, "Collapsed", useTransitions);
                MessageBox.Show("have goto state collapsed");
            }
        }
    }
}

　

MainPage.XAML

<UserControl x:Class="Popup.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="clr-namespace:Popup.UserControls"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:ei="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"
    
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White" RenderTransformOrigin="0,0">
        <StackPanel>

            <controls:CompasiblePanel x:Name="MainManu" IsExpanded="True" 
                                      RenderTransformOrigin="0,0"
                                      HorizontalAlignment="Left">
                <Rectangle Width="100" Height="100" Fill="BlueViolet"/>
            </controls:CompasiblePanel>

            <Button Content="OK" x:Name="button" Width="100" Height="100"                                                                              HorizontalAlignment="Left" Click="button_Click"/>
        </StackPanel>
    </Grid>
</UserControl>

　　

MainPage.XAML.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace Popup
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void button_Click(object sender, RoutedEventArgs e)
        {
            MainManu.IsExpanded = !MainManu.IsExpanded;
        }
    }
}

　　我感觉以上代码，没有任何问题，但就是没有状态变化的动画，不知道是为什么，希望有高人指点，不胜感激