interface de tableau de bord dynamique

Question

Je souhaite créer une interface similaire à la suivante dans Silverlight. Je dois créer un tableau de bord où différents éléments peuvent être réorganisés en utilisant Silverlight. Les éléments du tableau de bord peuvent être des commandes utilisateur différentes qui à leur tour peuvent contenir des graphiques, des jauges, des grilles ... L'utilisateur devrait pouvoir ajouter et supprimer dynamiquement des éléments de tableau de bord. L'utilisateur doit également pouvoir utiliser le glisser-déposer pour repositionner les éléments du tableau de bord.

S'il y a des exemples de code pour me lancer, ce sera génial car nous commençons tout juste sur un développement Silverlight.

Merci, Pratik

Answer 1

Jetez un oeil à la "Drag Dock Panel" dans le Blacklight Controls Library. C'est génial pour construire des tableaux de bord. Il ya même un tutoriel sur la façon de l'utiliser sur here ...

Answer 2

Vous pouvez également essayer Visifire. Vous pouvez utiliser les graphiques et les jauges de Visifire et implémenter le comportement de glisser-déposer. Le code suivant vous aidera à construire glisser-déposer comportement dans votre application. Vous pouvez associer ce comportement à Visifire Diagramme ou jauges dans l'application Silverlight ou WPF.

Vous pouvez télécharger le code source (DragElementsInCanvasBehaviour.zip) depuis mon SkyDrive ci-dessous.

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

[ "Bonjour tout le monde" glisser-déposer classe de comportement.]

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!