UIElement in layered fashion

Question

Technology : Silverlight Platform : Windows Phone 7

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

Done some mouse move capture events and made these rectangles draggable.

Each child element is added to the layout in some layered fashion I guess,where the first rectangle goes to the bottom layer next on top of that and on and on.

How can I avoid this and make all the UIElements in same plane irrespective of the order in which they are added to child of the canvas?

Answer 1

Every element is drawn with a different ZIndex by Silverlight. If you don't specify the ZIndex, Silverlight assumes that the most recent elements added have a higher implied ZIndex. The same goes for XAML - elements below other elements have a higher implied ZIndex.

If you want to control the drawing of your Rect elements in your example, you'll need to modify the ZIndex manually. First, make sure your Layoutroot element is a Canvas. Next, in your mouse move event handlers, change the ZIndex dependency property to be higher.

For instance, this example will bring the selected rectangle to the forefront while its being dragged.

<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>

And the code behind:

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