Absolute Beginners Series For Window Phone 8(4-6)
Part4 Introduction to XAML
什么是XAML？
XMAL是XML，eXtensible Markup Language，XML和HTML有同一个祖先。过去使用XML存储应用设置或数据交换。要使用XML，你要先定义一个schema，定义适当的名称
和属性。schema是XML很重要的部分。
XAML是XML的特别应用。XAML的作用有点像HTML，不同的是XAML创建的是类的实例并为他赋值。所以要创建一个Button，我们不但可以用XAML代码来创建，也可以通过写
c#代码，创建Button实例来创建。但是用XAML写的代码更少，而且马上从左边的视图模型看到效果。用C#就要让程序运行才可以看到结果。
Introducing Type Converters
在c#中为button赋值：myButton.HorizontalAlignment="Left"，会编译错误。程序会通过Type Converter将“Left”传给枚举值
System.Windows.HorizontalAlignment.Left。
Understanding XAML Namespace Declarations
下面来看XAML代码的顶部。
1 <phone:PhoneApplicationPage 2 x:Class="WinPhoneTest.MainPage" 3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 5 xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 6 xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" 7 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 8 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 9 mc:Ignorable="d" 10 FontFamily="{StaticResource PhoneFontFamilyNormal}" 11 FontSize="{StaticResource PhoneFontSizeNormal}" 12 Foreground="{StaticResource PhoneForegroundBrush}" 13 SupportedOrientations="Portrait" Orientation="Portrait" 14 shell:SystemTray.IsVisible="True">
第3到第8行是6个schemea，第3行没有冒号和后面的字符，他是默认的命名空间。其余的4到8行用了name加：的组合。所以:x或者:phone是命名空间，他与一个
schema结合。
例如：<Grid x:Name="LayoutRoot" Background="Transparent">
在这个Grid中，我们认为Grid和Background的命名空间是第3行的默认命名空间，像Grid、Button、MediaElement等等的Windows Phone 8 XAML元素都在这个默认的命
名空间里。
而x:Name是第4行x:命名空间。x:就代表了他后面的地址，这个schema定义了XAML的固有的一些规则。
第5、6行定义了Phone和Shell的命名空间和schema。定义的是当我们安装WinPhone8 API的时候，安装的Microsoft.Phone CLR 命名空间。如第一行
的：<phone:PhoneApplicationPage，表明PhoneApplicationPage类是这个定义的一部分。
第7、8行的定义，实现了VS在左边对于在右边写入的XAML代码的显示。这些代码在编译的时候会被忽视掉，这就是第9行代码所做的事情。
顶部的这些代码定义了你的程序要遵守的一些规则，没有特殊的原因不要去修改或删除它。
Understanding Default Properties
如下PhoneApplicationPage里面包含了Grid，Grid里又包含了Grid，Grid又包含了MediaElement和Button，但是他们不是默认属性。
<PhoneApplicationPage>
<Grid ...>
<Grid ... >
<MediaElement ... />
<Button ... />
</Grid>
</Grid>
</PhoneApplicationPage>
又如Button，这里的Hello World可以写在标签中间，也可以写在标签里面，这和Content就是默认属性。
<Button ... > Hello World </Button>
<Button Content="Hello World" ... />
Understanding Complex Properties and the Property Element Syntax
Example:Background="Red"
在C#中是 myButton.Background=newSolidColorBrush(Colors.Red);
但是当属性不能更好的表示我们想表示的内容的时候，就需要用到"复杂属性"。比如，我们要给button添加渐变色的话，实例代码如下：
<Button Width="200" Height="200" HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="Queck" > <Button.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="Black" Offset="0"></GradientStop> <GradientStop Color="Red" Offset="1"></GradientStop> </LinearGradientBrush> </Button.Background> </Button>
Part 5: Basics of Layout and Events
Grid
先看一个最简单的Grid
<Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> </Grid>
这个Grid分为两行。一个的Height为Auto，另一个为*。
Auto的意思是这一行的高度是根据他的内容来定的，如果他的内容为100，这一行的高度就为100，他的内容为200，这一行的高度就为200。
*的意思的，占据所有可以占据的空间。如下面的代码，第一个Rectangle的Height决定了第一行的高度，而剩下的所有高度都归为第二行。
<Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Rectangle Fill="Red" Grid.Row="0" Height="100"></Rectangle> <Rectangle Fill="Blue" Grid.Row="1"></Rectangle> </Grid>
对于*还有下面一个例子，将Grid分为3份。
<Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="1*"/> <RowDefinition Height="2*"/> <RowDefinition Height="3*"/> </Grid.RowDefinitions> <Rectangle Fill="Red" Grid.Row="0"></Rectangle> <Rectangle Fill="Blue" Grid.Row="1"></Rectangle> <Rectangle Fill="Green" Grid.Row="2"></Rectangle> </Grid>
创建一个3*3的Grid
<Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <TextBlock>1</TextBlock> <TextBlock Grid.Column="1">2</TextBlock> <TextBlock Grid.Column="2">3</TextBlock> <TextBlock Grid.Row="1">4</TextBlock> <TextBlock Grid.Row="1" Grid.Column="1">5</TextBlock> <TextBlock Grid.Row="1" Grid.Column="2">6</TextBlock> <TextBlock Grid.Row="2">7</TextBlock> <TextBlock Grid.Row="2" Grid.Column="1">8</TextBlock> <TextBlock Grid.Row="2" Grid.Column="2">9</TextBlock> </Grid>
Grid cell Alignments and Margins
<Grid x:Name="LayoutRoot" Background="Transparent"> <Rectangle Fill="Blue" Width="100" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top"/> <Rectangle Fill="Red" Width="100" Height="100" HorizontalAlignment="Right" VerticalAlignment="Bottom"/> <Rectangle Fill="Green" Width="100" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center"/> <Rectangle Fill="Yellow" Width="100" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="100,100"/> <Rectangle Fill="White" Width="100" Height="100" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="50,0,0,50"/> </Grid>
StackPanel,像栈一样一个接一个的排列。
<StackPanel Grid.Row="1"> <TextBlock Text="My Application"/> <TextBlock Text="page name"/> </StackPanel>
Understanding Events
添加事件的两种方法：1、在XAML代码里，如：Click=“”。2、通过属性窗口。
Part 6: Styling the App
Change out the app's tile icons
双击Properties>WMAppMainfest.xml
下面要替换App Icon，这个文件是放在Assets下的，我们可以通过替换这个文件来修改Icon。
然后是Tile Image，在Assets下的Tiles文件夹下，替换掉IconicTileMediumLarge.png和IconicTileSmall.png。这里需要做一些操作。
1、Tile Template-->TemplateIconic
2、勾选 Support for large Tiles
3、设置 Small Tile Image 和 Medium Tile Image
Modifying the App and Page Titles
修改以下相应的位置的代码，就可以修改程序名称和page名称 
Understanding Binding Syntax and Static Resources
Style="{StaticResource PhoneTextTitle1Style}"，“{}”在XAML语法中是绑定语法的意思。
让我们先看{StaticResource}
1、为<phone:PhoneApplicationPage>添加本地Resources特性，任何创建的brushes或者styles只能在本页用。
2、创建一个key为“MyBrush”的SolidColorBrush
3、创建一个key为“MyButtonBackground”的Style，注意他的目标类型为Button，意思是这个style只能用在Button上，在style里可以单独设置Button的属性。
4、绑定MyBrush和MyButtonBackground到Button。
<phone:PhoneApplicationPage.Resources> <SolidColorBrush x:Key="MyBrush" Color="Brown"/> <Style TargetType="Button" x:Key="MyButtonBackground"> <Setter Property="Background" Value="Blue"/> </Style> </phone:PhoneApplicationPage.Resources> <!--Data context is set to sample data above and first item in sample data collection below and LayoutRoot contains the root grid where all other page content is placed--> <Grid x:Name="LayoutRoot" Background="Transparent"> <StackPanel x:Name="ContentPanel" Margin="12,0,12,0"> <Button Background="{StaticResource MyBrush}" Content="MyBrush" Height="200" Width="200" VerticalAlignment="Top"/> <Button Style="{StaticResource MyButtonBackground}" Content="MyButtonBackground" Height="200" Width="200"/> </StackPanel> </Grid>
前面也说了这个Resource只能在本页使用，那么怎么在这个应用中使用这个Resource呢？将Resource代码移到App.xaml下的Application.Resources中。
<!--Application Resources--> <Application.Resources> <local:LocalizedStrings xmlns:local="clr-namespace:DataBoundApp1" x:Key="LocalizedStrings"/> <SolidColorBrush x:Key="MyBrush" Color="Brown"/> <Style TargetType="Button" x:Key="MyButtonBackground"> <Setter Property="Background" Value="Blue"/> </Style> </Application.Resources>
Discovering Theme Resources
<TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
对于这句代码，你会好奇PhoneTextTitle1Style是从哪里来的。
http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff769552(v=vs.105).aspx定义了许多的WinPhone内置样式。
Customizing a Theme Resource by creating a style based on it
将Themed Style 转化为 Local Style。
TextBlock的Style变成了这样，修改FontFamily(Verdana)和FontSize(64)。
<TextBlock Text="page name" Margin="9,-7,0,0"> <TextBlock.Style> <Style BasedOn="{StaticResource PhoneTextBlockBase}" TargetType="TextBlock"> <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiLight}"/> <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeExtraExtraLarge}"/> </Style> </TextBlock.Style> </TextBlock>
将Style复制到App.xaml下，添加属性x:Name="MyTitleText"，应用到全局中去。
