Windows Phone 7 常用控件简介

1.       Grid控件
Grid定义由列和行组成的网格布局。Grid.RowDefinitions和Grid.ColumnDefinitions集合分别包含RowDefinition和ColumnDefinition用来定义行和列的宽度和高度,行列的数量是根据集合中子对象的数量被定义的。各子对象中Grid.Row和Grid.Column属性用于定义在网格中的位置。
2.       StackPanel控件
StackPanel控件可以使布局内的各子对象以水平或垂直的方式顺序排列。通过设置Orientation="Vertical"或者Orientation="Horizontal"来定义排列方式。默认情况以垂直方向排列子对象。
3.       Canvas
    以绝对位置的方式布局。通过设置子对象Canvas.Left 指定对象与所在的 Canvas 的左侧之间的距离(x 坐标);Canvas.Top 指定对象与所在的 Canvas 的顶部之间的距离(y 坐标)。
    Canvas 可以包含子对象,这些子对象呈现在 Canvas 区域中,是通过坐标来显式定位的。由于绝对定位不考虑浏览器窗口的大小或浏览器大小调整,因此一般最好使用 GridStackPanel 作为容器。

由于 CanvasUIElement 类型,因此可以嵌套 Canvas 对象。

很多情况下,Canvas 仅仅用作其他对象的容器,而没有任何可见属性。如果满足以下任一条件,Canvas 即不可见:

  • Height 属性等于 0。

  • Width 属性等于 0。

  • Background 属性等于 nullNothingnullptrnull 引用(在 Visual Basic 中为 Nothing

  • Opacity 属性等于 0。

  • Visibility 属性等于 Visibility.Collapsed

  • Canvas 的某个上级对象不可见。

<Canvas Width="300" Height="300" Background="White">
    <Canvas Width="250" Height="250" Canvas.Left="30"
            Canvas.Top="30" Background="blue">

        <Rectangle Canvas.Left="30" Canvas.Top="30"
                   Fill="red" Width="200" Height="200" />
    </Canvas>
</Canvas>

4.       ScrollViewer
    ScrollViewer控件用来表示可包含其他可见元素的可滚动区域。设置HorizontalScrollBarVisibility 和VerticalScrollBarVisibility属性可以控制水平滚动条和垂直滚动条的状态。
5.       Border
控件不太适用于布局,但是确实是容器控件。

Border 控件可为另一控件提供边框和/或背景。一个边框只能包含一个子元素。

Border

下面的示例演示如何在 StackPanel 中包含的多个 TextBlock 对象周围放置一个边框。

<Border BorderThickness="5" BorderBrush="Blue" >
    <StackPanel Grid.Column="0" Grid.Row="0">
        <TextBlock Text="One"/>
        <TextBlock Text="Two"/>
        <TextBlock Text="Three"/>
    </StackPanel>
</Border>

6.      TextBlock  文本控件
 
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
 
示例中的TextBlock控件用于显示少量文本,Text 属性对应文本内容。Text 属性可以在XAML文件里动态定义,也可以在C#代码中随时修改。利用x:Name属性定义的名称来确定要修改的TextBlock控件。在这个示例里,可以通过给ApplicationTitle.Text设置新的字符串来改变文本内容。
TextBlock控件无法接收用户输入的文本,也不太适合过长文本的显示。TextBox控件可以胜任此类任务,代码如下:
 
<TextBox Height="72" HorizontalAlignment="Left" Margin="10,10,0,0" Name="textBox1" Text="TextBox" VerticalAlignment="Top" Width="460" />
 
MaxLength属性可以控制文本的字符串长度。
对于密码输入,还可以使用PasswordBox控件,代码如下:
 
<PasswordBox Height="72" HorizontalAlignment="Left" Margin="10,92,0,0" Name="passwordBox1" VerticalAlignment="Top" Width="460" />
 
PasswordBox 控件还可以使用PasswordChar定义密码显示的字符。 
7.       Button和HyperlinkButton 按钮控件
按钮控件包含Button控件和HyperlinkButton控件,HyperlinkButton控件想相比Button控件可以不必处理单击事件就可以自动导航到为 NavigateUri 指定的Uri。
 
<Button Content="Button" Height="72" HorizontalAlignment="Left" Margin="10,174,0,0" Name="button1" VerticalAlignment="Top" Width="160" />
<HyperlinkButton Content="HyperlinkButton" Height="30" HorizontalAlignment="Left" Margin="176,195,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="200" />
 
Button控件和HyperlinkButton控件都可以使用Content属性来设置按钮上的文字,除此之外,HyperlinkButton控件支持NavigateUri属性来定义目标Uri。
 
8.    RadioButton CheckBox   选择控件
RadioButton用于一组选项中选择一个选项,RadioButton有两种把多个RadioButton控件分成一组。放置到同一个父控件内,或者设置GroupName属性。使用GroupName属性也可以把同一个父控件内的RadioButton分为多组。同一组中的RadioButton会相互排斥,也就是说用户只能使一个按钮的状态为选中状态。
 
<RadioButton Content="RadioButton" Height="72" HorizontalAlignment="Left" Margin="10,10,0,0" Name="radioButton1" VerticalAlignment="Top" />
 
RadioButton可以设置为选中,未被选中,禁用状态。默认为未被选中状态,设置IsChecked="True"可把状态变更为选中,设置IsEnabled="False"可以把状态变更为禁用。
CheckBox用于选择多个选项。同RadioButton一样,可以通过设置IsChecked和IsEnabled来控制状态。
 
<CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Left" Margin="10,166,0,0" Name="checkBox1" VerticalAlignment="Top" />
 
CheckBox设置IsThreeState="True"后可以增加一种状态不确定状态。
Slider适合在一个范围内选择一个值。
 
<Slider Height="84" HorizontalAlignment="Left" Margin="0,326,0,0" Name="slider1" VerticalAlignment="Top" Width="460" />
Maximum和Minimum属性用来定义最大值和最小值。Value属性是Maximum和Minimum之间的一个值,用来定义Slider当前的值。默认的情况下,Minimum="0" Maximum="10"。用户可以通过拖动来改变Slider的值,SmallChange属性可以定义拖动的精度,也可以通过点击来改变Slider的值,LargeChange属性来定义值改变的精度。根据界面布局的需要,利用Orientation属性可以设置水平和垂直方向。
 

posted on 2011-02-09 20:03  linzheng  阅读(2122)  评论(0编辑  收藏  举报

导航