dynamic dashboard interface

I want to create an interface similar to the following in Silverlight. http://demos6.dundas.com/Silverlight/

I need to create a dashboard where different elements can be re-arranged using Silverligh开发者_运维百科t. The dashboard elements can be different usercontrols that in turn may contain charts, guages, grids...... The user should be able to dynamically add and remove dashboard elements. The user should also be able to use drag and drop to reposition the dashboard elements.

If there are some code samples to get me started, that will be great as we are just starting out on some Silverlight development.

Thanks, Pratik

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!

Have a look at the "Drag Dock Panel" in the Blacklight Controls Library. It's great for building dashboards. There's even a tutorial on how to use it over here...