Windows Phone 7面闆類控件

　面闆類控件直接和程式的布局有關，除了布局之外，面闆類控件還起到了WinForm中容器的作用，就像是将一些控件放到一個面闆中，達到組織管理的目的，這也是面闆類控件的一個常用的功能。

　　面闆類控件一共有5類：

　　Grid、Canvas、StackPanel、WrapPanel、Border

　　Grid

　　Grid控件用來布局，他的作用就相當于ASP.NET中的table的作用，使用它，可以建立n行n列，在每一個單元格中進行控件的布局，Grid的行和列一般是不會顯示的，但也可以使用屬性ShowGridLines來使其顯示。

　　在我們建立一個項目的時候，MainPage.xaml中系統就為我們預設的使用了Grid，如一個名為“LayoutRoot”的<Grid x:Name="LayoutRoot"></Grid>的Grid控件，它是用來放置頁面中所有控件的基礎Grid。在它之中，存在一個StackPanel控件用來存放程式名和标題，除此之外還存在一個名為“ContentPanel”的<Grid x:Name="ContentPanel"></Grid>，用來程式員自定義其他控件。我們可以為Grid定義行和列，<Grid.RowDefinition>，列的定義為<Grid.ColumnDefination> 。

　　至于行列的建立方式：

　　一種是直接在屬性設計器中的ColumnDefinitions或者RowDefinitions屬性中直接編輯，編輯的時候有三個屬性可以設定，MinWidth屬性設定最小尺寸，一般為預設值0，MaxWidth屬性設定最大尺寸，一般為預設值Infinity(無窮大)。而我們需要關心的是Width屬性，這就是我們在視圖中關心的，設定方式如下。

　　另一種就是我們可以書寫<Grid.RowDefinition>與<Grid.ColumnDefination>的标簽并在其中設定屬性。至于屬性，RowDefinition的屬性是Height，而ColumnDefinition的屬性是Width，這些屬性的書寫有三種方式，以Height為例：Height="200"、Height="Auto"、Height="*"，含義分别為：行(列)按照給定的尺寸設定、行列按照内容的實際尺寸設定(其實就是我們自己拉伸尺寸的值)、行(列)按照剩餘的可用空間來配置設定。

　　假設現在我們設定了3行3列的Grid，如果想要把Button放在2行3列，那麼在Button中可以這樣寫<Button Grid.Row="1" Grid.Column="2"/>，這樣就行了（在這裡行列均是從零開始）。

<!--ContentPanel - 在此處放置其他内容-->        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" ShowGridLines="True">            <Grid.RowDefinitions>                <RowDefinition Height="*" />                <RowDefinition Height="*" />                <RowDefinition Height="*" />            </Grid.RowDefinitions>            <Grid.ColumnDefinitions>                <ColumnDefinition Width="*" />                <ColumnDefinition Width="*" />                <ColumnDefinition Width="*" />            </Grid.ColumnDefinitions>            <StackPanel Name="stackPanel00" Grid.Row="0" Grid.Column="0"/>            <StackPanel Name="stackPanel01" Grid.Row="0" Grid.Column="1"/>            <StackPanel Name="stackPanel02" Grid.Row="0" Grid.Column="2"/>            <StackPanel Name="stackPanel10" Grid.Row="1" Grid.Column="0"/>            <StackPanel Name="stackPanel11" Grid.Row="1" Grid.Column="1"/>            <StackPanel Name="stackPanel12" Grid.Row="1" Grid.Column="2"/>            <StackPanel Name="stackPanel20" Grid.Row="2" Grid.Column="0"/>            <StackPanel Name="stackPanel21" Grid.Row="2" Grid.Column="1"/>            <StackPanel Name="stackPanel22" Grid.Row="2" Grid.Column="2"/>        </Grid>      

　　在背景中，首先定義一個随機數執行個體，生成顔色Color随機的ARGB值，定義委托，實作背景線程與UI線程的互動，再定義字元串數組變量，用來解析StackPanel的名字，

Random myRandom = new Random();        private bool flag = true;        delegate void MyDelegate(string s);        MyDelegate myDelegate;        string[] myStr = {"00","01","02","10","11","12","20","21","22" };      

　　定義頁面讀取事件用來建立線程，

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)        {            for (int i = 0; i < myStr.Length ; i++)            {                Thread myThread = new Thread(new ParameterizedThreadStart(Change));                myThread.Name = "";                myThread.IsBackground = true;//設定為背景運作的線程                myThread.Start(myStr[i]);//線程啟動            }        }      

　　書寫背景線程與UI線程的互動

private void Change(object s)        {            while (true)            {                                myDelegate = ChangeUIChecked;//委托                this.Dispatcher.BeginInvoke(myDelegate,s);                      Thread.Sleep((int)(0.5 * 1000));//休眠，模仿規定時間間隔            }        }        private void ChangeUIChecked(object s)        {            SolidColorBrush myBrush = new SolidColorBrush();            Color myColor = new Color();            myColor.A = (Byte)myRandom.Next(0, 256);            myColor.R= (Byte)myRandom.Next(0, 256);            myColor.G = (Byte)myRandom.Next(0, 256);            myColor.B = (Byte)myRandom.Next(0, 256);            myBrush.Color = myColor;            //((StackPanel)(ContentPanel.FindName("stackPanel" + s.ToString()))).Background = myBrush ;            ((System.Windows.Controls.StackPanel)(ContentPanel.FindName("stackPanel" + s.ToString()))).Background = myBrush;        }      

　　在運作的時候就是每隔0.5秒顔色随機變化。

　　

　　StackPanel例子

　　建立一個頁面，叫做“StackPanel.xaml”。使用背景代碼随機生成多個TextBlock來放置在StackPanel中，并檢視布局情況。

下一頁:http://www.th7.cn/Program/wp7/2012/04/18/70690.shtml