Windows 8 Store Apps Learning (17) Control Basics: Measure etc.

Control Basics: Measure, arrange, Generaltransform, Visua

Introduced

Re-imagine the control basics for Windows 8 Store Apps

Measure () and arrange ()-XAML layout systems

Generaltransform-Gets the location information of the element via Uielement.transformtovisual ()

VisualTree-visual tree

Example

1. Demo XAML Layout system

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=" 0 0 0 "horizontalalignment=" left "verticalalignment=" top " Width= "height=" >
    
            <textblock text= "I am the text" width= "" height= ""/> <button "
            I am the button "width=" height= "/>"
    
        </local:MyStackPanel>
    
    </Grid>
</Page>

Controls/basic/measurearrange.xaml.cs

* * Demo Layout System * * Win8 XAML Layout is a recursive system, this demo on a recursive process to do the description (step sequence see code comments in the serial number) * * * 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 Measurearra Nge () {this.
        InitializeComponent (); } public class Mystackpanel:stackpanel {//1, first Father knows the size availablesize he can provide, and then tells his sons P rotected override size MeasureOverride (size availablesize) {//2. After the sons received the availablesize, they combined their own actual situation, and then Tell dad what the boys are expecting size desiredsize size desiredsize = base.
            MeasureOverride (availablesize);
            Debug.WriteLine ("availablesize:" + availablesize.tostring ());
            Debug.WriteLine ("DesiredSize:" + desiredsize.tostring ());
    
    
            return desiredsize;
        The following is a custom Measure logic for reference/*    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, Dad received feedback from their sons, told their sons the size of the final offer finalsize protected override size Arrangeoverride (size F Inalsize) {//4, sons arrange their respective positions according to Finalsize, and then the size of Dad's presentation is determined rendersize size rendersize = base.
            Arrangeoverride (finalsize);
            Debug.WriteLine ("finalsize:" + finalsize.tostring ());
            Debug.WriteLine ("rendersize:" + rendersize.tostring ());
    
    
            return rendersize;
            The following is a custom arrange logic for reference/* 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; * * * Output Result: * availablesize:200,200 * desiredsize:150,250 * finalsize:200,250 * rendersiz E:200,250 * * * NOTE: * UIElement * calls the Measure () method updates the DesiredSize property * calls the Arrange () method and updates the renders ize property * Updatelayout ()-Force layout Recursive Update * * FrameworkElement-inherit from UIElement * MeasureOverride ()-Override Measur E () * arrangeoverride ()-Rewrite arrange () * ActualWidth and ActualHeight from Rendersize and will be updated every time updatelayout ()