c# - 分层方式的 UIElement

Question

技术：Silverlight 平台：Windows Phone 7

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

完成了一些鼠标移动捕获事件并使这些矩形可拖动。

我猜每个子元素都以某种分层方式添加到布局中，第一个矩形进入底层，然后在该层之上，一直如此。

我怎样才能避免这种情况，并使所有UIElements 都在同一平面上，而不管它们添加到画布的子元素的顺序如何？

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