Silverlight系列（1）Silverlight 和XAML

1.1 Silverlight简介

Silverlight是Microsoft 全力打造的一种跨平台、跨浏览器的RIA（富互联网应用程序）技术，并通过结合音视频、动画、交互以及炫丽的用户界面为Web应用程序提供精彩的多媒体创意和丰富的交互式环境。

下面是几个采用silverlight技术的网站：

http://money.finance.sina.com.cn/silverlight/

http://tennis.uxclip.com/

1.1.1 Silverlight与WPF

Silverlight的前身是“WPF/E”（WPF Everywhere），是WPF（Windows Presentation Function）的子集，WPF是.NET 3.0框架技术的重要组成部分，是Microsoft新一代桌面应用程序的界面呈现技术，Windows 7就是基于这种技术完成的。她可以直接操纵硬件显卡驱动，市图形图像表现上升到新高度。Silverlight是WPF在B/S上的应用。

1.1.2 Silverlight的技术优势

1.     引人注目的体验

支持2D、3D的图形图像、动画、多媒体数据绑定、网络通讯和丰富的控件，同时提供了强大的样式模板和自定义风格样式，支持图像的缩放。并且Silverlight插件的体积小，下载和安装方便。

2.     强大的技术

Silverlight是跨浏览器的，支持多种语言开发。支持Linq、WCF、ADO.NET技术，并可以与ASP.NET及Ajax进行完美结合。尤其是在多媒体方向的开发显得尤为突出。

3.     敏捷的开发效率

Microsoft除了提供VS开发工具还提供了Expression Studio套件进行界面开发（后期学）,Silverlight界面是通过XAML语言来设计的。

1.1.3 创建第一个Silverlight程序

第一步，创建Silverlight项目 

第二步，Silverlight应用程序必须在受主机托管的Html页面中运行，所以需要选择向解决方案中添加新的ASP.NET Web项目。创建完成。

APP.xaml文件用来控制程序的入口和资源以及异常处理。以下代码用来确定应用程序初始加载项。

private void Application_Startup(object sender, StartupEventArgs e)

        {

            this.RootVisual = new MainPage();

        }

MainPage.xaml是Silverlight应用程序的默认用户控件.

第三步，制作程序

在MainPage用户控件中放入TextBlock控件，并设置ForeGround属性为渐变，Text属性为第一个Silverlight程序。再加入一个TextBox和Button控件。如图所示：

按钮的点击事件代码如下：

         private void button1_Click(object sender, RoutedEventArgs e)

        {

            MessageBox.Show("点击了我，奇迹发生了！");

            this.textBlock1.Text = textBox1.Text;

        }

       运行结果如下：

1.2 XAML可扩展应用程序标记语言

Silverlight和WPF都是采用XAML语言来描述界面元素的，使用这一语言彻底把界面和代码分离出来。来源于XML，遵循XML的规则。

1.2.1 Silverlight的XAML分类

按需求可以分为如下几种：

（1）      根元素

来源于XML，一个XML只能有一个根节点，XAML的根节点是UserControl。

（2）      XAML控件元素

常见的控件元素有<Button>,<TextBox>,<TextBlock>等，就是控件。

（3）      XAML布局元素

常见布局元素有<Canvas>,<Grid>,<StackPanel>等，用于页面布局

（4）      XAML绘画元素

Silverlight的图形元素分为Shape（线性绘图类）和Geometry（几何绘图类），常见的元素有<line>,<Rectangle>等

（5）      XAML属性元素

用来描述控件的属性，如：width,BackGround等等

1.2.2 设置属性

在XAML中设置属性有以下几种方式：

（1）      使用属性语法

格式如下：

<objectName propertyName=”propertyValue”></objectName>

如：

<Canvas Width="300px" Height="200px" Background="Red"></Canvas>

（2）      使用属性元素语法

某些属性可以使用属性元素语法这种形式来设置，语法如下：

<object>

      <object.property>

           <!--属性值-->

      </object.property>

</object>

如上面的形式可以写成

<Canvas>

        <Canvas.Width>300</Canvas.Width>

        <Canvas.Height>200</Canvas.Height>

        <Canvas.Background>Red</Canvas.Background>

    </Canvas>

（3）      使用内容元素语法

某些Silverlight元素的属性支持内容元素写法，这种属性允许忽略元素的名称，实例对象会根据XAML元素中的第一个标记值来设置它的属性。下面是三个示例的比较：

      属性语法：

        <TextBlock Text="Silverlight"></TextBlock>

      属性元素语法：

<TextBlock>

                     <TextBlock.Text>Silverlight</TextBlock.Text>

        </TextBlock>

内容元素语法：

<TextBlock>Silverlight</TextBlock>

（4）      使用集合语法

使用这种方式的元素通常是支持一个属性元素的集合，就是想对象的集合中添加属性项。如渐变色设置，LinearGradientBrush就是集合语法

<Canvas>

        <Canvas.Background>

            <LinearGradientBrush>

                <GradientStop Color="YellowGreen"/>

                <GradientStop Color="White" Offset="1"/>

            </LinearGradientBrush>

        </Canvas.Background>

    </Canvas>

1.3 Silverlight布局

1.3.1 Canvas

Canvas是在Silverlight 1.0时代就有的一种基础布局面板，它采用绝对坐标定位。可以使用附加属性对Canvas中的元素进行定位，通过附加属性我们指定控件相对于其直接父容器Canvas 控件的上、下、左、右坐标的位置。如下面的XAML声明了两个矩形，它们分别相对于父容器Canvas的左边距是50，相对于父容器Canvas的上边距分别是50和150：

运行后界面的效果如下所示：

除了上面我们用到的Canvas.Top和Canvas.Left两个附加属性外，还有一个Canvas.ZIndex附加属性。如果指定了两个控件相对于父容器Canvas同样的边距，则后面声明的控件父覆盖前面声明的控件。这时我们可以使用Canvas.ZIndex属性来改变它们的显示顺序，如下面的XAML声明：

<Canvas Background="#46461F">

    <Rectangle Fill="#0099FF" Width="160" Height="80"

               Canvas.Top="100" Canvas.Left="100" Canvas.ZIndex="1"/ >

   

    <Rectangle Fill="#FF9900" Width="160" Height="80"

             Canvas.Top="100" Canvas.Left="100"/>

</Canvas>

将会让蓝色矩形显示在上面，值最大的显示在最上面：

1.3.2 StackPanel

StackPanel支持用行或列的方式来进行页面布局，默认情况下所有的子元素会垂直的排列显示，如下面的XAML声明三个矩形：

<StackPanel Background="#46461F">

    <Rectangle Fill="#0099FF" Stroke="White"

               Width="100" Height="50" Margin="10"/>

    <Rectangle Fill="#0099FF" Stroke="White"

               Width="100" Height="50" Margin="10"/>

    <Rectangle Fill="#0099FF" Stroke="White"

               Width="100" Height="50" Margin="10"/>

</< SPAN>StackPanel>

运行后在界面显示效果如下：

当然我们也可以指定为水平排列，通过Orientation属性指定：

<StackPanel Background="#46461F" Orientation="Horizontal">

    <Rectangle Fill="#0099FF" Stroke="White"

               Width="100" Height="50" Margin="10"/>

    <Rectangle Fill="#0099FF" Stroke="White"

               Width="100" Height="50" Margin="10"/>

    <Rectangle Fill="#0099FF" Stroke="White"

               Width="100" Height="50" Margin="10"/>

</StackPanel>

运行后界面显示效果如下：

在这里为了让各个控件之间有一定的距离，使用了Margin属性，该属性类似于HTML中的Margin。

1.3.3 Grid

Grid控件类似与HTML中的Table，只不过子元素不用放在单元格中。通过 和 来定义Grid的行和列，使用Grid.Row和Grid.Column两个附加属性指定子元素在Grid中显示的位置，这是一种非常灵活的布局方式。如下面的XAML声明：

<Grid x:Name="LayoutRoot" Background="#46461F" ShowGridLines="True">

    <Grid.RowDefinitions>

        <RowDefinition Height="120"/>

        <RowDefinition Height="*"/>

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

        <ColumnDefinition Width="100"/>

        <ColumnDefinition Width="*"/>

    </Grid.ColumnDefinitions>

    <TextBlock Grid.Row="0" Grid.Column="0" Text="UserName:" VerticalAlignment="Center" Foreground="White"></TextBlock>

    <TextBlock Grid.Row="1" Grid.Column="0" Text="Password:" VerticalAlignment="Center" Foreground="White"></TextBlock>

    <TextBox Grid.Row="0" Grid.Column="1" Width="200" Height="30" HorizontalAlignment="Left"></TextBox>

    <TextBox Grid.Row="1" Grid.Column="1" Width="200" Height="30" HorizontalAlignment="Left"></TextBox>

<Grid>

定义一个两行两列的Grid，做一个简单的用户登录的布局，为了明显起见，把ShowGridLines属性设为True，以便能够显示出边框线。同时，我们指定了第一行的高度为120，而第二行的则是剩余的高度，用*来指定。运行后效果如下：

1.3.4 综合示例

分别了解了上面的三个布局控件，接下来我们看一个综合实例，如何完成如下的一个取色器：

首先我们添加一个两行两列的Grid控件，分别指定行高和列宽：

<Grid x:Name="LayoutRoot" Background="White">

    <Grid.ColumnDefinitions>

        <ColumnDefinition Width="260" />

        <ColumnDefinition Width="*" />

    <Grid.ColumnDefinitions>

    <Grid.RowDefinitions>

        <RowDefinition Height="120" />

        <RowDefinition Height="120" />

    <Grid.RowDefinitions>

</Grid>

添加颜色显示区域，用一个矩形显示，放入Grid的第0行第1列：

<Rectangle Grid.Row="0" Grid.Column="1" x:Name="PreviewColor"

           Fill="#FF6600" Margin="10" Stroke="#666666" StrokeThickness="2" />

再添加颜色值显示区，嵌套一个StackPanel控件，让它里面的子控件垂直显示：

<StackPanel Grid.Row="1" Grid.Column="1" >

    <TextBlock FontSize="12">Color</TextBlock>

    <TextBox x:Name="HexColor" Width="160" Height="30" Text="#FF6600" Margin="10,5" FontSize="11"/>

</StackPanel>

左边用四个Silder控件和四个TextBlock控件显示，需要对Grid的行进行合并Grid.RowSpan属性：

<StackPanel Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" VerticalAlignment="Center">

   <TextBlock Text="Alpha" FontSize="12" Margin="10,15,0,0"/>

   <Slider x:Name="AlphaSlider" Margin="20,0,10,0" Maximum="255" Value="255" ValueChanged="RedSlider_ValueChanged"/>

   <TextBlock Text="Red" FontSize="12" Margin="10,15,0,0"/>

   <Slider x:Name="RedSlider" Margin="20,0,10,0" Maximum="255" Value="255" ValueChanged="RedSlider_ValueChanged"/>

   <TextBlock Text="Green" FontSize="12" Margin="10,15,0,0"/>

   <Slider x:Name="GreenSlider" Margin="20,0,10,0" Maximum="255" Value="102" ValueChanged="RedSlider_ValueChanged"/>

   <TextBlock Text="Blue" FontSize="12" Margin="10,15,0,0"/>

   <Slider x:Name="BlueSlider" Margin="20,0,10,0" Maximum="255" Value="0" ValueChanged="RedSlider_ValueChanged"/>

</StackPanel>

这样我们就完成了上面这样相对复杂的界面布局，对Slider控件添加事件处理程序：

private void RedSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)

{

    Color color = Color.FromArgb((byte)AlphaSlider.Value, (byte)RedSlider.Value, (byte)GreenSlider.Value, (byte)BlueSlider.Value);

 

    PreviewColor.Fill = new SolidColorBrush(color);

    HexColor.Text = color.ToString();

}

运行后，可以选取不同的颜色值：

 

转自：http://www.hdaccp.com/new.aspx?id=381