蝈蝈俊.net

-- 用随笔来记录自己的技术感触
随笔 - 673, 评论 - 4434, 引用 - 276

导航

关于

记录自己的技术心得

标签

每月存档

最新留言

  • Djognbnr
    Gloomy tales <a href=" http://www.wikio.com/user/taqoeteheg/bio ">mo...
    by Djognbnr(匿名) on 2010/3/22 4:57:15
  • Mrvnkkfq
    Hello good day <a href=" http://www.wikio.com/user/useusiea/bio ">no...
    by Mrvnkkfq(匿名) on 2010/3/22 4:56:49
  • Kbsqmnei
    Best Site Good Work <a href=" http://www.wikio.com/user/taqoeteheg/bio "&am...
    by Kbsqmnei(匿名) on 2010/3/22 4:56:47
  • Nwivenmv
    perfect design thanks <a href=" http://www.wikio.com/user/akuejomyok/bio "&...
    by Nwivenmv(匿名) on 2010/3/22 4:09:54
  • Dtsgzxpv
    magic story very thanks <a href=" http://www.wikio.com/user/yfoqububojino/bio &q...
    by Dtsgzxpv(匿名) on 2010/3/22 4:09:52
  • Oqzswmxm
    Punk not dead <a href=" http://www.wikio.com/user/myraiodyhoj/bio "&gt...
    by Oqzswmxm(匿名) on 2010/3/22 4:09:51
  • Hzmgfhdb
    Very interesting tale <a href=" http://www.wikio.com/user/syqionure/bio "&a...
    by Hzmgfhdb(匿名) on 2010/3/22 2:52:22
  • Hzmgfhdb
    Very interesting tale <a href=" http://www.wikio.com/user/syqionure/bio "&a...
    by Hzmgfhdb(匿名) on 2010/3/22 2:51:43
  • Ithqlfvc
    good material thanks <a href=" http://www.wikio.com/user/ojebymuqo/bio "&am...
    by Ithqlfvc(匿名) on 2010/3/22 2:51:39
  • Rkxnwqyy
    this post is fantastic <a href=" http://www.wikio.com/user/osulugacug/bio "...
    by Rkxnwqyy(匿名) on 2010/3/22 2:51:18

广告

【第1页/共2页,18条】
首页
前页
1

动画缓冲或叫缓动函数(Animation Easing)

之前的博客我介绍过如何做一个动画,以及渐变风格动画关键帧动画。我们如果仅仅使用这些知识做一个模拟现实的动画,仍然是比较复杂的,比如:我们要实现一个篮球掉下再弹起,再掉下,再弹起的动画。或者我们要实现一个类似钟摆的动画效果,它需要我们去研究物理学,数学的知识,Silverlight 3 内置了11中Animation Easing,它可以让我们更容易的实现一些常见的动画效果。

这内置的11种Animation Easing 动画效果是:

  • 倒退缓冲(BackEase):让动画在继续之前往后退一点。这有点象在斜坡上启动汽车,会往后倒退一点然后才前进。
  • 弹跳缓冲(BounceEase):有弹回效果的动画,类似我们前面提到的篮球落下,弹起,再落下,即弹跳反冲。
  • 圆缓冲(CircleEase):创建使用循环函数加速和/或减速的动画。 基于三角函数(圆函数)来加速动画,一开始的加速度比较慢,越往后加速度越快。
  • 立方体缓冲(CubicEase):创建使用公式image  加速和/或减速的动画。 与圆缓冲类似,但是是基于立方体函数的时间来产生一个一开始加速度较慢然后越来越快的动画。
  • 伸缩缓冲(ElasticEase):创建表示弹簧在停止前来回振荡的动画。类似于弹跳缓冲(BounceEase),它会让一个值摆动直到停下为止。
  • 指数缓冲(ExponentialEase):创建使用指数公式加速和/或减速的动画。类似于圆缓冲和立方体缓冲,只是加速度的值是按照指数来变化的。
  • 乘方缓冲(PowerEase):创建使用公式 image (其中,p 等于 PowerEase.Power  属性)加速和/或减速的动画。这是一种指数缓冲,缓冲的值与时间的乘方成比例。
  • 平方缓冲(QuadraticEase):创建使用公式 image 加速和/或减速的动画。非常类似于CubicEase,除了在这个缓冲中,值是基于时间的平方。
  • 四次方缓冲(QuarticEase):创建使用公式 image 加速和/或减速的动画。类似于Cubic和Quadratic,只是值是基于时间的立方。
  • 五次方缓冲(QuinticEase):创建使用公式 image 加速和/或减速的动画。类似于Cubic、Quadratic和Quartic,值基于时间的五次方。
  • 正弦缓冲(SineEase):创建使用正弦公式加速和/或减速的动画。沿着正弦波来对值进行加速。

另外 Animation Easing 还有一个缓动模式,它是下面三个枚举之一,用于决定Animation Easing 的行为方式,参看:
http://msdn.microsoft.com/zh-cn/library/system.windows.media.animation.easingmode(VS.95).aspx

  • EasingMode.EaseIn:内插遵循与缓动函数相关联的算术公式。
  • EasingMode.EaseOut(默认值):内插遵循 100% 内插减去与缓动函数相关联的公式输出。
  • EasingMode.EaseInOut:内插将 EaseIn 用于动画的前半部分,将 EaseOut 用于动画的后半部分。

 

下面是一个经典的演示这11中动画效果的例子,例子来自: http://www.shinedraw.com/animation-effect/11-storyboard-animation-easing-demonstration/ 那里也有这个例子的源码下载:

在下面,点击每种动画对应的图标,根据选择的动画类型,持续时间就会演示这个动画。

 

参考资料:

译文:Silverlight 3.0 新功能之二 : 动画缓冲(Animation Easing)
http://www.cnblogs.com/arthur008/archive/2009/05/21/1466417.html

稳扎稳打Silverlight(37) - 3.0动画之Easing(缓动效果)
http://www.cnblogs.com/webabcd/archive/2009/08/20/1550334.html

Silverlight动画概述
http://msdn.microsoft.com/zh-cn/library/cc189019(VS.95).aspx

微软官方网站Animation Easing的例子
http://samples.msdn.microsoft.com/Silverlight/silverlight_next/Animations/easing_functions_gallery/testpage.html

Silverlight 3's New Animation Easing
http://www.wintellect.com/CS/blogs/jprosise/archive/2009/03/26/silverlight-3-s-new-animation-easing.aspx

Easing in Silverlight and WPF
http://www.kirupa.com/blend_silverlight/easing_sl_wpf_pg1.htm

Silverlight 3.0: Easing Functions
http://www.silverlightplayground.org/post/2009/03/18/Silverlight3-Easing-Functions.aspx

Silverlight 3 Quick Tip #3: Creating custom easing for Silverlight animations
http://blogs.microsoft.co.il/blogs/alex_golesh/archive/2009/03/19/silverlight-3-quick-tip-3-creating-custom-easing-for-silverlight-animations.aspx

Easing animations in Expression Blend
http://simplesilverlight.wordpress.com/2008/03/18/easing-animations-in-blend/

11 Storyboard Animation Easing Demonstration
http://www.shinedraw.com/animation-effect/11-storyboard-animation-easing-demonstration/

Easing Function In Blend 3 In Silverlight 3
http://www.c-sharpcorner.com/UploadFile/dpatra/EasingFunctionInBlend307102009134910PM/EasingFunctionInBlend3.aspx

posted on 2010-03-17 14:19:58 by ghj1976  评论(3) 阅读(1042)

Silverlight 4 RC 的安装

MIX 2010 大会上发布了 Silverlight 4 RC。 以前因为 VS2010 RC 暂时不支持 Silverlight 4,一直没有装VS2010 RC。 现在终于可以装了。

下面就是安装的一些注意事项:

首先当然是卸载之前的版本,包括下面罗列的这些卸载项,卸载一定要卸载干净才好安装:

Microsoft Expression Blend Preview for .NET 4
Microsoft Expression Blend SDK Preview for .NET 4
Mircosoft Expression Blend 3 SDK

Microsoft Silverlight 4 Tools for Visual Studio 2010 Beta 2
Microsoft Silverlight 4 Beta SDK
Mircosoft Silverlight
Mircosoft Silverlight 3 SDK

WCF RIA Services Preview for Visual Studio 2010 (这个要优先删除,否则一旦.NET Framework 4删除后,这个就没法卸载了)
Microsoft Visual Studio 2010 Ultimate Beta 2 - ENU

Microsoft .NET Framework 4 Extended Beta2
Microsoft .NET Framework 4 Client Profile Beta2
Microsoft .NET Framework 4 Multi-Targeting Pack
Microsoft .NET Services SDK(March 2009 CTP)
Microsoft ASP.NET MVC 2
Microsoft ASP.NET MVC 2 - Visual Studio 2010 Tools
Microsoft Help 3.0 Beta2
Microsoft SQL Server Compact 3.5 SP2 Beta English
Microsoft Sync Framework Runtime v1.0 SP1 Beta(x86)
Microsoft Sync Framework SDK v1.0 SP1 Beta
Microsoft Sync Framework Service v1.0 SP1 beta(x86)
Microsoft Sync Service for ADO.NET v2.0 SP1 Beta(x86)
Microsoft Team Foundation Server 2010 Beta 2 Object Model - ENU
Microsoft Visual C++ 2010 Beta 2 x86 Runtime - 10.0.21006
Microsoft Visual F# Runtime 1.0
Microsoft Visual Studio 2010 ADO.NET Entity Framework Tool Beta 2
Visual Studio 2010 Beta 2 Tools for SQL Server Compact ENU
Visual Studio 2010 Tools for Office Runtime Beta 2 (x86)
Windows Azure Tools for Microsoft Visual Studio 2010 1.0 (11/2009) Beta 2


 

 

VS2010 RC 版的安装:

下载并安装 Microsoft Visual Studio 2010
http://www.microsoft.com/downloads/details.aspx?FamilyID=457bab91-5eb2-4b36-b0f4-d6f34683c62a&displaylang=en

 

下载并安装3个VS2010 RC的补丁

这部分信息可以参看下面两篇Scott的博客
http://blog.joycode.com/scottgu/archive/2010/02/16/115889.joy
http://blog.joycode.com/scottgu/archive/2010/03/14/115909.joy

 

KB980610 (VS 2010 RC版Intellisense崩溃问题的补丁)
https://connect.microsoft.com/VisualStudio/Downloads/DownloadDetails.aspx?DownloadID=26662&wa=wsignin1.0

KB980920 (修补了工具提示调用和停留于标识符之上时崩溃问题的补丁)
https://connect.microsoft.com/VisualStudio/Downloads/DownloadDetails.aspx?DownloadID=27019

 

KB981167(修补了Web Forms设计器不能向自动生成的设计器文件中正确添加控件问题的补丁)
https://connect.microsoft.com/VisualStudio/Downloads/DownloadDetails.aspx?DownloadID=27117&wa=wsignin1.0

 

Silverlight 4 Tools for VS2010RC

下载并安装Silverlight 4 Tools for Visual Studio 2010(March 2010版)
该Tools会同时安装Silverlight Developer runtime、 SDK、 tools、 和 WCF RIA Services

Silverlight 4 Tools for Visual Studio 2010

这部分信息可以参看: http://www.silverlight.net/getstarted/silverlight-4/ 

 

Blend 4

下载并安装 Expression Blend™ 4 Beta。 这个版本才是上面版本Silverlight4可用的。
http://www.microsoft.com/downloads/details.aspx?FamilyID=6f014e07-0053-4aca-84a7-cd82f9aa989f&displaylang=en

 

一些你可能用到的支持 Silverlight 4 RC 的Toolkit

WCF RIA Services Toolkit March 2010
http://www.microsoft.com/downloads/details.aspx?FamilyID=7b43bab5-a8ff-40ed-9c84-11abb9cda559&displaylang=en

Silverlight Toolkit
http://silverlight.codeplex.com/

 

Silverlight 4 RC 的改进

Ensuring That Your Silverlight Applications Work with Silverlight 4
http://msdn.microsoft.com/en-us/library/cc645049(VS.96).aspx

Silverlight 4 RC 相对于 Beta 2 的变化
http://www.cnblogs.com/024hi/archive/2010/03/16/1686828.html

posted on 2010-03-16 13:54:06 by ghj1976  评论(2) 阅读(1610)

ASP.net 4.0 针对SEO的改进

搜索引擎优化对任何面向公众的网站来说都非常重要,ASP.net 4.0 为此就做了大量改造。这些改进包括如下:

301永久性重定向

随着时间的迁移,网站的一些页面地址会发生变化,这会导致搜索引擎收录的链接地址、用户收藏的地址失效。Response.Redirect() 就是解决这个问题的。但是Response.Redirect 有以下问题:

Response.Redirect()方法产生的是个 HTTP 302 跳转,在用户尝试访问老的URL时,会导致多余的HTTP往返。另外搜索引擎一般不会跟随多个跳转,这意味着使用一个临时转向会负面影响你的网页排名。 

我之前写过博客,介绍如何实现301跳转,“从HTTP状态 301,302,200 来看页面跳转” 那时候实现 301 跳转比较麻烦,ASP.net 4.0 为此专门增加了Response.RedirectPermanent() 方法用来解决这个问题。

简单来说,如下表所示:

HTTP状态 解释 程序代码
301 301 代表永久性转移(Permanently Moved)
即永久性重定向
Response.RedirectPermanent("test_2.aspx");
302 302 代表暂时性转移(Temporarily Moved ) Response.Redirect("test_2.aspx");

MVC 中也有类似的代码:Response.RedirectToRoute(string routeName) 和 Response.RedirectToRoutePermanent(string routeName)

Head 中的 keywords 和 description

由于搜索引擎优化作弊的原因,现在搜索引擎正在淡化这两个关键字的参考作用。比如这篇博客:“Keywords和Description--SEO高手为什么不用” 就描述了原因。但是如果可以,建议还是设置这两个关键字,ASP.net 4.0 中为方便设置这两个关键字专门做了优化,我们可以通过下面简单几行代码就可以完成动态设置:

protected void Page_Load(object sender, EventArgs e)
{
    Page.Title = "测试标题";
    Page.MetaKeywords = "测试关键字";
    Page.MetaDescription = "测试简介";
}
或者在ASPX 文件中如下写:
<%@ Page Language="C#" 
Title="测试标题"
MetaKeywords = "这是我的,关键字"
MetaDescription = "这是一个简介"
AutoEventWireup="true" 
CodeBehind="Test_2.aspx.cs" 
Inherits="WebApplication_CacheOutput.Test_2" 
%>
Scott那个例子估计是更早测试版本的,那时候是 Keywords , Description ,而不是 MetaKeywords 和 MetaDescription。

ASP.NET Web Forms也支持了URL导向

简洁、直观的URL,搜索引擎喜欢,用户也喜欢。在ASP.NET 4.0中,URL Routing既可以映射到ASP.NET MVC控制器类,也可映射到基于ASP.NET Web Forms的网页。
你甚至可以在一个项目中,混合使用含有 Web Forms 和 MVC控制器,即:使用单一一套导向规则在它们之间映射URL。
下面是一个简单的例子:
Global.asax 中注册路由规则:
void RegisterRouters(System.Web.Routing.RouteCollection routes)
{
    routes.MapPageRoute(
        "my-Test-Route",    // 路由名称--随便自己爱好起了
        "p/{key}",           // 路由规则
        "~/WebForm1.aspx"    // 该路由规则交给哪一个页面来处理
        );
    // ......  当然,你可以继续增加更多的自己的路由规则
}

void Application_Start(object sender, EventArgs e)
{
    RegisterRouters(System.Web.Routing.RouteTable.Routes);  
}
测试接受请求的页面代码,为了进行测试,我们这里接受所有参数,并显示出来,方便理解:
protected void Page_Load(object sender, EventArgs e)
{
    StringBuilder sb = new StringBuilder();
    sb.AppendLine("this.Page.RouteData.Values");
    sb.AppendLine("<br />");
    foreach (var item in this.Page.RouteData.Values)
    {
        sb.AppendFormat("{0}={1}<br />\r\n", item.Key, item.Value);
    }
    sb.AppendLine("this.Page.Request.QueryString");
    sb.AppendLine("<br />");
    foreach (var item in this.Page.Request.QueryString)
    {
        sb.AppendFormat("{0}={1}<br />\r\n", item, this.Page.Request.QueryString[item.ToString()]);
    }
    sb.AppendLine("this.Page.Request.Form");
    sb.AppendLine("<br />");
    foreach (var item in this.Page.Request.Form)
    {
        sb.AppendFormat("{0}={1}<br />\r\n", item, this.Page.Request.Form[item.ToString()]);
    }

    Response.Write(sb.ToString());
}

完成上述代码,我们就可以通过不同URL的请求测试了。

比如我们访问 http://localhost:3215/p/abc?s=1 ,测试的结果就是:

this.Page.RouteData.Values
key=abc
this.Page.Request.QueryString
s=1
this.Page.Request.Form

 

参考资料:

VS 2010 和 .NET 4.0 系列之《ASP.NET 4 中的SEO改进 》篇
http://blog.joycode.com/scottgu/archive/2010/01/06/115842.joy

.NET 4的新特性:图表、SEO及可扩展的输出缓存
http://www.infoq.com/cn/news/2010/02/.NET-4-Charts-SEO-Cache

Asp.Net4.0/VS2010新变化(4):SEO的改进
http://www.cnblogs.com/yjmyzz/archive/2010/03/05/1679235.html

Asp.Net4.0/VS2010新变化(3):webform中也可以直接url路由
http://www.cnblogs.com/yjmyzz/archive/2010/03/05/1679140.html

posted on 2010-03-15 14:42:27 by ghj1976  评论(0) 阅读(1482)

Silverlight 资源的使用

我们在Silverlight 项目中,新加一个文件,比如一个图片文件,这个文件的属性会有下面2个选项,这两个选项决定了这个图片资源如何存储,如何使用。

先说简单的,资源文件的 Copy to OutPut Directory 属性, 这个属性有如下三个选项:

image

他们都是在程序编译或者部署时,判断此资源文件是否要同步用的。

Do not copy 不做数据同步
Copy always 每次都会被同步过去
Copy if newer 当有新版本存在时,才会被同步过去

 

Build Action 属性则复杂多了, 下面是VS2010中, Silverlight 4 项目资源文件的Build Action 属性截图。

image

注意,上面罗列了一些不适合资源文件的 Build Action 属性,在使用资源文件时,可以忽略这些。

 

None 资源既不会被集成到程序集内,也不会打包到xap包中。不过我们可以通过设置CopyToOutputDirectory选项让其自动拷贝到xap包所在目录。
这种情况下, 访问这个图片的相对Uri需要以"/"开始。

适用场景:

在大多数情况下,我们希望把video/audio文件放到xap的外面,因为这种文件一般都比较大,会影响silverlight应用的加载,而且一般的视频音频文件都是压缩格式的,放到xap中也不会起到减少他们文件大小的作用。
类似图片视频这种资源文件生成操作为None时和他们没有被添加到项目里是一样的,都可以用绝对Uri进行引用。

Compile 不适合用于资源文件。
类文件要用"Compile"生成操作, 就是指项目里.cs或.vb文件。
Content 资源会被打包在Xap包里面。
这种情况下, 访问这个图片的相对Uri需要以"/"开始。
在这种方式下,如果没有在xap中找到图片文件,那么silverlight会自动从当前xap应用所在的文件夹下来找所需图片文件,
如果还没有找到那么就触发ImageFailed事件,
这种方式比较适合在多个程序集引用相同文件时采用。
Embedded Resource

这种方式会把文件嵌入到程序集中,silverlight无法通过Uri引用在xaml和c#里对这个文件进行使用,微软不建议在silverlight采用这种方式在程序集里嵌入资源。
如果有这种需求可以用
Reflection.Assembly.GetExecutingAssembly().GetManifestResourceStream(string path)相关的方法得到文件的stream引用。

ApplicationDefinition

silverlight程序的入口xaml文件(默认就是App.xaml)应该设置为这个"应用定义"。其他文件都不适合用这个。

Page 不适合用于资源文件。
所有的用户控件, 页面和子窗体(usercontrol/page/childwindow)的xaml文件应该采用的生成操作。
如果改为别的方式那么会导致后台对应的代码文件无法链接到这个xaml文件。 采用"Page" build action时xaml里的错误会导致工程无法正确生成。
CodeAnalysisDictionary 代码分析使用,Silverlight中可以忽略
Resource 资源会被打包在程序集内部。
选择这种生成方式后,该资源文件会被嵌入到该应用的程序集中,就是说打开生成的xap是看不到这个文件的。

可以用相对于当前的XAML文件的相对Uri访问,
如<Image Source="silverlight.png" />
或是<Image Source="./silverlight.png" />,

在子文件夹里的可以用
<Image Source=”./images/sl.jpg” />访问到。

最保险的方式是采用特有的程序集资源URI访问,格式为
<Image Source="/{assemblyShortName};component/Foo.jpg"/>,

这种方式还可以引用到xap中的其他程序集中的图片。

这种生成方式的系统资源可以直接用Application.GetResourceStream(uri).Stream在代码里来得到。

SplashScreen

"SplashScreen"是这个选项是WPF的启动画面使用的。  silverlight启动加载画面是用的其他方式实现的, 所以在silverlight里不要用这个方式。

EntityDeploy 这个是EntityFramework采用的生成方式, 在silverlight里是没用。

 

参考资料:

分析silverlight里的URI引用资源文件的各种情况
http://bbs.blueidea.com/viewthread.php?tid=2941697

Silverlight图片相对路径的设置
http://www.cnblogs.com/yangfan/archive/2009/12/14/1623647.html

关于Silverlight资源文件(如:图片)的放置位置及其引用(相对路径)
http://www.cnblogs.com/star250/archive/2009/10/15/1583665.html

Silverlight资源文件
http://msdn.microsoft.com/zh-cn/library/cc296240(VS.95).aspx

图片等资源的引用路径问题
http://www.cnblogs.com/kevinyang/archive/2008/11/16/1334712.html

posted on 2010-03-08 10:24:21 by ghj1976  评论(0) 阅读(1475)

我眼中的VS2010

VS2010正式版马上就要发布了,从09年国庆节后开始使用VS2010 Beta2测试版,到现在也已4个月了,VS2010的的变化很大,但是给我带来比较大影响的反而是几个小的功能变革。

VS2010改变了我对WPF观念

在听说VS2010是WPF开发之前,我总觉得WPF由于要实现这么多绚丽的界面,在性能上肯定损耗的不少。在之前,由于对美好界面的渴望,我也自己学习过WPF,由于公司日常工作用不到WPF,也就是写写小程序玩玩,但是能用WPF来开发VS2010,在此之前我是无论如何都没有想到的,非常吃惊,这就是我当初听到VS2010要用WPF来开发的感受。在使用VS2010这么久后,VS2010测试版虽然有时候会时不时没有响应,但是它的速度,性能,一点都不比我装在同一台机子上的VS2008差。VS2010 RC 版据说解决了那些没有响应的问题,同时速度优化了很多,由于我要用到Silverlight 4 的开发,就没装 VS2010 RC 版,VS2010的正式版确实很值得期待。网上说 VS2010 RC 版对性能的改进体验非常深刻,参看:.NET 4 RC版 发布了 这篇博客。

代码智能提示的改进

.NET Framework 的函数库越来越强大,也越来越多,不是特长常用的,函数名确实难以记住,VS2008 开发环境的智能提示是根据方法或者属性的起始字母来选择的,如下图所示:

image

VS2010中则搜索的是包含搜索词的所有函数和属性。这样如下图所示,我们搜索 edit ,不仅仅可以搜索出 EditIndex,还可以搜索出字母中间带Edit的方法,属性,事件。

image

这样,那些我们没有精确记忆的属性和方法就会出现在智能提示中,对我们的编程非常方便实用。

有关这方面的内容你可以参看: VS 2010 和 .NET 4.0 系列之《VS 2010代码智能提示的改进》篇

 

导航和查询代码的改进

当我们阅读一个代码非常膨大,而不是又不是特别熟悉它的代码结构时,如何找到并定位代码,会是一个难题。这个功能VS2010新增的功能对我们非常有用。如下图:(Ctrl+逗号)的键盘快捷键就可以打开下面的“Navigate To(导航到)”对话框。在Search terms 中我们输入2个关键字:“cache action”,就可以搜索出包含这两个关键字的方法,类,属性,事件。这跟上面的智能提示一样,是包含,而不是以某个字开头。

image_thumb_7E22DE68

有关这方面的内容你可以参看: VS 2010 和 .NET 4.0 系列之《在VS 2010中查询和导航代码》篇

 

鼠标滚轮滚动,对应字体大小的变化

这个功能对演示代码非常有帮助,比如公司内部,我在给大家演示一些代码时,由于现在的屏幕分辨率越来越大,我又习惯用最大的分辨率,这样稍稍离我远点的,就看不清楚编辑器的内容,以前我是在演示时,修改VS开发环境编辑器的默认字体大小,不演示了,再改回去,现在我不需要反复的改来改去,直接用鼠标中键滚轮来回滚动,就可以轻松实现字体的放大和缩小,非常实用,非常方便,我经常使用它。

使编程更容易;让我们对WPF更有信心。这就是我对VS2010的感觉。

posted on 2010-03-08 09:21:03 by ghj1976  评论(0) 阅读(1889)

Silverlight学习笔记--文字对象

文本的处理

TextBlock 是 Silverlight 中的一个常用又有用的控件。我们可以通过TextBlock呈现只读的文本。

下面是演示代码

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="SilverlightStudy.MainPage"
	Width="640" Height="480">
  <TextBlock FontFamily="Arial Black" FontSize="16"
    Foreground="Red" Width="500">
	欢迎
         <Run FontSize="34" FontStyle="Italic" Foreground="Blue"></Run>
        <Run FontSize="22" FontStretch="ExtraCondensed">来到</Run>
        <Run>这里!</Run>
	<LineBreak />
	<Bold>哈哈哈哈</Bold>
	<Italic>我是谁?</Italic>
	<Underline>太阳出来了</Underline>
	<LineBreak />
  </TextBlock>
</UserControl>

演示效果:

image

其中一些属性如下:

FontFamily: Silverlight内置了十几种常见拉丁字体,如Arial,Comic Sans MS,Courier New,Lucida Sans Unicode等。默认使用的字体是 Portable User Interface。这是一种复合字体,它使用若干字体来实现 Silverlight 所支持的一组国际语言。这些字体包括针对许多西方书写系统的"Lucida Sans Unicode"和"Lucida Grande",以及针对东亚书写系统的更多字体。Silverlight 会根据文字的语言选择最佳的字体。

如果您指定的 FontFamily 不存在,即使它是唯一可用的字体系列值,Silverlight 仍将为 Portable User Interface 值提供备用值以用于呈现。

上面例子中,我把字体设置成 Arial Black,由于其中的中文无法找到对应字体,就使用了 Portable User Interface  来显示的。由于是中文,上述文字就是用宋体的样式来显示的。

如果我们直接把字体修改为其他中文字体,比如: 微软雅黑, 程序就会报警告:

The font, 微软雅黑, is not a built-in Silverlight font and will not be displayed to users who run your Silverlight application.  To display the font, either install the font on your computer and then use Expression Blend to embed the font in your project, or add the font files to your project.   

如何解决这个问题以及关于字体的更多信息,你可以看下面几篇文章: 
文本和字体: http://msdn.microsoft.com/zh-cn/library/cc189010(VS.95).aspx 

解决Silverlight引用中文字体的问题

http://blog.joycode.com/joy/archive/2007/05/28/103441.aspx

Silverlight Tip of the Day #46 – Font Support in Silverlight

FontSize:指定所需字体大小(以像素为单位)。值必须为非负数。 默认值为 11 像素。

FontStretch: 指定所需的字体标志符号宽度。

默认值为 Normal。FontStretch 的效果依赖于正使用的特定字体系列,并且只能指定字体系列中已经存在的字体。该属性不会导致以编程方式拉伸标志符号。(注意:如果 FontStretch 映射不可用,您可以考虑将某一变换应用于文本。)

压缩或者拉长的比率请参看下面文档

http://msdn.microsoft.com/zh-cn/library/system.windows.fontstretches(VS.95).aspx

FontStyle: 指定所需字形为普通还是斜体。
可设置两种值: Normal, Italic(斜体)。默认值为 Normal。FontWeight 的效果依赖于正使用的特定字体系列,并且通常只能指定字体系列中已经存在的字体。Silverlight 不以编程方式创建修剪变形来模拟斜体。

FontWeight: 指定所需的字体标志符号粗细。即:文字的胖瘦。可设置为Thin, ExtraLight, Light, Normal, Medium, SemiBold, Bold, ExtraBold, Black, ExtraBlack.这些值是否起作用还要取决于你所选择的字体。默认值为 Normal。

FontWeight 的效果依赖于正使用的特定字体系列,并且通常只能指定字体系列中已经存在的字体。修剪不会以编程方式创建备用粗细值,除非字体系列中包含普通粗细字体,而不包含粗体字体。在这种情况下,Silverlight 将通过增加使用二维图形算法的笔画宽度来模拟粗体字体。

TextDecorations: 对文字的修饰,默认设置为无修饰。若要指定下划线修饰,请将 TextDecorations 属性设置为 Underline。

Foreground:  通过这个属性可以设置文字的前景色填充。不但可以使用颜色值,还可以通过设置solid color, gradient, image 及 video笔刷进行填充。

比如下面代码就是使用的图片做的文字前景刷子

<TextBlock Text="SHRUBBERY">
  <TextBlock.Foreground>
    <ImageBrush ImageSource="forest.jpg"/>
  </TextBlock.Foreground>
</TextBlock>

执行效果:

image

Run:   你可以在TextBlock中使用Run标签创建内联元素,每个Run都可以设置上面提到的属性。这样一篇文档,就可以每处显示的风格都不一样。

 

参考资料:

了解Silverlight提供的TextBlock(文字区块)元素对象
http://silverlight.cn/node/356

[Silverlight]TextBlock控件全攻略
http://www.cnblogs.com/024hi/archive/2008/12/04/1347337.html

文本和字体
http://msdn.microsoft.com/zh-cn/library/cc189010(VS.95).aspx

WPF4数据绑定应用之创建具有多种显示效果的字串
http://www.cnblogs.com/bitfan/archive/2009/11/12/1601857.html

posted on 2009-12-04 14:08:23 by ghj1976  评论(0) 阅读(2311)

SilverLight 4.0.41108.0 Beta 的bug

如下Xaml文件, 在 Silverlight 4 中会报错。

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="SilverlightStudy.MainPage"
	Width="640" Height="480">
    <TextBlock>
	<Hyperlink NavigateUri="http://www.msn.com" >MSN Home</Hyperlink>
    </TextBlock>
</UserControl>

错误信息:

Hyperlink 不支持将 nothing 作为内容。 [Line: 7 Position: 66]

在 Microsoft Expression Blend Preview for .NET 4 中,我们会看到错误信息:

image

参考资料:

Hyperlink should be able to be inserted in a textblock
http://connect.microsoft.com/VisualStudio/feedback/ViewFeedback.aspx?FeedbackID=511958

Bugs fixed (or not) in Silverlight 4 Beta
http://www.olsonsoft.com/blogs/stefanolson/post/Bugs-fixed-(or-not)-in-Silverlight-4-Beta.aspx

posted on 2009-12-03 13:43:14 by ghj1976  评论(0) 阅读(2616)

.Net Framework Client Profile 和 .Net Framework

.NET Framework Client Profile是.NET Framework的裁剪版本。它面向客户端应用程序。它提供 Windows Presentation Foundation (WPF)、Windows 窗体、Windows Communication Foundation (WCF) 和 ClickOnce 功能的简化子集。这可以为面向 .NET Framework Client Profile 的 WPF、Windows 窗体、WCF 和控制台应用程序实现快速部署方案。

参看:http://msdn.microsoft.com/zh-cn/library/cc656912.aspx 

在VS2010 中, 你默认建立的 WPF 程序就是 .Net Framework 4 Client Profile ,而不是 .Net Framework 4。昨天下午到今天早上, 我在为 System.Web 无法引用而苦恼的问题,就是它导致的。

 

VS2010中,我们在项目的属性下,可以看到项目有以下多种 Target framework 属性。

image

我今天碰到的 Sytem.Web 引用问题如下:

在用 VS2010 Beta2 书写一个WPF应用的时候,要使用 System.Web.HttpUtility.UrlEncode() 方法时,发现竟然无法增加对 System.Web 的引用。如下图:

.NET Reference 中没有 System.Web 组件。

image

 

使用 Browse 方式打开指定目录的文件 C:\Windows\Microsoft.NET\Framework\v4.0.21006\System.Web.dll  也不行。

如下图:

 

image

GAC 中也没有 4.0 版本的 System.Web 组件,如下图:

image

强制添加 C:\Windows\Microsoft.NET\Framework\v4.0.21006\System.Web.dll   到GAC 时会报错误:

---------------------------
Cannot Add Assembly
---------------------------
Unable to add the selected assembly.  The assembly must have a strong name (name, version and public key).
---------------------------
确定  
---------------------------

这个文件的信息如下:

image

但是VS2010 Beta2 建立的 Web 项目, 默认就有 System.Web 的引用, 这里没有任何问题,如下图:

image

查看这时候的 System.Web 属性,如下:

image

 

把 C:\Program Files\Reference Assemblies\Microsoft\Framework\.NETFramework\v4.0\System.Web.dll 放入 GAC也 会报错误:

---------------------------
Cannot Add Assembly
---------------------------
Unable to add the selected assembly.  The assembly must have a strong name (name, version and public key).
---------------------------
确定  
---------------------------

WPF程序 单独指向这个文件的引用, 也是跟上面的情况一样。也报错。

上面我碰到的这个问题,只需要简单的把项目的 Target framework  修改为 .Net Framework 4 就搞定了。

posted on 2009-12-02 11:05:26 by ghj1976  评论(2) 阅读(2763)

Silverlight学习笔记--通用绘图属性

不透明度属性(Opacity)

Opacity属性用于指定刷子的不透明度。
Opacity 属性的值以 0.0 和 1.0 之间的值表示。默认情况下元素的 Opacity 属性为 1.0。
如果 Opacity 值为 0,则表示画笔完全透明;如果值为 1,则表示画笔完全不透明。
如果值为 0.5,则表示画笔的不透明度为 50%;如果值为 0.725,则表示画笔的不透明度为 72.5%,
依此类推。小于 0 的值将被视为 0,而大于 1 的值将被视为 1。

如下图的代码所示:

<Canvas>
  <Rectangle Height="100" Width="150" Canvas.Left="30" Canvas.Top="30"
      Stroke="Black" StrokeThickness="1" Fill="SkyBlue">
  </Rectangle>
  <Rectangle Height="100" Width="150" Canvas.Left="100" Canvas.Top="50"
      Stroke="Black" StrokeThickness="1" Fill="SkyBlue" Opacity="0.5">
  </Rectangle>
</Canvas>
演示效果为:
image 
左上角矩形不透明度为默认的1,右下角矩形的不透明度为50%,所以重叠部分可以看到左上角的矩形。
 
透明蒙板(OpacityMask)
有时候,我们对透明度的要求更复杂,并不是希望整个图像都是一个固定的不透明度,这时候就要用到半透明蒙板了。

如下图所示: 我们对一副荷花图片使用不透明蒙板,就可以让荷花图片出现部分区域显示,部分区域不显示的效果。

image

一段演示Xaml代码如下:

<Canvas>
  <Rectangle Height="100" Width="150" Canvas.Left="30" Canvas.Top="30"
      Stroke="Azure" StrokeThickness="1" Fill="SeaGreen">
	  <Rectangle.OpacityMask>
	  	<LinearGradientBrush>
			<GradientStop Offset="0.56" Color="#00000000" />
			<GradientStop Offset="0.25" Color="#FF000000" />
		</LinearGradientBrush>
	  </Rectangle.OpacityMask>
  </Rectangle>
</Canvas>

演示效果如下图:

image

这里当然也可以是可以使用 前一篇中提到的 径向渐变刷子(RadialGradientBrush)。如下面例子:

<Canvas>
  <Rectangle Height="100" Width="150" Canvas.Left="30" Canvas.Top="30"
      Stroke="Azure" StrokeThickness="1" Fill="SeaGreen">
	  <Rectangle.OpacityMask>
		  <RadialGradientBrush GradientOrigin="0.7,0.5" Center="0.5,0.5" 
      			RadiusX="0.5" RadiusY="0.4">
      			<GradientStop Color="#00000000" Offset="0" />
      			<GradientStop Color="#FF000000" Offset="1" />
	    </RadialGradientBrush>
	  </Rectangle.OpacityMask>
  </Rectangle>
</Canvas>

执行效果如下图:

image

修剪图像(Clip)

有时候我们希望把一个图像作部分修剪,比如下面一副荷花的照片,我们希望修剪成椭圆形。

image (没有经过剪切的图像)

image (带有椭圆型的剪辑区域的图像)

它的剪切代码如下:

<Image 
  Source="sampleImages\Waterlilies.jpg" 
  Width="200" Height="150" HorizontalAlignment="Left">
  <Image.Clip>
    <EllipseGeometry
      RadiusX="100"
      RadiusY="75"
      Center="100,75"/>
  </Image.Clip>
</Image>

当然除了 EllipseGeometry(椭圆剪切类), 我们还可以使用其它剪切类,比如下面的 RectangleGeometry

<Canvas>
<Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30" Stroke="Black" StrokeThickness="10" Fill="SlateBlue">
<Ellipse.Clip>
<RectangleGeometry Rect="0,0,100,100"/>
</Ellipse.Clip>
</Ellipse>
</Canvas>

上述代码执行效果:

image

注意,剪切是取得两个的重叠部分。

上面代码我们可以看到是通过设置Geometry的子类来做实现剪切的, Geometry 的子类如下:

System.Object
  System.Windows.Threading.DispatcherObject
    System.Windows.DependencyObject
      System.Windows.Freezable
        System.Windows.Media.Animation.Animatable
          System.Windows.Media.Geometry
            System.Windows.Media.CombinedGeometry
            System.Windows.Media.EllipseGeometry
            System.Windows.Media.GeometryGroup
            System.Windows.Media.LineGeometry
            System.Windows.Media.PathGeometry
            System.Windows.Media.RectangleGeometry
            System.Windows.Media.StreamGeometry

 

图像变形

所有的UI元素都可以变形,包括以下几种变形:

  • 旋转变形(RotateTransform): 根据特定的角度进行物体旋转;
  • 倾斜变形(SkewTransform):根据指定的x-y刻度进行倾斜;
  • 刻度变形(ScaleTransform):根据横向和纵向进行放大和缩小;
  • 翻转变形(TranslateTransform): 水平或横向移动物体;

旋转变形(RotateTransform)

在 二维 x-y 坐标系内围绕指定点按照顺时针方向旋转对象。

演示代码:

<Canvas>
<Rectangle Height="100" Width="100" Canvas.Left="70" Canvas.Top="10" Fill="Black">
	<Rectangle.RenderTransform>
		<RotateTransform Angle="27" />
	</Rectangle.RenderTransform>
</Rectangle>
</Canvas>

演示效果:

image

倾斜变形(SkewTransform)

二维扭曲

演示代码

<Canvas>
<Rectangle Height="100" Width="100" Canvas.Left="70" Canvas.Top="10" 
Fill="Red">
	<Rectangle.RenderTransform>
		<SkewTransform AngleX="15" />
	</Rectangle.RenderTransform>
</Rectangle>
</Canvas>

演示效果

image

刻度变形(ScaleTransform)

在 二维 x-y 坐标系内缩放对象。

演示代码

<Canvas>
<Rectangle Height="100" Width="100" Canvas.Left="70" Canvas.Top="10" 
Fill="Red">
	<Rectangle.RenderTransform>
		<ScaleTransform ScaleX="1.3" ScaleY=".5" />
	</Rectangle.RenderTransform>
</Rectangle>
</Canvas>

演示效果

image

翻转变形(TranslateTransform)

在 二维 x-y 坐标系中平移(移动)对象。

演示代码

<Canvas>
<Rectangle Height="50" Width="50" 
  Fill="#CCCCCCFF" Stroke="Blue" StrokeThickness="2"
  Canvas.Left="100" Canvas.Top="100">
  <Rectangle.RenderTransform>
    <TranslateTransform X="50" Y="50" />
  </Rectangle.RenderTransform>
</Rectangle>
</Canvas>
由于是位移,演示效果截图会不明显,就不提供演示效果图了。

 

组合应用

我们当然可以把上面的变形组合应用,比如下面的例子

演示代码

<Canvas>
<Rectangle Height="100" Width="100" Canvas.Left="70" Canvas.Top="10" 
Fill="Green">
	<Rectangle.RenderTransform>
		<TransformGroup>
		<RotateTransform Angle="45" />
		<ScaleTransform ScaleX=".5" ScaleY="1.2" />
		<SkewTransform AngleX="30"/>
		</TransformGroup>
	</Rectangle.RenderTransform>
</Rectangle>
</Canvas>

演示效果

image

posted on 2009-11-30 17:14:36 by ghj1976  评论(1) 阅读(2117)

Silverlight学习笔记--绘制与着色(下)

下面是刷子的一些内容:

纯色刷子(SolidColorBrush)

Silverlight中使用纯色刷子可以有多种方式如下,

<object property="predefinedColor"/>
- or -
<object property="#rgb"/>
- or -
<object property="#argb"/>
- or -
<object property="#rrggbb"/>
- or -
<object property="#aarrggbb"/>
- or -
<object property="sc# scA,scR,scG,scB"/>

分别代表的意思如下:

predefinedColor   Colors 类预定义的颜色之一。

rgb     一个三位数的十六进制数字。第一位数指定颜色的 R 值,第二位数指定 G 值,第三位数指定 B 值。例如 00F。

argb   一个四位数的十六进制数字。第一位数指定颜色的 A 值,第二位数指定其 R 值,下一位数指定 G 值,最后一位数指定其 B 值。例如 F00F。

rrggbb   一个六位数的十六进制数字。前两位数指定颜色的 R 值,下两位数指定其 G 值,最后两位数指定其 B 值。例如 0000FF。

aarrggbb   一个八位数的十六进制数字。前两位数指定颜色的 A 值,下两位数指定其 R 值,接下来的两位指定其 G 值,最后两位数指定其 B 值。例如 FF0000FF。

scA   System.Single   颜色的 ScA 值。

scR   System.Single   颜色的 ScR 值。

scG   System.Single   颜色的 ScG 值。

scB   System.Single   颜色的 ScB 值。

演示代码如下:

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="SilverlightStudy.MainPage"
	Width="640" Height="480">
<Canvas>
  <Ellipse Height="90" Width="90" Canvas.Left="10" Canvas.Top="10" Fill="black"/>

  <Ellipse Height="90" Width="90" Canvas.Left="110" Canvas.Top="10" Fill="#000000"/>

  <Ellipse Height="90" Width="90" Canvas.Left="210" Canvas.Top="10" Fill="#000" />

  <Ellipse Height="90" Width="90" Canvas.Left="310" Canvas.Top="10" Fill="sc# 0.0 0.0 1.0" />

  <Ellipse Height="90" Width="90" Canvas.Left="10" Canvas.Top="110" Fill="#ff000000"/>

  <Ellipse Height="90" Width="90" Canvas.Left="110" Canvas.Top="110">
    <Ellipse.Fill>
	  <SolidColorBrush Color="Black"/>
    </Ellipse.Fill>
  </Ellipse>
 
  <Ellipse Height="90" Width="90" Canvas.Left="210" Canvas.Top="110" Fill="#f000"/>
 
  </Canvas>
</UserControl>

演示效果如下:

image

需要注明的是 WPF 中支持的另外一种颜色定义方式,如下,Silverlight 是不支持的:

<!-- This rectangle fill uses the sRGB color profile and values to create a complete opaque blue. -->
  <Rectangle Width="50" Height="50"  Margin="10">
    <Rectangle.Fill>
      <SolidColorBrush Color="ContextColor 
	   file://C:/WINDOWS/system32/spool/drivers/color/sRGB%20Color%20Space%20Profile.icm
	   1.0,0.0,0.0,1.0"/>
    </Rectangle.Fill>
  </Rectangle>

线性渐变刷子(LinearGradientBrush)

默认的线性渐变是沿对角方向进行的。默认情况下,线性渐变的 StartPoint 是被绘制区域的左上角 (0,0),其 EndPoint 是被绘制区域的右下角 (1,1)。所得渐变的颜色是沿着对角方向路径插入的。如下图显示了对角方向的渐变。图中添加了一条线,用于突出显示渐变从起点到终点的插值路径。

对角线方向线性渐变的渐变轴

 

具有突出显示的渐变停止点的对角线性渐变,如下图:

线性渐变中的渐变停止点

演示代码

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="SilverlightStudy.MainPage"
	Width="640" Height="480">
<Canvas>

  <!-- 水平渐变 //-->
  <Rectangle Width="140" Height="70" Canvas.Left="155" Canvas.Top="10">
    <Rectangle.Fill>
      <LinearGradientBrush  StartPoint="0,0" EndPoint="1,0">
        <GradientStop Color="Red" Offset="0.0" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
      </LinearGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
  <!-- 垂直渐变 //-->
 <Rectangle Width="140" Height="70" Canvas.Left="300" Canvas.Top="10">
    <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
        <GradientStop Color="Blue" Offset="0.0" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
      </LinearGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
  
  <!-- 具有突出显示的渐变停止点的对角线性渐变 //-->
 <Rectangle Width="140" Height="70" Canvas.Left="450" Canvas.Top="10">
    <Rectangle.Fill>
      <LinearGradientBrush>
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
      </LinearGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
  
  </Canvas>
</UserControl>

执行效果

image

其中的一些属性说明

Offset 渐变停止点在渐变向量中的位置。值 0.0 指定停止点位于渐变向量的开始处;而值 1.0 指定停止点位于渐变向量的末尾处。如果没有设置这个值,则默认是0.0。

 

径向渐变刷子(RadialGradientBrush)

焦点定义渐变的开始,而圆定义渐变的终点。

范例代码:

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <RadialGradientBrush 
      GradientOrigin="0.5,0.5" Center="0.5,0.5" 
      RadiusX="0.5" RadiusY="0.5">
      <GradientStop Color="Yellow" Offset="0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1" />
    </RadialGradientBrush>
  </Rectangle.Fill>
</Rectangle>
效果图如下:

径向渐变中的渐变停止点

其中一些属性的意思如下

GradientOrigin : 定义渐变开始的二维焦点的位置。(下面演示图中的红点),可以在径向渐变最外面的圆外面,渐变的二维焦点的位置。默认值为 (0.5, 0.5)。

Center :径向渐变最外面的圆的圆心,渐变圆的默认中心点位置是 (0.5, 0.5)。

RadiusX:径向渐变最外面的圆的水平半径,默认值为 0.5。

RadiusY:径向渐变最外面的圆的垂直半径,默认值为 0.5。

注意,上面坐标系是相对于边界框的:0 表示边界框的 0%,1 表示边界框的 100%。可以通过将 MappingMode 属性设置为值 Absolute 来更改此坐标系。绝对坐标系不是相对于边界框的。值直接在本地坐标系中解释。

我们可以看下面的例子来理解具有不同 GradientOrigin、Center、RadiusX 和 RadiusY 设置的 RadialGradientBrush。

RadialGradientBrush 设置

 

图像绘制刷子(ImageBrush)

实例代码:

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="SilverlightStudy.MainPage"
	Width="640" Height="480">
<Canvas>
  <Rectangle Height="180" Width="90" Canvas.Left="110" Canvas.Top="36"
      Stroke="Bisque" StrokeThickness="1">
    <Rectangle.Fill>
      <ImageBrush ImageSource="7116_2004321149418456.jpg" Stretch="Uniform"/>
    </Rectangle.Fill>
  </Rectangle>
  </Canvas>
</UserControl>

效果如下:这里的原始图片是一个380*486 的大尺寸图片。

image

 

其中的 Stretch 属性用于控制图像的拉伸、对齐和平铺方式。默认值为 Fill。

Stretch 属性可以设置为以下几种值:

  • None:内容不拉伸以填充图块。
  • Uniform:内容进行缩放,以适合图块尺寸。但保留该内容的纵横比。
  • UniformToFill:对内容进行缩放,从而可以完全填充输出区域,但保持其原始纵横比。
  • Fill:内容进行缩放,以适合图块。由于内容的高度和宽度独立进行缩放,因此可能不会保持该内容的原始纵横比。也就是说,为了完全填充输出区域,内容可能会失真。

下面的图像阐释了不同的 Stretch 设置。

image

 

参考资料:

Color 结构
http://msdn.microsoft.com/zh-cn/library/system.windows.media.color.aspx

LinearGradientBrush 类
http://msdn.microsoft.com/zh-cn/library/system.windows.media.lineargradientbrush.aspx

使用纯色和渐变进行绘制概述
http://msdn.microsoft.com/zh-cn/library/ms754083.aspx

posted on 2009-11-25 17:03:09 by ghj1976  评论(1) 阅读(2192)

【第1页/共2页,18条】
首页
前页
1

Powered by: Joycode.MVC引擎 0.5.2.0