UIElement à la mode en couches

Question

Technologie: Silverlight Plate-forme: Windows Phone 7

foreach(Rectangle rec in listrect) 
{ 
    Layoutroot.Children.Add(rec); 
} 

Fait certains événements de capture de mouvement de la souris et fait ces rectangles draggable.

Chaque élément enfant est ajouté à la mise en page de façon superposée, je suppose, où le premier rectangle va vers le calque inférieur à côté de cela et ainsi de suite.

Comment puis-je éviter cela et faire tous les UIElement s dans le même plan quel que soit l'ordre dans lequel ils sont ajoutés à l'enfant de la toile?

Answer 1

Chaque élément est dessiné avec un ZIndex différent par Silverlight. Si vous ne spécifiez pas le ZIndex, Silverlight suppose que les éléments ajoutés les plus récents ont un ZIndex implicite supérieur. La même chose vaut pour XAML - éléments ci-dessous d'autres éléments ont un plus implicite ZIndex.

Si vous souhaitez contrôler le dessin de vos éléments Rect dans votre exemple, vous devrez modifier le ZIndex manuellement. Tout d'abord, assurez-vous que votre élément Layoutroot est un Canvas. Ensuite, dans vos gestionnaires d'événements de déplacement de souris, modifiez la propriété de dépendance ZIndex pour qu'elle soit supérieure.

Par exemple, cet exemple amènera le rectangle sélectionné au premier plan pendant qu'il est déplacé.

<phone:PhoneApplicationPage x:Class="WindowsPhoneApplication1.MainPage" 
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
          xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"> 
    <Canvas x:Name="LayoutRoot" Background="Transparent" /> 
</phone:PhoneApplicationPage> 

Et le code derrière:

using System; 
using System.Collections.Generic; 
using System.Windows.Controls; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Shapes; 
using Microsoft.Phone.Controls; 

namespace WindowsPhoneApplication1 
{ 
    public partial class MainPage : PhoneApplicationPage 
    { 
     private readonly Random _rnd = new Random(); 
     private List<Rectangle> _listRect; 
     private Rectangle _selectedRect; 
     private int _selectedRectPrevZIndex; 
     public MainPage() 
     { 
      InitializeComponent(); 
      LayoutRoot.MouseMove += Rectangle_MouseMove; 
      CreateAndAddRectangles(); 
      AddRectangles(); 
     } 
     private void CreateAndAddRectangles() 
     { 
      _listRect = new List<Rectangle>(10); 
      for (var i = 0; i < 10; i++) 
      { 
       var rec = new Rectangle {Height = 50, Width = 50}; 
       rec.SetValue(Canvas.LeftProperty, i * 30d); 
       rec.SetValue(Canvas.TopProperty, i * 30d); 
       rec.Fill = new SolidColorBrush(
        Color.FromArgb(255, 
            Convert.ToByte(_rnd.NextDouble() * 255), 
            Convert.ToByte(_rnd.NextDouble() * 255), 
            Convert.ToByte(_rnd.NextDouble() * 255))); 
       rec.MouseLeftButtonDown += Rectangle_MouseLeftButtonDown; 
       rec.MouseLeftButtonUp += Rectangle_MouseLeftButtonUp; 
       rec.MouseMove += Rectangle_MouseMove; 
       _listRect.Add(rec); 
      } 
     } 
     private void AddRectangles() 
     { 
      foreach (var rec in _listRect) 
       LayoutRoot.Children.Add(rec); 
     } 
     private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 
     { 
      var rec = sender as Rectangle; 
      if (rec == null) 
       return; 

      _selectedRectPrevZIndex = (int)rec.GetValue(Canvas.ZIndexProperty); 
      System.Diagnostics.Debug.WriteLine(_selectedRectPrevZIndex); 
      rec.SetValue(Canvas.ZIndexProperty, 100); 
      _selectedRect = rec; 
     } 
     private void Rectangle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) 
     { 
      var rec = sender as Rectangle; 
      if (rec == null || _selectedRect == null) 
       return; 

      rec.SetValue(Canvas.ZIndexProperty, _selectedRectPrevZIndex); 
      _selectedRect = null; 
     } 
     void Rectangle_MouseMove(object sender, MouseEventArgs e) 
     { 
      if (_selectedRect == null) 
       return; 

      var pos = e.GetPosition(LayoutRoot); 
      _selectedRect.SetValue(Canvas.LeftProperty, pos.X); 
      _selectedRect.SetValue(Canvas.TopProperty, pos.Y); 
     } 
    } 
}