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

B.可移动的内容控件

此控件可以通过在鼠标左键按下的状态下同时拖动鼠标便可以移动控件，实现拖拽的效果。

先来看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"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
    >
    <Style TargetType="local:FloatPanel">
        <Setter Property="BorderBrush" Value="White" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="IsOpen" Value="true" />
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <GradientStop Offset="0" Color="#ee76a8d3"/>
                    <GradientStop Offset="0.25" Color="#ee5b8cb5"/>
                    <GradientStop Offset="0.75" Color="#ee4b7ba7"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:FloatPanel">
                    <Grid x:Name="BasePanel">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="35"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Canvas x:Name="bookmarkbg" Width="198.667" Height="260" Clip="F1 M 0,0L 198.667,0L 198.667,260L 0,260L 0,0" RenderTransformOrigin="0.5,0.5">
                            <Canvas.RenderTransform>
                                <CompositeTransform ScaleX="0.9"/>
                            </Canvas.RenderTransform>
                            <Canvas Width="198.667" Height="260" Canvas.Left="0" Canvas.Top="0"/>
                        </Canvas>
                        <Border Cursor="Hand" x:Name="MoveBar" Grid.Row="0" Grid.RowSpan="1" CornerRadius="6">
                            <Grid>
                            <Image Margin="0,12,0,0" Source="/SuperMapStandardMapApp1;component/Images/ICON_BookmarkTitle.png" Width="41" Height="22" HorizontalAlignment="Center"/>                          
                            <Path Data="M37,37 C37,37 58,5 96,5.6666665 C134,6.333333 157.78342,27.900702 162.66667,37.666656 C162.99991,38.333096 37,37 37,37 z" Height="32.197" Canvas.Left="37" Stretch="Fill" Canvas.Top="5.656" UseLayoutRounding="False" Width="125.667" Fill="#00000000"/>
                            </Grid>
                        </Border>
                        <ContentPresenter Grid.Row="1"
                                        Content="{TemplateBinding Content}" 
                                        Margin="{TemplateBinding Padding}"            
                                        ContentTemplate="{TemplateBinding ContentTemplate}" VerticalAlignment="Top" HorizontalAlignment="Center"/>        
                    </Grid>                        
                </ControlTemplate>             
            </Setter.Value>            
        </Setter>        
    </Style>  
</ResourceDictionary>

 在bookmarkbg的canvas中定义的是此控件的外观，Movear的Border中定义的是鼠标点中拖动即可拖动的区域。

下面看.cs文件

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 SuperMapStandardMapApp1
{
    public class FloatPanel : ContentControl
    {
        private bool isMouseDown;
        private Point mouseCurrentPoint;
        private TranslateTransform panelTranslate;

        public FloatPanel()
        {
            DefaultStyleKey = typeof(FloatPanel);
        }

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            RenderTransform = panelTranslate = new TranslateTransform();
            UIElement moveBar = GetTemplateChild("MoveBar") as UIElement;
            //为移动面板，关闭面板提供事件    
            if (moveBar != null)
            {
                moveBar.MouseLeftButtonDown += new MouseButtonEventHandler(moveBar_MouseLeftButtonDown);
                moveBar.MouseLeftButtonUp += new MouseButtonEventHandler(moveBar_MouseLeftButtonUp);
                moveBar.MouseMove += new MouseEventHandler(moveBar_MouseMove);
            }
        }

        void moveBar_MouseMove(object sender, MouseEventArgs e)
        {
            if (isMouseDown)
            {
                UIElement MoveBarELement = sender as UIElement;
                Point point = e.GetPosition(null);
                double x0 = this.panelTranslate.X;
                double y0 = this.panelTranslate.Y;
                this.panelTranslate.X = x0 + (point.X - mouseCurrentPoint.X);
                this.panelTranslate.Y = y0 + (point.Y - mouseCurrentPoint.Y);
                mouseCurrentPoint = point;
            }
        }

        void moveBar_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            UIElement MoveBarELement = sender as UIElement;
            MoveBarELement.ReleaseMouseCapture();
            isMouseDown = false;
        }

        void moveBar_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            UIElement MoveBarELement = sender as UIElement;
            mouseCurrentPoint = e.GetPosition(null);
            MoveBarELement.CaptureMouse();
            isMouseDown = true;
        }

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

        public static DependencyProperty IsOpenProperty = DependencyProperty.Register("IsOpen", typeof(bool), typeof(FloatPanel), new PropertyMetadata(true, IsOpenPropertyChange));

        public static void IsOpenPropertyChange(DependencyObject sender, DependencyPropertyChangedEventArgs e)
        {
            ((FloatPanel)sender).ChangeVisualState(true);
        }

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

        }
    }
}

 在 OnApplyTemplate方法中获取moveBar 为UIElement元素，并为其添加鼠标点下，鼠标移动，鼠标放开事件。在鼠标点下时MoveBarELement.ReleaseMouseCapture();锁定鼠标至MoveBar上，鼠标移动时改变先前定义的panelTranslate,x值与y值，实现鼠标移动且元素跟着移动的效果。在鼠标放开是MoveBarELement.CaptureMouse();以释放对鼠标的锁定。

这样便可以定义一个能拖拽的面版！且面板样式可随大家任意改动！