[WP8.1UI控制項編程]Windows Phone自訂布局規則

標籤：windows phone 8.1

3.2 自訂布局規則

    上一節介紹了Windows Phone的系統布局面板和布局系統的相關原理，那麼系統的布局面板並不一定會滿足所有的你想要實現的布局規律，如果有一些特殊的布局規律，系統的布局面板是不支援，這時候就需要去自訂實現一個布局面板，在自訂的布局面板裡面封裝布局規律的邏輯。那麼我們這一節從一個實際的需求出發，來實現一個自訂規律的布局面板。我們這一小節要實現的布局規律是把布局面板裡面的子項目，按照圓形的排列規則進行排列，下面我們來看下這個例子的詳細實現過程。

3.2.1 建立布局類

    在Windows Phone要實作類別似Grid、StackPanel的自訂布局規則的面板，首先要做的事情是要建立一個自訂的布局類。所有的布局面板都需要從Panel類派生，自訂實現其測量和排列的過程。Panel類中的Children屬性工作表示是布局面板裡面的子物件，測量和排列的過程中需要根據Children屬性來擷取面板中所有的子物件，然後再根據相關的規律對這些子物件進行測量和排列。

    如果我們的布局類需要外面傳遞進來一些特殊的參數，那麼就需要我們在布局類裡面去實現相關的屬性。當然像Heigh、Width等這些Panel類原本就支援的屬性我們就無需再去定義，如我們在這個例子裡面要實現的圓形布局，這時候是需要一個圓形的半徑大小的，這個半徑的大小就可以作為一個屬性讓外面把數值傳遞進來，然後布局類再根據這個半徑的大小來進行處理對子物件的測量和排列。需要注意的是，自訂的半徑屬性發生改變的時候，需要調用InvalidateArrange方法重新觸發布局的排列過程，否則修改半徑後將不會起到任何作用。

代碼清單3-2：自訂布局規則（原始碼：第3章\Examples_3_2）

    下面我們來看一下，自訂的CirclePanel類：

650) this.width=650;" alt="複製代碼" src="http://common.cnblogs.com/images/copycode.gif" />

    public class CirclePanel : Panel    {        //自訂的半徑變數        private double _radius = 0;        public CirclePanel()        {        }        //註冊半徑相依性屬性        //"Radius" 表示半徑屬性的名稱        // typeof(double) 表示半徑屬性的類型        // typeof(CirclePanel) 表示半徑屬性的歸屬者類型        // new PropertyMetadata(0.0, OnRadiusPropertyChanged)) 表示半徑屬性的中繼資料執行個體，0.0是預設值，OnRadiusPropertyChanged是屬性改變的事件        public static readonly DependencyProperty RadiusProperty = DependencyProperty.RegisterAttached            ("Radius",            typeof(double),             typeof(CirclePanel),            new PropertyMetadata(0.0, OnRadiusPropertyChanged));        //定義半徑屬性        public double Radius        {            get { return (double)GetValue(RadiusProperty); }            set { SetValue(RadiusProperty, value); }        }        //實現半徑屬性改變事件        private static void OnRadiusPropertyChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)        {            //擷取觸發屬性改變的CirclePanel對象            CirclePanel target = (CirclePanel)obj;            //擷取傳遞進來的最新的值，並賦值給半徑變數            target._radius = (double)e.NewValue;            //使排列狀態失效，進行重新排列            target.InvalidateArrange();        }        //重載基類的MeasureOverride方法        protected override Size MeasureOverride(Size availableSize)        {            //處理測量子物件的邏輯            return availableSize;        }        //重載基類的ArrangeOverride方法        protected override Size ArrangeOverride(Size finalSize)        {            //處理排列子物件的邏輯            return finalSize;        }    }

650) this.width=650;" alt="複製代碼" src="http://common.cnblogs.com/images/copycode.gif" />

3.2.2 實現測量過程

    測量的過程是在重載的MeasureOverride方法上實現，在MeasureOverride方法上需要做的第一件事情就是要把所有的子物件都遍曆一次，調用其Measure方法來測量子物件的大小。然後在測量的過程中可以擷取到子物件測量出來的寬度高度，我們可以根據這些資訊來給自訂的面板分配其大小。

650) this.width=650;" alt="複製代碼" src="http://common.cnblogs.com/images/copycode.gif" />

    protected override Size MeasureOverride(Size availableSize)    {        //最大的寬度的變數        double maxElementWidth = 0;        //遍曆所有的子物件，並調用子物件的Measure方法進行測量，取出最大的寬度的子物件        foreach (UIElement child in Children)        {            //測量子物件            child.Measure(availableSize);            maxElementWidth = Math.Max(child.DesiredSize.Width, maxElementWidth);        }        //兩個半徑的大小和最大的寬度的兩倍最為面板的寬度        double panelWidth = 2 * this.Radius + 2 * maxElementWidth;        //取面板的所分配的高度寬度和計算出來的寬度的最小值最為面板的實際大小        double width = Math.Min(panelWidth, availableSize.Width);        double heigh = Math.Min(panelWidth, availableSize.Height);        return new Size(width, heigh);    }

650) this.width=650;" alt="複製代碼" src="http://common.cnblogs.com/images/copycode.gif" />

3.2.3 實現排列過程

    排列的過程是在重載的ArrangeOverride方法上實現，在ArrangeOverride方法上通過相關的規則把子物件一一地進行排列。我們在例子裡面要實現的是把子物件按照一個固定的圓形進行排列，所以在ArrangeOverride方法上需要計算每個子物件所佔的角度大小，通過角度計運算元對象在面板中的座標，然後按照一定的角度對子物件進行旋轉來適應圓形的布局。排列原理圖3.7所示，實現代碼如下。

650) this.width=650;" src="http://images.cnitblog.com/i/152755/201406/021344117553651.png" />

650) this.width=650;" alt="複製代碼" src="http://common.cnblogs.com/images/copycode.gif" />

    protected override Size ArrangeOverride(Size finalSize)    {        //當前的角度，從0開始排列        double degree = 0;        //計算每個子物件所佔用的角度大小        double degreeStep = (double)360 / this.Children.Count;        //計算        double mX = this.DesiredSize.Width / 2;        double mY = this.DesiredSize.Height / 2;        //遍曆所有的子物件進行排列        foreach (UIElement child in Children)        {            //把角度轉換為弧度單位            double angle = Math.PI * degree / 180.0;            //根據弧度計算出圓弧上的x，y的座標值            double x = Math.Cos(angle) * this._radius;            double y = Math.Sin(angle) * this._radius;            //使用變換效果讓控制項旋轉角度degree            RotateTransform rotateTransform = new RotateTransform();            rotateTransform.Angle = degree;            rotateTransform.CenterX = 0;            rotateTransform.CenterY = 0;            child.RenderTransform = rotateTransform;            //排列子物件            child.Arrange(new Rect(mX + x, mY + y, child.DesiredSize.Width, child.DesiredSize.Height));            //角度遞增            degree += degreeStep;        }        return finalSize;    }

650) this.width=650;" alt="複製代碼" src="http://common.cnblogs.com/images/copycode.gif" />

3.2.4 應用布局規則

    在上面我們已經把自訂的圓形布局控制項實現了，現在要在XAML頁面上應用該布局面板來進行布局。在這個例子裡面，我們還通過一個Slider控制項來動態改變布局面板的半徑大小，來觀察布局的變化。

    首先我們在XAML頁面上引入布局面板所在的空間，如下所示：

    xmlns:local="clr-namespace:CustomPanelDemo"

    然後在XAML頁面上運用自訂的圓形布局控制項，並且通過Slider控制項的ValueChanged來動態給圓形布局控制項的半徑賦值。代碼如下：

650) this.width=650;" alt="複製代碼" src="http://common.cnblogs.com/images/copycode.gif" />

MainPage.xaml檔案主要代碼------------------------------------------------------------------------------------------------------------------    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">        <Grid.RowDefinitions>            <RowDefinition Height="Auto"/>            <RowDefinition Height="Auto"/>        </Grid.RowDefinitions>        <Slider Grid.Row="0" Value="5" ValueChanged="Slider_ValueChanged_1"></Slider>        <local:CirclePanel x:Name="circlePanel" Radius="50" Grid.Row="1"  HorizontalAlignment="Center" VerticalAlignment="Center">            <TextBlock>Start here</TextBlock>            <TextBlock>TextBlock 1</TextBlock>            <TextBlock>TextBlock 2</TextBlock>            <TextBlock>TextBlock 3</TextBlock>            <TextBlock>TextBlock 4</TextBlock>            <TextBlock>TextBlock 5</TextBlock>            <TextBlock>TextBlock 6</TextBlock>            <TextBlock>TextBlock 7</TextBlock>        </local:CirclePanel>    </Grid>

650) this.width=650;" alt="複製代碼" src="http://common.cnblogs.com/images/copycode.gif" />

650) this.width=650;" alt="複製代碼" src="http://common.cnblogs.com/images/copycode.gif" />

MainPage.xaml.cs檔案主要代碼------------------------------------------------------------------------------------------------------------------    private void Slider_ValueChanged_1(object sender, RangeBaseValueChangedEventArgs e)    {        if (circlePanel != null)        {             circlePanel.Radius = e.NewValue * 10;        }    }

650) this.width=650;" alt="複製代碼" src="http://common.cnblogs.com/images/copycode.gif" />

650) this.width=650;" src="http://images.cnitblog.com/i/152755/201406/021347547705486.png" />

本文來源於《深入理解Windows Phone 8.1 UI控制項編程》

原始碼下載：http://vdisk.weibo.com/s/zt_pyrfNHoezI

歡迎關注我的微博@WP林政

WP8.1技術交流群：372552293

[WP8.1UI控制項編程]Windows Phone自訂布局規則