分层风格的UIElement

Question

技术: Silverlight平台: Windows Phone 7

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

做了一些鼠标移动捕捉事件，并使这些矩形可拖动。

我猜每个子元素都是以某种分层的方式添加到布局中的，其中第一个矩形位于最下面的一层，紧接着就是最上面的一层。

我如何避免这种情况，并使所有的UIElement处于同一平面，而不管它们被添加到画布的子级的顺序如何？

Answer 1

每个元素都由Silverlight使用不同的ZIndex绘制。如果不指定ZIndex，Silverlight会假定最近添加的元素具有更高的隐含ZIndex。XAML也是如此--其他元素下面的元素具有更高的隐含ZIndex。

如果您希望在示例中控制Rect元素的绘制，则需要手动修改ZIndex。首先，确保您的Layoutroot元素是一个Canvas。接下来，在鼠标移动事件处理程序中，将ZIndex依赖项属性更改为更高。

例如，此示例将在拖动选定矩形时将其置于最前面。

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

和后面的代码：

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