【IT168 技术文档】
1.用Visual Studio和Silverlight 3 Tools开发环境设置图片
启动Visual Studio,并创建新的Silverlight工程
(1)在Start菜单,指向并单击Visual Studio 2008
注意:如果是首次启动需要设置开发环境,我们选择C#开发环境
(2)点击File->New->Project…
(3)在New Project对话框中Project types列表中点击Silverlight
(4)在Templates中选择Silverlight Application
(5)Name项目填写:HOL
(6)Solution Name:HOL
(7)其余为默认
接下来的过程,你会看到在项目中添加一个图片和按钮
向工程中添加图片并编辑产生3D特效和模糊滤镜,阴影滤镜特效
(1)右击HOL工程项目,选择Rebuild
(2)右击ClintBin 添加桌面图片:LAB1->Add-Pic-Silverlight Tools->Cartoon.jpg
(3)在MainPage.xaml文件中添加代码:
<Canvas Width=”1000”,Height=”1000”Background=”Black”>
<Image Source=”Cartoon.jpg”Height=”500”Width=”500”Canvas.Left=”210”Canvas.Top=”0”>
<Image.Protection>
<PlaneProjection Retation X=”50”></PlaneProjection>
</Image.Projection>
</Image>
</Canvas>
<Image Source=”Cartoon.jpg”Height=”500”Width=”500”Canvas.Left=”210”Canvas.Top=”0”>
<Image.Protection>
<PlaneProjection Retation X=”50”></PlaneProjection>
</Image.Projection>
</Image>
</Canvas>
(4)Ctrl+F5,您可以看到3D效果的图片
(5)删除<Image.Protection>
<PlaneProjection Retation X=”50”></PlaneProjection>
</Image.Projection>
添加<Image.Effect> <BlurEffect x:Name="blurEffect" Radius="100"></BlurEffect>
</Image.Effect>
</Image>
<Slider x:Name="blur" Canvas.Top="10" Canvas.Left="210" Width="500" Minimum="0" Maximum="10" Value="{Binding Radius,Mode=TwoWay,ElementName=blurEffect}"></Slider>
</Image.Projection>
添加<Image.Effect> <BlurEffect x:Name="blurEffect" Radius="100"></BlurEffect>
</Image.Effect>
</Image>
<Slider x:Name="blur" Canvas.Top="10" Canvas.Left="210" Width="500" Minimum="0" Maximum="10" Value="{Binding Radius,Mode=TwoWay,ElementName=blurEffect}"></Slider>
注意: Slider是和Image并列的控件,Slider在Image控件外定义
(6)修改Image属性:Canvas.Left=”250” Canvas.Top=”0”Height=”400”Width=”400”删除BlurEffect控件和Slider控件,添加:
<DropShadowEffect x:Name="dropShadowEffect" BlurRadius="5" Color="Blue" Direction="315" Opacity="1" ShadowDepth="5"/>
添加Slider控件:
<Slider Canvas.Top="20" Canvas.Left="250" Width="400" Minimum="0" Maximum="10" Value="{Binding BlurRadius,Mode=TwoWay,ElementName=dropShadowEffect}"></Slider>
<Slider Canvas.Top="30" Canvas.Left="250" Width="400" Minimum="0" Maximum="360" Value="{Binding Direction,Mode=TwoWay,ElementName=dropShadowEffect}"></Slider>
<Slider Canvas.Top="40" Canvas.Left="250" Width="400" Minimum="0" Maximum="1" Value="{Binding Opacity,Mode=TwoWay,ElementName=dropShadowEffect}"></Slider>
<Slider Canvas.Top="10" Canvas.Left="250" Width="400" Minimum="0" Maximum="100" Value="{Binding ShadowDepth,Mode=TwoWay,ElementName=dropShadowEffect}"></Slider>
添加Slider控件:
<Slider Canvas.Top="20" Canvas.Left="250" Width="400" Minimum="0" Maximum="10" Value="{Binding BlurRadius,Mode=TwoWay,ElementName=dropShadowEffect}"></Slider>
<Slider Canvas.Top="30" Canvas.Left="250" Width="400" Minimum="0" Maximum="360" Value="{Binding Direction,Mode=TwoWay,ElementName=dropShadowEffect}"></Slider>
<Slider Canvas.Top="40" Canvas.Left="250" Width="400" Minimum="0" Maximum="1" Value="{Binding Opacity,Mode=TwoWay,ElementName=dropShadowEffect}"></Slider>
<Slider Canvas.Top="10" Canvas.Left="250" Width="400" Minimum="0" Maximum="100" Value="{Binding ShadowDepth,Mode=TwoWay,ElementName=dropShadowEffect}"></Slider>
注意:这里用不同的Slider绑定不同DropShadow特性