silverlight - 动态仪表板界面

Question

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

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

如果有一些代码示例可以帮助我入门，那将是非常棒的，因为我们刚刚开始进行一些 Silverlight 开发。

谢谢，普拉蒂克

Answer 1

You can try Visifire also. You can use Charts and Gauges from Visifire and implement Drag and drop behavior. The follwing code will help you to build Drag and drop behaviur in your application. You can attach this behavior to Visifire Chart or Gauges in Silverlight or WPF application.

You can download source code (DragElementsInCanvasBehaviour.zip) from my SkyDrive below.

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

["Hello world" Drag and drop behavior class.]

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;
            }
        }

    }
}

Hope this Helps!

Answer 2

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