一起學Windows Phone7開發(十三.一 容器控制項) )

在Windows Phone7中存在著多個容器控制項，這些控制項主要是用來介面的布局設定，以及包容多個控制項時的布局設定。

一.Grid控制項：主要用於介面的布局，這個和web page裡的很相似，可以通過網格布置規劃介面，也可以嵌套使用。

 

 

<Grid x:Name="ContentGrid" Grid.Row="1">

        <Grid.ColumnDefinitions>

                <ColumnDefinition Width="159*" />

                <ColumnDefinition Width="141*" />

                <ColumnDefinition Width="180*" />

            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>

                <RowDefinition Height="134*" />

                <RowDefinition Height="133*" />

                <RowDefinition Height="220*" />

                <RowDefinition Height="162*" />

            </Grid.RowDefinitions>

            <Image Height="110" HorizontalAlignment="Left" Margin="20,16,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="131" Source="/MyPhoneTest;component/Images/Chrysanthemum.jpg" />

            <Image Grid.Column="1" Grid.Row="1" Height="105" HorizontalAlignment="Left" Margin="13,12,0,0" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="115" Source="/MyPhoneTest;component/Images/Desert.jpg" />

            <Image Grid.Column="2" Grid.Row="2" Height="150" HorizontalAlignment="Left" Margin="14,51,0,0" Name="image3" Stretch="Fill" VerticalAlignment="Top" Width="154" Source="/MyPhoneTest;component/Images/Hydrangeas.jpg" />

        </Grid>

    </Grid>

 

 

二.Canvas控制項：  容器、布局控制項，主要是用絕對座標來定位子控制項。對於遊戲開發來說用處很大。

<Canvas x:Name="C1"  Grid.Row="2">

<CheckBox x:Name="CheckBox3" Content="CheckBox3" Canvas.Top="50" Canvas.Left="100" Canvas.ZIndex="1" />

</Canvas>

也可以用代碼來控制：

                   Canvas.SetLeft();

            Canvas.SetTop();

            Canvas.SetZIndex();//控制子控制項在Z軸上的順序。

三.StackPanel控制項：容器、布局控制項，主要用來多個子控制項的縱向、橫向的布局控制。

<StackPanel Orientation="Horizontal" Width="400" Height="200">

    <Image Source="Chrysanthemum.jpg" Height="200" Width="200" />

     <StackPanel Orientation="Vertical" Width="200">

                            <TextBlock Text="Test1" FontSize="30"/>

                            <TextBlock Text="Test2" FontSize="30"/>

                            <TextBlock Text="Test3" FontSize="30"/>

     </StackPanel>

</StackPanel>

 

 

 四.Border控制項： 用於包容一個控制項並為其繪製邊框，並且通過參數設定可以產生多種不同的邊框效果。（不太應該算為容器控制項，但是又覺得放在別的類裡又不是很合適。）

 

<Border  x:Name="b2" Width="200" Height="200"  BorderBrush="Aquamarine" BorderThickness="10"  Margin="150,103,130,346"  />

<Border  x:Name="b1" Width="200" Height="200"  Background="Gold" BorderBrush="Aquamarine" BorderThickness="10, 5, 20, 40"  Margin="150,369,130,80"  CornerRadius="25, 200, 10, 15" >

<TextBox Height="67" Name="textBox1" Text="Test Border" Background="Gold"  Foreground="White" BorderBrush="Gold" Width="170"  VerticalAlignment="Bottom"/>

</Border>

BorderThickness：邊框寬度，設定不同的值使四個邊產生不同的寬度。

CornerRadius：邊角半徑，設定不同的值四個邊角產生不同的弧度。

 

如果要在一個邊框控制項裡放多個控制項的話，就需要先將多個控制項放到一個容器類控制項裡，然後再把容器控制項放到邊框控制項裡。

 

 

<Border  x:Name="b2" BorderBrush="Aquamarine" BorderThickness="10"  Margin="84,123,80,220">

      <Canvas Height="279" Name="canvas1" Width="289">

 <Image Canvas.Left="140" Canvas.Top="151" Height="101" Name="image3" Stretch="Fill" Width="123" Source="/MyPhoneTest;component/Images/Hydrangeas.jpg" />

          <Image Canvas.Left="73" Canvas.Top="74" Height="101" Name="image2" Stretch="Fill" Width="123" Source="/MyPhoneTest;component/Images/Desert.jpg" />

          <Image Canvas.Left="21" Canvas.Top="21" Height="101" Name="image1" Stretch="Fill" Width="123" Source="/MyPhoneTest;component/Images/Chrysanthemum.jpg" />

      </Canvas>

</Border>