Question

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

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

如果有一些代码示例可以让我开始，那么这将是非常好的，因为我们刚刚开始进行一些Silverlight开发。

谢谢， PRATIK

Answer 1

您也可以尝试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;
            }
        }

    }
}

希望这有帮助！

Answer 2

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

上使用它的教程

动态仪表板界面

2 个答案: