什么是XAML?

什么是XAML?

XAML是Extensible Application Markup Language,而我们一般习惯写作eXtensible Application Markup Language,这就是XAML的缩写来源。它是WPF (Windows Presentation Foundation)的一部分,是一种XML的使用者接口描述语言,使用HTML的外观,又揉合了XML语法的本质, 我们可以使用标签来定义资源,如:使用<Button>标签设定按钮(Button),用<Canvas>标签来设定画布。
XAML本质上属于一种.NET Programming Language,属于通用语言执行时(Common Language Runtime),同C#、VB.NET等同。与 HTML类似,特点是用来描述使用者接口。XAML可以定义2D 和 3D 物件、旋转(rotations)、动画(animations),以及各式各样 的效果,这是它的一些高级特性。
XAML提供了一种便于扩展和定位的语法来定义和程序逻辑分离的用户界面,而这种实现方式和ASP.NET中的"代码后置"模型非常类似 。XAML是一种解析性的语言,尽管它也可以被编译。它的优点是简化编程式上的用户创建过程,应用时要添加代码等。
而只要我们有一些html与xml的知识,就会很容易掌握xaml的使用。
在vs2010中体验一下xaml类似于html与xml的使用:(我们使用代码的方式实现类登录界面的设计,而一切都以wp7的开发为例)

1.新建一个wp7应用程序。

2.在界面设计中找到ContentPanel的部分,在<Grid></Grid>标签中书写内容,至于怎么配置环境,界面中的其他代码是什么意思,这些以后再来认识,现在只是来了解xaml。

在这里,我们要实现登录的界面,那么就要有标签(申明姓名和密码)、文本框(用于填写姓名和密码)、按钮(用于提交和清空)。

在xaml中使用<TextBlock>来实现标签功能,使用<TextBox>来实现文本框功能,<Button>当然是按钮。至于界面的设计,我倾向于在学习的时候使用手写代码的方式,而工作时使用设计器来完成,也就是俗称的“拖控件”的方式,我觉得手写代码可以更好的理解代码的各部分。

那么整个的代码就是这样(其中的width,height,margin属性意思就很明了了):

<phone:PhoneApplicationPage 
x:Class="XAML.MainPage"
xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone
="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell
="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d
="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc
="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable
="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily
="{StaticResource PhoneFontFamilyNormal}"
FontSize
="{StaticResource PhoneFontSizeNormal}"
Foreground
="{StaticResource PhoneForegroundBrush}"
SupportedOrientations
="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible
="True">

<!--LayoutRoot 是包含所有页面内容的根网格-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<!--TitlePanel 包含应用程序的名称和页标题-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="我的应用程序" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="页面名称" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<!--ContentPanel - 在此处放置其他内容-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Text="请输入姓名:" Height="50" Margin="6,46,-6,510" />
<TextBox Height="100" Margin="0,285,0,222" />
<TextBlock Text="请输入密码:" Height="50" Margin="12,229,-12,328" />
<TextBox Height="100" Margin="0,103,0,404" />
<Button Content="清空" Width="150" Height="80" Margin="48,417,259,110" />
<Button Content="提交" Width="150" Height="80" Margin="228,418,78,110" />
</Grid>
</Grid>

<!--演示 ApplicationBar 用法的示例代码-->
<!--<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="按钮 1"/>
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="按钮 2"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="菜单项 1"/>
<shell:ApplicationBarMenuItem Text="菜单项 2"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
-->

</phone:PhoneApplicationPage>

设计的界面就是这样:

=

posted on 2012-04-02 08:33  WaitingSky  阅读(1315)  评论(0编辑  收藏  举报