XAML 是基于 XML 发展出的一种描述语言;XML 本身的结构性非常的强,而 XAML 是基于这种特性,发展出来专门用于描述 Silverlight/WPF 的接口语言,相关的特性笔者大略归类出下列几点给各位参考
- eXtensible Application Markup Language
- 区分大小写
- 基于 XML 发展出的宣告式语言
- 用来设计 (设定) 显示的接口外观
- 非常灵活、弹性且威力强大的设计方式
- 设计工具的支持
Visual Studio / Design / Blend - Xmlns ?
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns 前置词表示后面的动作是要引入命名空间,而:后面接着的 shell 则是别名,等于代表了=号之后的 CLR 类别;引入了命名空间后,才能利用以下的方式在 XAML 中使用 Application Bar
xmlns 前置词表示后面的动作是要引入命名空间,而:后面接着的 shell 则是别名,等于代表了=号之后的 CLR 类别;引入了命名空间后,才能利用以下的方式在 XAML 中使用 Application Bar
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="MenuItem 1"/>
<shell:ApplicationBarMenuItem Text="MenuItem 2"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
了解了 XAML 的特性之后,我们来看一个简单的 Demo,看看在 Silverlight / XAML 中能够做到做到什么样子的效果;在这个 Demo 中,共有 3 个页面,第一个页面是 Button 的外观样式,笔者简单修改了一些 Button 的设定,便可以发现感觉就会大大的不同;而第二个页面是对于 Button 控件套用上转向效果,例如下面展示的样子
从这页面可以看出在 Silverlight 中,对于控件的设计是相当具有弹性的,在以往要将 button 的背景设定为渐层色得要花不少功夫才能达成;而现在,你只要简单的设定背景属性就行了 (较复杂的图形要利用 Blend 来设计控件的外观会比较方便);甚至改变 Button 的外观,方向的位置都是很轻松就能完成的。
例如一个具有渐层背景色的按钮,在 XAML 中会大概像这样
<Button Content="Button" Margin="8,100,227,0" Height="84" VerticalAlignment="Top" Foreground="Black">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF0010FF"/>
<GradientStop Color="White" Offset="0.664"/>
<GradientStop Color="#FF6D73D2" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
从这个例子中,可以清楚的看出结构性带来的好处,首先最外层是 Button 控件的卷标描述,而中间包住的部分便是设定 Background 的属性了。
而第三个页面示范了可以对于按钮上附加一些动画的效果,对于应用程序的操作与互动上能够更有趣、丰富。而在动画的制作上,利用设计工具会是比较好的选择,能够预览效果以及比较直觉;而在动画的处理上 XAML 跟程序代码是可以相辅相成的,比如说利用 XAML 定义了一个 StoryBoard
<Storyboard x:Name="Storyboard1">
<DoubleAnimation Duration="0:0:0.4" To="13" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" d:IsOptimized="True"/>
</Storyboard>
这个 StoryBoard 中定义了动画的变更是一个 Double 的值变化 (DoubleAnimation),以及动画的总时间 (Duraction 的部分),以及受影响的属性 (RenderTransform),但没有明确指定目标的元素,因此,我们可以在程序代码中设定元素名称,以及呼叫 StoryBoard 执行,就可以看到动画效果 (当然要直接在 XAML 中指定元素名称也是可以的),例如下面程序代码
private void button2_Click(object sender, RoutedEventArgs e)
{
(Storyboard1.Children[0] as DoubleAnimation).From = 0;
(Storyboard1.Children[0] as DoubleAnimation).To = 150;
Storyboard.SetTargetName( Storyboard1, "button1");
Storyboard1.Begin();
}
而直接在 XAML 上指定元素名称的话会像下面这样子
<Storyboard x:Name="Storyboard1">
<DoubleAnimation Duration="0:0:0.4" To="13" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" AutoReverse="True" Storyboard.TargetName="button1" d:IsOptimized="True"/>
</Storyboard>
程序代码也会简化如下
private void button2_Click(object sender, RoutedEventArgs e)
{
Storyboard1.Stop();
//(Storyboard1.Children[0] as DoubleAnimation).From = 0;
//(Storyboard1.Children[0] as DoubleAnimation).To = 150;
//Storyboard.SetTargetName( Storyboard1, "button1");
Storyboard1.Begin();
}