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 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

posted @ 2012-03-28 00:03  张小然  阅读(459)  评论(0编辑  收藏  举报