WP7的控件开发入门（一）

首先讲的是容器控件Grid

看代码：

   <Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0">

            <Grid.RowDefinitions>

                <RowDefinition Height="184*" />

                <RowDefinition Height="178*" />

                <RowDefinition Height="245*" />

            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="162"/>

                <ColumnDefinition Width="186"/>

                <ColumnDefinition Width="132*" />

            </Grid.ColumnDefinitions>

            <Image Name="image1" Grid.Column="0" Grid.Row="0" Stretch="Fill" Source="Images/image1.jpg"/>

            <Image Name="image2" Grid.Column="1" Grid.Row="1" Stretch="Fill" Source="Images/image2.jpg" />

            <Image Name="image3" Grid.Column="2" Grid.Row="2"  Stretch="Fill" Source="Images/image3.jpg" /> 

  </Grid>

注意点：Image控件自己的大小，对其等格式优先级高于网格的格式，也就是如果Image自己有大小等格式，那么图片会超出网格定义的大小，上面的代码就是为了所有的提片全都显示在网格之内所以才把Image自身的格式全部都删除的 

 Canvas控件

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0">

            <Canvas x:Name="Canvas1">

                <Image Canvas.Left="100" Canvas.Top="76" Height="150" Name="image1" Stretch="Fill" Width="200" Source="Images/image1.jpg"  Canvas.ZIndex="2"/>

                <Image Canvas.Left="204" Canvas.Top="186" Height="150" Name="image2" Stretch="Fill" Width="200" Source="Images/image2.jpg"/>

            </Canvas>

</Grid> 

注意点：对于此控件与Grid的区别我就看出多了一个Z轴，其他的至今还没看出来，感觉它们同属于容器控件，发挥的作用很是形似。

StackPanel控件

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

                <Image Stretch="Fill" Source="Images/image1.jpg"/>

                <StackPanel Orientation="Vertical">

                    <TextBlock Text="llo world 1" />

                    <TextBlock Text="llo world 1" />

                    <TextBlock Text="llo world 1" />

                </StackPanel>

 </StackPanel>

注意点：这个控件就是用来组织子控件的排列方式的，是水平或者是垂直，有一点跟Grid不一样，里面的Image控件大小若果超出了StackPanel控件定义的大小，超出部分将被隐藏 

 Border控件

 <Border Width="300" 

                    Height="300" 

                    BorderBrush="Blue" 

                    Background="Pink" 

                    BorderThickness="10"

                    CornerRadius="20,200,20,20">

                <TextBox Width="400" 

                         Height="100"

                         VerticalAlignment="Bottom"

                         Background="Pink"

                         BorderBrush="Pink">

                </TextBox>

</Border>

注意点：该空间的目的就是加一个边框，从上面的代码可以看出该控件的几个常用的属性，边框颜色，背景颜色，边框圆角，边框粗细。它的子控件的大小如果大于它，那么还是按Border的大小说了算，注意调整子控件的不同属性，已达到与边框控件合二为一的效果。 

 Popup控件

            <Popup IsOpen="True"

                   Width="400"

                   Height="500">

                <Canvas  Background="Pink"

                         Width="300"

                         Height="400">

                    <TextBlock Text="hello world"/>

                </Canvas>

            </Popup> 

注意点：该控件本身是不会有任何显示效果的，他就是控制内部的控件的开关，如果IsOpen="True"那内部控件就是看见的，反之就是不可见的，如果它的内部不定义任何控件，是看不到该控件本身的 

 ScrollView控件

<ScrollViewer Width="300"

                          Height="300"

                          HorizontalScrollBarVisibility="Auto"

                          VerticalScrollBarVisibility="Auto">

                <Image Source="Images/image1.jpg" Width="333" Height="500" />

</ScrollViewer>

 注意点:把内部的图片调整到本来的大小，超出部分会被上下滑动而出来，记得加上HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"这两条属性

Button控件

  <Button Width="200" Height="100"

               Margin="145,128,0,0"

               VerticalAlignment="Top"

               HorizontalAlignment="Left"

               BorderBrush="Yellow"

               Background="Blue"

               Content="hello world"

               Foreground="Red"

              >

 </Button>

 <Button Width="200" Height="100"

              Margin="145,400,0,0"

              VerticalAlignment="Top"

              HorizontalAlignment="Left"

              >

            <Button.Background>

                    <ImageBrush ImageSource="Images/image2.jpg"/>

            </Button.Background>

</Button>

 注意点：该控件是最常用的了，其中的margin单独使用是通过四个方向来定位的，但是加上 VerticalAlignment="Top" ，HorizontalAlignment="Left"这两个属性后就只在左侧和上侧设置了，就像这样Margin="145,400,0,0"

RepeatButton控件 

  <RepeatButton Height="111" HorizontalAlignment="Left" Margin="60,366,0,0" Name="repeatButton1" VerticalAlignment="Top" Width="321" Click="repeatButton1_Click" />

只要按着按钮一直不放就会一直触发Click事件 

 ToggleButton控件

 <ToggleButton Width="200" Height="70" 

                          Checked="Checked_1"

                           Unchecked="Checked_2"

                          Indeterminate="Checked_3"/> 

该控件有连续的三个事件响应，点击一次触发Checked_1,点击两次Checked_2,点击第三次的时候触发Checked_3