动态仪表板界面

Question

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

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

如果有一些代码示例让我开始使用，那将会非常棒，因为我们刚开始使用某些Silverlight开发。

感谢， PRATIK

Answer 1

已经在Blacklight Controls Library看看"Drag Dock Panel"。这对于构建仪表板很好。还有一个关于如何使用它的教程here ...

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

    } 
} 

希望这有助于！