大家都知道windows phone前台使用sliverlight的xaml来进行布局，但是当我们要做一个软件的时候也许我们会随便拖几个控件放在界面上，，这样也不可以说不行，但是如果界面复杂，控件繁多，拖来拖去，受难为的还是自己；所以说一个好的界面布局不仅给自己一个清晰的界面，让用户看起来也是很舒服的感觉。
首先介绍在开发wp中常用的三种容器：Canvas、Grid、StackPanel当然三种容器中都可以放置任何控件，这三个容易本质上也是控件，所以控件中套控件，这种说法也是正确的。
1） Canvas:这是一个对空间进行绝对布局的容器，当容器翻转时，对应的里面的控件的位置是不会发生任何变化的，一般情况下，用的比较少，这里我就当做容器来介绍。可以自己动手试一下。记住翻转式要把SupportedOrientations="Portrait" 这个属性值设置成PortraitOrLandscape。只有设置成这个属性后，默认是不翻转的，位置在最上边，。
<Canvas>
<Button Canvas.Left="50" Canvas.Top="100" Content="123"></Button>
<CheckBox Canvas.Left="50" Canvas.Top="300"></CheckBox>
</Canvas>
2） Grid:这个是最常用的一种容器，当我们新建一个项目时，windows phone会自动给我们创建一个Grid。
我们可以把Grid想象成html中的table，应为Grid对应的也是行和列，只不过是虚拟的。
RowDefinitions对应的行，ColumnDefinition对应的列
具体用法:
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
这样就创建了三行三列：当我们在Grid中放置元素的时候只需要制定对应的列和行就可以了
<Button Grid.Column="1">
<StackPanel Width="190">
<TextBlock Text="45"></TextBlock>
<TextBlock Text="收听" Width="199"></TextBlock>
</StackPanel>
</Button>
<Button Grid.Column="0" Grid.Row="1">
<StackPanel Width="190">
<TextBlock Text="26"></TextBlock>
<TextBlock Text="听众"></TextBlock>
</StackPanel>
</Button>
<Button Grid.Column="1" Grid.Row="1">
<StackPanel Width="190">
<TextBlock Text="0"></TextBlock>
<TextBlock Text="收藏"></TextBlock>
</StackPanel>
</Button>
3） StackPanel这种容器也是非常常见的一种，在这个控件中有个属性很重要就是Orientation，就是指示里面的子空间的显示方式是横向现实还是竖向现实，默认是横向的Horizontal；根据自己的需要设置
<StackPanel Orientation="Horizontal">
<Image Width="130" Height="130" Source="/wp练习;component/Images/Background.png"/>
<StackPanel Orientation="Vertical">
<TextBlock Margin="10" Text="window phone"></TextBlock>
<TextBlock Margin="10" Text="@weibowindowsphone7275"></TextBlock>
<TextBlock Margin="10" Text="男 海淀"></TextBlock>
</StackPanel>
</StackPanel>
也可以在StackPanel中嵌套StackPanel, 下面附上一个例子，仿照微博一个页面做的一个页面布局;
自己也可以随便找几个页面练练手。
在最后面的一个Demo有我自己找的一个微博的页面写的页面布局，大家也可以自己随便找几个页面练练手。
我们经常见到音乐播放器中的歌词(歌词从左到右的滚动效果), 一个textblock的渐变效果，textBox中背景放置图片，textBlock中字体背景放置图片。其实这并不难，只要知道有个Brush的东西，一切都变得简单了。
我们都知道要设置textBlock的字体需要设置Foreground颜色,但这种颜色是单一的，如果要设置渐变色或者RGP值的颜色(例如:#000);如果不容前台设置的话后台代码同样可以修改，但是前台能做的事，尽量交给前台做。Ellipse的控件的Fill，TextBox的BackGround的类型都是Brush，在Brush下有SolidBrush(渐变颜色设置),LinearGradientBrush(线性颜色设置)等的子类。通过这些属性给他们设置各种各样的效果
如果自己揉Reflector的话，搜索一下Brush，我们会看到
//textBlock的字体颜色的渐变效果
<TextBlock Text="王菲-因为爱情" FontSize="50">
<TextBlock.Foreground>
<!--<SolidColorBrush Color="Red"></SolidColorBrush>-->
<LinearGradientBrush>
<GradientStop Offset="0" Color="Red"></GradientStop>
<GradientStop x:Name="g" Offset="0" Color="Blue"></GradientStop>
<GradientStop Offset="1" Color="Yellow"></GradientStop>
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
//textBlock的字体颜色从左到右的滚动效果，歌词滚动
<TextBlock HorizontalAlignment="Center" FontSize="30" Text="也许征程的迷茫会扯碎我的脚步" Margin="6,128,30,443">
<TextBlock.Foreground>
<LinearGradientBrush>
<GradientStop Color="Red" Offset="0"></GradientStop>
<GradientStop x:Name="ge1" Color="Red" Offset="0"></GradientStop>
<GradientStop x:Name="ge2" Color="Yellow" Offset="0"></GradientStop>
<GradientStop Color="Yellow" Offset="1"></GradientStop>
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
//给textBlock设置背景图片
<TextBlock HorizontalAlignment="Center" FontSize="30" Text="可我相信未来会给我一双翅膀" Margin="36,240,30,312">
<TextBlock.Foreground>
<ImageBrush ImageSource="Images/Background.png"></ImageBrush>
</TextBlock.Foreground>
</TextBlock>
// Ellipse 的fill加载图片
<Ellipse Height="100" HorizontalAlignment="Left" Margin="120,351,0,0" Name="ellipse1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="200" >
<Ellipse.Fill>
<ImageBrush ImageSource="Images/Background.png"></ImageBrush>
</Ellipse.Fill>
</Ellipse>
// 给TextBox设置背景图片
<TextB
ox Height="72" HorizontalAlignment="Left" Margin="20,479,0,0" Name="textBox1" Text="TextBox" VerticalAlignment="Top" Width="406" >
<TextBox.Background>
<ImageBrush ImageSource="Images/Background.png"></ImageBrush>
</TextBox.Background>
</TextBox>
