WPF and Silverlight 学习笔记（二）：WPF和Silverlight概述

WPF（Windows Presentation Foundation，Windows外观基础（直译））是基于Framework 3.0（含以后版本）的新一代Windows界面开发技术。

Silverlight（中文翻译为“银光”），可以看成是WPF的Web应用产品，其早先名为WPF/E。其主要应用于Web富客户端应用程序（RIA，Rich Interface Application）。现阶段此技术可以说比较“火”，微软在此方面主要的对手就是Adobe公司的以Flash为基础的Flex技术。

两者均是以XAML为基础的，在某些条件下是可以相互的转换：如定义一个简单的ARGB调色版应用：

WPF应用程序如下：

XAML文件：

<Window x:Class="WPFColorVersion.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WPF Color Version" Height="300" Width="400" WindowStartupLocation="CenterScreen" ResizeMode="NoResize">
<Canvas Margin="0,0,0,0">
<Canvas.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF6254E2" Offset="0.996"/>
<GradientStop Color="#FFFFFFFF" Offset="0"/>
</LinearGradientBrush>
</Canvas.Background>
<TextBlock Height="34" Canvas.Left="28" Canvas.Top="17" Text="WPF Color Version" TextWrapping="Wrap" FontSize="24"

FontFamily="Comic Sans MS" FontWeight="Bold"/>
<TextBlock Height="34" Canvas.Left="22" Canvas.Top="38" FontFamily="Comic Sans MS" FontSize="24" FontWeight="Bold"

Text="WPF Color Version" TextWrapping="Wrap" RenderTransformOrigin="0.5,0.5">
<TextBlock.Foreground>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF000000" Offset="1"/>
<GradientStop Color="#FFD9DFF0" Offset="0.026"/>
<GradientStop Color="#FF7D818B" Offset="0.78"/>
</LinearGradientBrush>
</TextBlock.Foreground>
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="-1"/>
<SkewTransform AngleX="-29" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</TextBlock.RenderTransform>
</TextBlock>
<Rectangle Fill="#00000000" Width="156" Height="103" Canvas.Left="219" Canvas.Top="108" x:Name="demoArea" />
<TextBlock Width="15" Height="17" Canvas.Top="116" Text="A" TextWrapping="Wrap" Canvas.Left="28" HorizontalAlignment="Center"/>
<TextBlock Width="15" Height="17" Canvas.Left="28" Canvas.Top="142" Text="R" TextWrapping="Wrap" HorizontalAlignment="Center"/>
<TextBlock Width="15" Height="17" Canvas.Left="28" Canvas.Top="166" Text="G" TextWrapping="Wrap" HorizontalAlignment="Center"/>
<TextBlock Width="15" Height="17" Canvas.Left="28" Canvas.Top="194" Text="B" TextWrapping="Wrap" HorizontalAlignment="Center"/>
<Slider Width="148" Height="22" Canvas.Left="43" Canvas.Top="111" Maximum="255" x:Name="sliderA" ValueChanged="sliderValueChanged"/>
<Slider Width="148" Height="22" Canvas.Left="43" Canvas.Top="137" Maximum="255" x:Name="sliderR" ValueChanged="sliderValueChanged"/>
<Slider Width="148" Height="22" Canvas.Left="43" Canvas.Top="163" Maximum="255" x:Name="sliderG" ValueChanged="sliderValueChanged"/>
<Slider Width="148" Height="22" Canvas.Left="43" Canvas.Top="189" Maximum="255" x:Name="sliderB" ValueChanged="sliderValueChanged"/>
<TextBlock Width="75" Height="17" Canvas.Left="143" Canvas.Top="230" Text="Color Value:"/>
<TextBox Width="89" Height="20" Canvas.Left="219" Canvas.Top="227" Text="#00000000" x:Name="txtColorValue"/>
</Canvas>
</Window>

代码文件：

using System.Windows;
using System.Windows.Media;

namespace WPFColorVersion
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}

private void sliderValueChanged(object sender, System.Windows.RoutedPropertyChangedEventArgs<double> e)
{
byte a = (byte)(sliderA.Value);
byte r = (byte)(sliderR.Value);
byte g = (byte)(sliderG.Value);
byte b = (byte)(sliderB.Value);

Color clr = Color.FromArgb(a, r, g, b);

demoArea.Fill = new SolidColorBrush(clr);
txtColorValue.Text = clr.ToString();
}
}
}

而对应在Silverlight中，XAML文件内：

<UserControl x:Class="SilverlightColorVersion.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<!--此位置与WPF项目的XAML文件内容完全相同-->
</UserControl>

另外，Silverlight的代码文件内容也与WPF项目中的代码相同。

WPF应用程序执行的结果如下：





在FireFox（3.0.8）及IE（8.0）中执行Silverlight项目的结果如下：







从此可以看出，WPF与Silverlight有着千丝万缕的联系，我们在学习过程中可以相互的对比。

 

示例代码下载