WindowsPhone8 应用开发学习笔记（二） - 界面设计

这部分主要学习控件，主要涉及Image（图片），按钮（Button），文字（TextBlock），文字框（TextBox），转轴（Pivot），进度条（ProgressBar），还有可能涉及到自定义控件。暂时先写这么多，还有列表不知道用哪个控件表示呢。

为了赶项目，UDP通讯先放一放，先做界面了，UDP通讯可能跟公司局域网有关，禁用了一些东西引起的吧，现在还不确定。

Image

设置好图片的长和宽。结合了Border效果会比较好一点，事件响应放在border里面。

x:Name="btnLeft"  //控件名称

Source="Images/left_black.png" //图片露肩 

Width="55" Height="55"  //图片宽度和高度

VerticalAlignment="Center"  //居中

HorizontalAlignment="Center" //居中

Button

Button有个郁闷的地方，设置背景图片，长和宽之后，图片比想象中的小，周围还有空余的地方，网上看到有人用自定义的按钮，把这个弊端解决了，我是直接用Image控件来响应按钮事件。

TextBlock

就是文字控件

Text="Score"  //显示文字内容

Width="80"  //控件宽度

TextAlignment="Center"  //文本对齐

Margin="0 1" //外边框定位

TextBox

文字输入控件

Pivot

这个是转轴控件。功能上类似于android的tab吧，我只能这样理解。

关于Header的背景色，文字颜色设置如下：

<phone:PivotItem.Header >   

<Grid Background="Blue">  
                    <TextBlock  Text="Detail" Foreground="Black"  />

</Grid>
</phone:PivotItem.Header>

背景色设置为蓝色，header的文字颜色设置为黑色，还能设置字体大小，前景色什么的；其他属性可以自己摸索，格式反正就是这样了。

StackPanel

StackPanel类似于android中的LinearLayout，垂直依次排列或者横向依次排列，用属性Orientation来设置。

Grid

Grid网格控件，这个就是类似于html中的table了。可以用StackPanel也可以用Grid控件。

Border

x:Name="btnGameOver"  //控件名称

Background="Transparent"  //控件背景色，或者Background="Black"

Width="130" Height="0"  //宽度和高度

CornerRadius="6,6,6,6"   //圆角半径，也可写作CornerRadius="6" 

Margin="5,10,0,0" //外边框定位

BorderThickness="2"  //边框线条宽度

BorderBrush="Gray" //边框线条颜色

需要注意一下，Ui控件Telerik for Windows phone