重新想象 Windows 8 Store Apps (17) - 控件基础: Measure, Arrange, GeneralTransform, VisualTree

浏览数：43 / 时间：2015年06月11日

原文:重新想象 Windows 8 Store Apps (17) - 控件基础: Measure, Arrange, GeneralTransform, VisualTree

作者：webabcd

介绍
重新想象 Windows 8 Store Apps 之控件基础

Measure() 和 Arrange() - xaml 的 layout 系统
GeneralTransform - 通过 UIElement.TransformToVisual() 获取元素的位置信息
VisualTree - 可视树

示例
1、演示 xaml 的 layout 系统
Controls/Basic/MeasureArrange.xaml

<Page
    x:Class="XamlDemo.Controls.Basic.MeasureArrange"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Controls.Basic"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">

        <local:MyStackPanel Margin="120 0 0 0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="200" Height="200">

            <TextBlock Text="我是文本" Width="100" Height="100" />
            <Button Content="我是按钮" Width="150" Height="150" />

        </local:MyStackPanel>

    </Grid>
</Page>

Controls/Basic/MeasureArrange.xaml.cs

/*
 * 演示 Layout 系统
 * 
 * win8 xaml 的 layout 就是一个递归系统，本 demo 就递归的一个过程做说明（步骤顺序参见代码注释中的序号）
 */

using System;
using System.Diagnostics;
using Windows.Foundation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace XamlDemo.Controls.Basic
{
    public sealed partial class MeasureArrange : Page
    {
        public MeasureArrange()
        {
            this.InitializeComponent();
        }
    }

    public class MyStackPanel : StackPanel
    {
        // 1、首先爸爸知道自己能够提供的尺寸 availableSize，然后告诉儿子们
        protected override Size MeasureOverride(Size availableSize)
        {
            // 2、儿子们收到 availableSize 后，又结合了自身的实际情况，然后告诉爸爸儿子们所期望的尺寸 desiredSize
            Size desiredSize = base.MeasureOverride(availableSize);
            Debug.WriteLine("availableSize: " + availableSize.ToString());
            Debug.WriteLine("desiredSize: " + desiredSize.ToString());
            return desiredSize;


            // 以下是自定义的 Measure 逻辑，供参考
            /*
            Size childrenSize = new Size(0, 0);
            foreach (UIElement child in this.Children)
            {
                child.Measure(new Size(Double.PositiveInfinity, Double.PositiveInfinity));
                childrenSize.Width += child.DesiredSize.Width;
                childrenSize.Height += child.DesiredSize.Height;
            }
            return childrenSize;
            */
        }

        // 3、爸爸收到儿子们的反馈后，告诉儿子们自己最终提供的尺寸 finalSize
        protected override Size ArrangeOverride(Size finalSize)
        {
            // 4、儿子们根据 finalSize 安排各自的位置，然后爸爸的呈现尺寸也就确定了 renderSize
            Size renderSize = base.ArrangeOverride(finalSize);
            Debug.WriteLine("finalSize: " + finalSize.ToString());
            Debug.WriteLine("renderSize: " + renderSize.ToString());
            return renderSize;


            // 以下是自定义的 Arrange 逻辑，供参考
            /*
            Point childPos = new Point(0, 0);
            foreach (UIElement child in this.Children)
            {
                child.Arrange(new Rect(childPos, new Size(child.DesiredSize.Width, child.DesiredSize.Height)));
                childPos.Y += child.RenderSize.Height;
            }
            return finalSize;
            */
        }
    }
}

/*
 * 输出结果：
 * availableSize: 200,200
 * desiredSize: 150,250
 * finalSize: 200,250
 * renderSize: 200,250
*/


/*
 * 注：
 * UIElement
 *     调用 Measure() 方法后会更新 DesiredSize 属性
 *     调用 Arrange() 方法后会更新 RenderSize 属性
 *     UpdateLayout() - 强制 layout 递归更新
 * 
 * FrameworkElement - 继承自 UIElement
 *     MeasureOverride() - 重写 Measure()
 *     ArrangeOverride() - 重写 Arrange()
 *     ActualWidth 和 ActualHeight 来自 RenderSize，每次 UpdateLayout() 后都会被更新
 */

2、演示如何获取UI元素的位置信息
Controls/Basic/GeneralTransformDemo.xaml

<Page
    x:Class="XamlDemo.Controls.Basic.GeneralTransformDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Controls.Basic"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">
            
            <Grid HorizontalAlignment="Left" VerticalAlignment="Top">
                <Rectangle Name="rectangle1" Width="300" Height="200" Fill="Red" />
                <Rectangle Name="rectangle2" Width="150" Height="100" Fill="Green" />
            </Grid>

            <TextBlock Name="lblMsg" FontSize="14.667" Margin="0 10 0 0" />
            
        </StackPanel>
    </Grid>
</Page>

Controls/Basic/GeneralTransformDemo.xaml.cs

/*
 * 演示 GeneralTransform 的应用，可以通过 UIElement.TransformToVisual() 获取
 */

using System;
using Windows.Foundation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;

namespace XamlDemo.Controls.Basic
{
    public sealed partial class GeneralTransformDemo : Page
    {
        public GeneralTransformDemo()
        {
            this.InitializeComponent();

            this.Loaded += TransformToVisual_Loaded;
        }

        void TransformToVisual_Loaded(object sender, RoutedEventArgs e)
        {
            lblMsg.Text = "";
            Demo1();
            lblMsg.Text += Environment.NewLine;
            Demo2();
        }

        // 演示如何获取 UIElement 相对于屏幕原点所占用的矩形区域
        private void Demo1()
        {
            GeneralTransform generalTransform = rectangle1.TransformToVisual(null); // 获取 rectangle1 相对于屏幕的 GeneralTransform
            Point point = generalTransform.TransformPoint(new Point(0, 0)); // rectangle1 的原点（左上角顶点）相对于屏幕 0,0 点的位置
            Rect rect = new Rect(point, new Size(rectangle1.ActualWidth, rectangle1.ActualHeight));

            lblMsg.Text += "红色矩形相对于屏幕原点的位置：" + rect.ToString();
        }

        // 演示如何获取 UIElement 相对于另一个 UIElement 原点所占用的矩形区域
        private void Demo2()
        {
            GeneralTransform generalTransform = rectangle1.TransformToVisual(rectangle2); // 获取 rectangle1 相对于 rectangle2 的 GeneralTransform
            Point point = generalTransform.TransformPoint(new Point(0, 0)); // rectangle1 的原点（左上角顶点）相对于 rectangle2 的原点（左上角顶点）的位置
            Rect rect = new Rect(point, new Size(rectangle1.ActualWidth, rectangle1.ActualHeight));

            lblMsg.Text += "红色矩形相对于绿色矩形左上角顶点的位置：" + rect.ToString();
        }
    }
}

3、演示 VisualTreeHelper 的应用
Controls/Basic/VisualTree.xaml

<Page
    x:Class="XamlDemo.Controls.Basic.VisualTree"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Controls.Basic"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">
            
            <Grid Name="container" HorizontalAlignment="Left" VerticalAlignment="Top" Tapped="container_Tapped_1">
                <Rectangle Name="rectangle" Width="300" Height="200" Fill="Red" />
                <Border Name="border" Width="200" Height="120" Background="Green" />
                <ScrollViewer Name="scrollViewer" Width="150" Height="150" Background="Blue" />
            </Grid>

            <TextBlock Name="lblMsg" FontSize="14.667" Margin="0 10 0 0" />
            
        </StackPanel>
    </Grid>
</Page>

Controls/Basic/VisualTree.xaml.cs

/*
 * 演示 VisualTreeHelper 的应用
 * 
 * VisualTreeHelper - 访问可视树的帮助类
 *     GetChildrenCount(DependencyObject reference) - 获取指定的元素内的子元素的数量
 *     DependencyObject GetChild(DependencyObject reference, int childIndex) - 获取指定的元素内的，指定索引位置的子元素
 *     GetParent(DependencyObject reference) - 获取指定的元素的父元素
 *     FindElementsInHostCoordinates(Point intersectingPoint, UIElement subtree, bool includeAllElements) - 查找某一点内的全部元素（包括控件模板内的元素）
 *         intersectingPoint - 指定的点的坐标
 *         subtree - 在此元素内进行查找，包括此元素
 *         includeAllElements
 *             true - 查找全部元素，包括 IsHitTestVisible 为 true 的和 IsHitTestVisible 为 false 的
 *             false - 仅查找 IsHitTestVisible 为 true 的元素
 *     FindElementsInHostCoordinates(Rect intersectingRect, UIElement subtree, bool includeAllElements) - 查找某一矩形区域内的全部元素（包括控件模板内的元素）
 *         intersectingRect - 指定的矩形区域
 *         subtree - 在此元素内进行查找，包括此元素
 *         includeAllElements
 *             true - 查找全部元素，包括 IsHitTestVisible 为 true 的和 IsHitTestVisible 为 false 的
 *             false - 仅查找 IsHitTestVisible 为 true 的元素
 */

using System;
using System.Collections.Generic;
using Windows.Foundation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Media;

namespace XamlDemo.Controls.Basic
{
    public sealed partial class VisualTree : Page
    {
        public VisualTree()
        {
            this.InitializeComponent();

            this.Loaded += VisualTree_Loaded;
        }

        void VisualTree_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            // 获取 container 中包含的元素
            lblMsg.Text = "container 中包含的元素有：";
            int numVisuals = VisualTreeHelper.GetChildrenCount(container);
            for (int i = 0; i < numVisuals; i++)
            {
                DependencyObject element = VisualTreeHelper.GetChild(container, i);
                lblMsg.Text += Environment.NewLine;
                lblMsg.Text += element.GetType().ToString();
            }


            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += Environment.NewLine;


            // 在 scrollViewer 控件自身的模板中查找类型为 ScrollBar 的名为 VerticalScrollBar 的控件
            lblMsg.Text += "查找 scrollViewer 中的名为“VerticalScrollBar”的 ScrollBar 控件：";
            lblMsg.Text += Environment.NewLine;
            ScrollBar scrollBar = GetVisualChild<ScrollBar>(scrollViewer, "VerticalScrollBar");
            if (scrollBar != null)
                lblMsg.Text += "找到了";
            else
                lblMsg.Text += "未找到";
        }

        private void container_Tapped_1(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
        {
            // 获取鼠标单击的位置，container 范围内所包含的全部元素（包括控件模板内的元素）
            lblMsg.Text = "鼠标单击的位置，container 内，包含的元素有：";
            IEnumerable<UIElement> elementsPoint = VisualTreeHelper.FindElementsInHostCoordinates(e.GetPosition(null), container, true);
            var elementsPointEnumerator = elementsPoint.GetEnumerator();
            while (elementsPointEnumerator.MoveNext())
            {
                lblMsg.Text += Environment.NewLine;
                lblMsg.Text += elementsPointEnumerator.Current.GetType().ToString();
            }


            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += Environment.NewLine;


            // 获取以鼠标单击的位置为顶点，100*100 大小的矩形内，container 范围内所包含的全部元素（包括控件模板内的元素）
            lblMsg.Text += "以鼠标单击的位置为顶点，100*100 大小的矩形范围内，container 内，包含的元素有：";
            IEnumerable<UIElement> elementsRect = VisualTreeHelper.FindElementsInHostCoordinates(new Rect(e.GetPosition(null), new Size(100, 100)), container, true);
            var elementsRectEnumerator = elementsRect.GetEnumerator();
            while (elementsRectEnumerator.MoveNext())
            {
                lblMsg.Text += Environment.NewLine;
                lblMsg.Text += elementsRectEnumerator.Current.GetType().ToString();
            }
        }

        /// <summary>
        /// 获取指定元素内部的指定名称的 FrameworkElement
        /// </summary>
        private T GetVisualChild<T>(DependencyObject parent, string name) 
            where T : FrameworkElement
        {
            // T 是引用类型则为 null，T 是值类型则为 0
            T child = default(T);

            int numVisuals = VisualTreeHelper.GetChildrenCount(parent);
            for (int i = 0; i < numVisuals; i++)
            {
                DependencyObject obj = VisualTreeHelper.GetChild(parent, i);
                child = obj as T;

                if (child == null || child.Name != name)
                    child = GetVisualChild<T>(obj, name);
                if (child != null)
                    break;
            }
            return child;
        }
    }
}