TerryLee @ 博客堂

使用Silverlight 2实现水中倒影效果

概述

本文将综合运用图形图像处理技术，如画刷、半透明遮罩、Transform等，实现一个水中倒影效果的示例。

Step 1：素材准备

最终我们实现的效果图将会如下所示：

 

先准备一张图片，这里我使用了一张液晶显示器的图片:)

Step 2：创建图片

首先我们创建一个图片，使用Image控件，并进行定位

<Canvas Background="#000000">
    <Image Canvas.Top="20" Canvas.Left="182" Source="a.png">
    </Image>
</Canvas>

运行后应该看起来如下所示：

 

Step 3：创建倒影

复制一张图片，使其位置与原始图片一样，然后我们使用ScaleTransform进行创建图片的倒影，这时图片已经翻转到了屏幕的外面，可以通过调节Canvas.Top进行调节，或者使用TranslateTransform：

<Canvas Background="#000000">
    <Image Canvas.Top="20" Canvas.Left="182" Source="a.png">
    </Image>
    <Image Canvas.Top="20" Canvas.Left="182" Source="a.png" Opacity="0.4">
        <Image.RenderTransform>
            <TransformGroup>
                <ScaleTransform ScaleY="-1"></ScaleTransform>
                <TranslateTransform Y="320"></TranslateTransform>
            </TransformGroup>
        </Image.RenderTransform>
    </Image>
</Canvas>

运行后看起来如下所示：

 

Step 4：半透明遮罩

利用我们在图片处理一文介绍过的OpacityMask属性实现半透明遮罩，使其看起来更加像倒影:)

<Canvas Background="#000000">
    <Image Canvas.Top="20" Canvas.Left="182" Source="a.png">
    </Image>
    <Image Canvas.Top="20" Canvas.Left="182" Source="a.png">
        <Image.RenderTransform>
            <TransformGroup>
                <ScaleTransform ScaleY="-1"></ScaleTransform>
                <TranslateTransform Y="320"></TranslateTransform>
            </TransformGroup>
        </Image.RenderTransform>
        <Image.OpacityMask>
            <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0.0">
                <GradientStop Offset="0.0" Color="#00000000" />
                <GradientStop Offset="1.0" Color="#FF000000" />
            </LinearGradientBrush>
        </Image.OpacityMask>
    </Image>
</Canvas>

运行后效果如下，倒影图片显示出了淡出效果：

  

Step 5：进一步扭曲倒影

我们对倒影图片做进一步的扭曲，用ScaleTransform来实现，使其在Y轴上做一些缩小，从1修改为0.75，达到扭曲的效果，并重新调整位置：

<Canvas Background="#000000">
    <Image Canvas.Top="20" Canvas.Left="182" Source="a.png">
    </Image>
    <Image Canvas.Top="20" Canvas.Left="182" Source="a.png">
        <Image.RenderTransform>
            <TransformGroup>
                <ScaleTransform ScaleY="-0.75"></ScaleTransform>
                <TranslateTransform Y="280"></TranslateTransform>
            </TransformGroup>
        </Image.RenderTransform>
        <Image.OpacityMask>
            <LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">
                <GradientStop Offset="0.0" Color="#00000000" />
                <GradientStop Offset="1.0" Color="#FF000000" />
            </LinearGradientBrush>
        </Image.OpacityMask>
    </Image>
</Canvas>

运行后效果如下：

Step 6：斜化倒影

我们对倒影做进一步的斜化，而不是垂直倒影，使用SkewTransform来实现，并重新调整倒影位置：

<Canvas Background="#000000">
    <Image Canvas.Top="20" Canvas.Left="182" Source="a.png">
    </Image>
    <Image Canvas.Top="20" Canvas.Left="182" Source="a.png">
        <Image.RenderTransform>
            <TransformGroup>
                <ScaleTransform ScaleY="-0.75"></ScaleTransform>
                <SkewTransform AngleX="-15"></SkewTransform>
                <TranslateTransform Y="280" X="-30"></TranslateTransform>
            </TransformGroup>
        </Image.RenderTransform>
        <Image.OpacityMask>
            <LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">
                <GradientStop Offset="0.0" Color="#00000000" />
                <GradientStop Offset="1.0" Color="#FF000000" />
            </LinearGradientBrush>
        </Image.OpacityMask>
    </Image>
</Canvas>

运行后效果应该如下所示：

 

Step 7：进一步淡化倒影

为了使倒影更加逼真，我们最后再对倒影做点修饰，进一步淡化倒影，调整倒影的Opacity属性。

<Canvas Background="#000000">
    <Image Canvas.Top="20" Canvas.Left="182" Source="a.png">
    </Image>
    <Image Canvas.Top="20" Canvas.Left="182" Source="a.png" Opacity="0.4">
        <Image.RenderTransform>
            <TransformGroup>
                <ScaleTransform ScaleY="-0.75"></ScaleTransform>
                <SkewTransform AngleX="-15"></SkewTransform>
                <TranslateTransform Y="280" X="-30"></TranslateTransform>
            </TransformGroup>
        </Image.RenderTransform>
        <Image.OpacityMask>
            <LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">
                <GradientStop Offset="0.0" Color="#00000000" />
                <GradientStop Offset="1.0" Color="#FF000000" />
            </LinearGradientBrush>
        </Image.OpacityMask>
    </Image>
</Canvas>

最后运行后整体效果如下所示：

 

这样就完成了一个水中倒影的示例，大家可以充分发挥自己的创意，做出更炫更酷的效果。

结束语

本文综合运用图形图像处理的技术，包括画刷、半透明遮罩、以及几种基本的Transform做了一个简单的水中倒影示例，你可以从这里下载本文示例代码。

posted on 2008-03-20 18:57:27 by TerryLee  评论(1) 阅读(3255)

Silverlight 2综合实例之Live Search

概述

本文将综合Silverlight与浏览器交互、网络与通信等内容，开发一个综合示例——Live Search

准备知识

在本示例中，我们将通过调用Live Search API，在Silverlight中动态创建DOM结构，将搜索的结果展现出来。在使用Live Search API之前，需要先去Live Search Developer Center申请一个应用程序ID。

申请完成后应用程序ID大约在10分钟左右生效。关于Live Search API的有关详细信息，请大家参考这里< /a>。

编写ASMX

直接调用API，返回的信息可能有很多，为了简单起见，我们对返回的结果做一些处理，编写一个SearchResultItem类：

public class SearchResultItem
{
    public string Title { get; set; }

    public string Url { get; set; }

    public string Description { get; set; }
}

添加对Live Search API的Service引用，地址为：http://soap.search.live.com/webservices.asmx? wsdl。

在ASMX中对返回的结果进行一些处理，Silverlight程序最后将直接调用ASMX。在调用Live Search时需要指定应用程序ID以及本地化的信息等，查询的参数将在Silverlight程序中调用时传入。

[WebMethod]
public SearchResultItem[] DoSearch(string query)
{
    MSNSearchPortTypeClient s = new MSNSearchPortTypeClient();
    SearchRequest searchRequest = new SearchRequest();
    int arraySize = 1;
    SourceRequest[] sr = new SourceRequest[arraySize];

    sr[0] = new SourceRequest();
    sr[0].Source = SourceType.Web;

    searchRequest.Query = query;
    searchRequest.Requests = sr;

    searchRequest.AppID = "C0680205851CCC0E38946DB8FF74156C1C826A86";
    searchRequest.CultureInfo = "zh-CN";
    SearchResponse searchResponse;

    searchResponse = s.Search(searchRequest);

    List<SearchResultItem> lists = new List<SearchResultItem>();
    foreach (SourceResponse sourceResponse in searchResponse.Responses)
    {
        Result[] sourceResults = sourceResponse.Results;
        foreach (Result sourceResult in sourceResults)
        {
            SearchResultItem item = new SearchResultItem();
            if ((sourceResult.Title != null) && (sourceResult.Title != String.Empty))
                item.Title = sourceResult.Title;

            if ((sourceResult.Description != null) && (sourceResult.Description != String.Empty))
                item.Description = sourceResult.Description;

            if ((sourceResult.Url != null) && (sourceResult.Url != String.Empty))
                item.Url = sourceResult.Url;

            lists.Add(item);
        }
    }
    return lists.ToArray();
}

测试一下我们的服务是否正常：

 

修改测试页

在测试ASPX中，修改Silverlight插件的样式控制，并添加一个div用来显示搜索的结果：

< pre class="code"><div style="height:100%;"> <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/TerryLee.SilverlightGoogleSearch.xap" Version="2.0" Width="857" Height="140" /> <div id="result"></div> </div>

定义几个简单的样式：

<style type="text/css">
    #result
    {
        margin-left:20px;
    }
    .urlstyle
    {
        color:#59990E;
    }
    .itemstyle
    {
        border-bottom:dotted 1px #59990E;
        margin-bottom:20px;
    }
</style>

实现Silverlight程序

编写一个简单的Silverlight界面，使其看起来如图所示：

XAML声明如下：

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
        <RowDefinition Height="55"></RowDefinition>
        <RowDefinition Height="50"></RowDefinition>
        <RowDefinition Height="35"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
   
    <Image Source="LiveSearch.png" Grid.Column="0"></Image>
    <StackPanel Grid.Row="1" Orientation="Horizontal">
        <TextBox x:Name="txtQuery" Width="400" Height="35"
                 Margin="50 0 0 0" BorderBrush="#3F7801"></TextBox>
        <Button x:Name="btnSearch" Width="120" Height="35"
                Background="#62A21D" Margin="20 0 0 0"
                Content="Search" FontSize="16" Click="btnSearch_Click"></Button>
    </StackPanel>
    <TextBlock Grid.Row="2" Text="网页搜索结果" Foreground="#59990E"
               FontSize="16" Margin="20 0 0 0"></TextBlock>
</Grid>

在Silverlight项目中添加对于ASMX的引用，并编写“Search”按钮的实现，对于如何调用ASMX，可以参考一步一步学Silverlight 2系列（15）：数据与通信之ASMX。动态创建DOM结构，并将结果显示出来：

private void btnSearch_Click(object sender, RoutedEventArgs e)
{
    LiveSearchWebServiceSoapClient client = new LiveSearchWebServiceSoapClient();

    client.DoSearchCompleted += new EventHandler<DoSearchCompletedEventArgs>(client_DoSearchCompleted);
    client.DoSearchAsync(this.txtQuery.Text);
}

void client_DoSearchCompleted(object sender, DoSearchCompletedEventArgs e)
{
    if (e.Error == null)
    {
        SearchResultItem[] results = e.Result as SearchResultItem[];

        HtmlElement result = HtmlPage.Document.GetElementById("result");

        foreach (SearchResultItem item in results)
        {
            HtmlElement itemElement = HtmlPage.Document.CreateElement("div");
            itemElement.CssClass = "itemstyle";

            HtmlElement titleElement = HtmlPage.Document.CreateElement("a");
            titleElement.SetAttribute("href",item.Url);
            titleElement.SetAttribute("innerText",item.Title);

            HtmlElement descriptElement = HtmlPage.Document.CreateElement("div");
            descriptElement.SetAttribute("innerText",item.Description);

            HtmlElement urlElement = HtmlPage.Document.CreateElement("span");
            urlElement.SetAttribute("innerText",item.Url);
            urlElement.CssClass = "urlstyle";

            itemElement.AppendChild(titleElement);
            itemElement.AppendChild(descriptElement);
            itemElement.AppendChild(urlElement);

            result.AppendChild(itemElement);
        }
    }
}

运行看一下效果，查询博客园：

结束语

本文综合了前面关于浏览器集成以及数据与通信部分的内容，开发了一个综合的示例——Live Search。你可以从 这里下载本文示例代码。

posted on 2008-03-15 17:40:02 by TerryLee  评论(0) 阅读(3164)

一步一步学Silverlight 2系列文章

概述

Silverlight 2 Beta 1版本发布了，无论从Runtime还是Tools都给我们带来了很多的惊喜，如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython，对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlight 2系列》文章将从Silverlight 2基础知识、数据与通信、与浏览器的交互等几个方面带您快速进入Silverlight 2开发。

下面是已经完成的文章链接。

基础知识

本部分主要讲解Silverlight 2中的基础知识，包括如何创建一个Silverlight 2应用程序，基本控件的使用，界面布局，事件处理等。

1.一步一步学Silverlight 2系列（1）：创建一个基本的Silverlight应用

2.一步一步学Silverlight 2系列（2）：基本控件

3.一步一步学Silverlight 2系列（3）：界面布局

4.一步一步学Silverlight 2系列（4）：鼠标事件处理

5.一步一步学Silverlight 2系列（5）：实现简单的拖放功能

6.一步一步学Silverlight 2系列（6）：键盘事件处理

7.一步一步学Silverlight 2系列（7）：全屏模式支持

8.一步一步学Silverlight 2系列（8）：使用样式封装控件观感

9.一步一步学Silverlight 2系列（9）：使用控件模板

10.一步一步学Silverlight 2系列（10）：使用用户控件

11.一步一步学Silverlight 2系列（11）：数据绑定

数据与通信

1.一步一步学Silverlight 2系列（12）：数据与通信之WebClient

2.一步一步学Silverlight 2系列（13）：数据与通信之WebRequest

3.一步一步学Silverlight 2系列（14）：数据与通信之WCF

4.一步一步学Silverlight 2系列（15）：数据与通信之ASMX

5.一步一步学Silverlight 2系列（16）：数据与通信之JSON

6.一步一步学Silverlight 2系列（17）：数据与通信之ADO.NET Data Services

浏览器交互

1.一步一步学Silverlight 2系列（19）：如何在Silverlight中与HTML DOM交互（上）

2.一步一步学Silverlight 2系列（20）：如何在Silverlight中与HTML DOM交互（下）

3.一步一步学Silverlight 2系列（21）：如何在Silverlight中调用JavaScript

4.一步一步学Silverlight 2系列（22）：在Silverlight中如何用JavaScript调用.NET代码

综合实例篇

1.一步一步学Silverlight 2系列（18）：综合实例之RSS阅读器

结束语

前面的22篇文章是我在博客园写的，就不再转过来了，大家通过链接看吧:)

posted on 2008-03-13 19:36:07 by TerryLee  评论(0) 阅读(3434)

初到博客堂，向大家问好

我是TerryLee，初到博客堂向大家问好！非常感谢开心大哥的邀请，让我在博客堂又有了一片自己的天地。同时我在博客园还有一个Blog，今后我将同时维护这两个地方，欢迎大家的光临与指导。
博客堂：http://blog.joycode.com/terrylee/
博客园：http://terrylee.cnblogs.com

posted on 2008-03-10 23:57:59 by TerryLee  评论(2) 阅读(1813)