动态仪表板界面答案

【问题标题】：dynamic dashboard interface动态仪表板界面
【发布时间】：2011-01-27 00:52:54
【问题描述】：

我想在 Silverlight 中创建类似于以下的界面。 http://demos6.dundas.com/Silverlight/

我需要创建一个仪表板，其中可以使用 Silverlight 重新排列不同的元素。仪表板元素可以是不同的用户控件，依次可能包含图表、量规、网格……用户应该能够动态添加和删除仪表板元素。用户还应该能够使用拖放来重新定位仪表板元素。

如果有一些代码示例可以帮助我入门，那就太好了，因为我们才刚刚开始进行一些 Silverlight 开发。

谢谢，普拉提克

【问题讨论】：

标签： silverlight dynamic dashboard

【解决方案1】：

查看Blacklight Controls Library 中的"Drag Dock Panel"。它非常适合构建仪表板。甚至还有一个关于如何使用它的教程here...

【讨论】：

【解决方案2】：

你也可以试试Visifire。您可以使用 Visifire 中的图表和仪表并实现拖放行为。以下代码将帮助您在应用程序中构建拖放行为。您可以将此行为附加到 Silverlight 或 WPF 应用程序中的 Visifire 图表或仪表。

您可以从下面我的 SkyDrive 下载源代码（DragElementsInCanvasBehaviour.zip）。

https://skydrive.live.com/?cid=61995e3895be1728&sc=documents&uc=1&id=61995E3895BE1728!106#

[“Hello world”拖放行为类。]

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;
using System.Windows.Interactivity;

namespace DragInCanvasBehaviour
{
    public class DragInCanvasBehaviour : Behavior<UIElement>
    {
        protected override void OnAttached()
        {
            base.OnAttached();
            this.AssociatedObject.MouseLeftButtonDown += AssociatedObject_MouseLeftButtonDown;
            this.AssociatedObject.MouseMove += AssociatedObject_MouseMove;
            this.AssociatedObject.MouseLeftButtonUp += AssociatedObject_MouseLeftButtonUp;
        }

        protected override void OnDetaching()
        {
            base.OnDetaching();
            this.AssociatedObject.MouseLeftButtonDown -= AssociatedObject_MouseLeftButtonDown;
            this.AssociatedObject.MouseMove -= AssociatedObject_MouseMove;
            this.AssociatedObject.MouseLeftButtonUp -= AssociatedObject_MouseLeftButtonUp;
        }

        private Canvas canvas;
        private bool IsDragging = false;
        private Point mouseOffset;

        private void AssociatedObject_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (canvas == null)
                canvas = (Canvas)VisualTreeHelper.GetParent(this.AssociatedObject);
            IsDragging = true;
            mouseOffset = e.GetPosition(AssociatedObject);
            AssociatedObject.CaptureMouse();
        }

        private void AssociatedObject_MouseMove(object sender, MouseEventArgs e)
        {

            if (IsDragging)
            {
                FrameworkElement element = AssociatedObject as FrameworkElement;
                FrameworkElement parent = element.Parent as FrameworkElement;

                Point point = e.GetPosition(parent);
                AssociatedObject.SetValue(Canvas.TopProperty, point.Y - element.Height /2);
                AssociatedObject.SetValue(Canvas.LeftProperty, point.X - element.Width / 2);
            }
        }

        private void AssociatedObject_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            if (IsDragging)
            {
                AssociatedObject.ReleaseMouseCapture();
                IsDragging = false;
            }
        }

    }
}

希望对您有所帮助！

【讨论】：