Windows Phone7開發之 容器控件

webphp 12年前發布 | 15K 次閱讀 Windows Phone開發 移動開發 Windows Phone

在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>

 五.PopUp控件:嚴格來講這個不應該算作容器控件,但是它可以把包含在其中的控件顯示在當前頁的最前面。可以用來制作自定義的MessageBox、WaitingBox等。

 

<Popup Grid.Row="1" HorizontalAlignment="Left" Margin="109,172,0,0" Name="popup1" VerticalAlignment="Top" Height="250" Width="250" IsOpen="True" Opened="popup1_Opened">

<Canvas Width="250" Height="250"  Background="Red" VerticalAlignment="Center" HorizontalAlignment="Center">

        <TextBlock Margin="90,120,0,0" Text="請等待......"/>

 </Canvas>

    </Popup> 

六.ScrollView:  滾動查看器控件,也算是一個容器控件,它可以用來拖動顯示其所包含的控件的內容。

<ScrollViewer Grid.Row="1" Height="293" HorizontalAlignment="Left" Margin="75,112,0,0" Name="scrollViewer1" VerticalAlignment="Top" Width="279" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" >

   <Image Source="Images/Hydrangeas.jpg" Height="779" Width="1036" />

</ScrollViewer>

HorizontalScrollBarVisibility/ VerticalScrollBarVisibility:水平/垂直滾動條狀態。

 本文由用戶 webphp 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!