Silverlight实用窍门系列:51.Silverlight页面控件的放大缩小、Silverlight和Html控件的互相操作【附带源码实例】

简介:

本节将讲述三个Silverlight中应用的小技巧:Silverlight页面的放大缩小、Silverlight操作Html、Html操作Silverlight控件。

一、Silverlight页面的放大缩小

        首先对于Silverlight页面的放大缩小我们可以使用ScaleTransform对Canvas控件进行设置。这样所有在该Canvas控件内的所有子控件都被放大缩小。

        下面我们看Xaml源码如下:

复制代码
        <Canvas  MouseWheel="LayoutRoot_MouseWheel" Width="500" Height="450">
<Canvas.RenderTransform>
<ScaleTransform x:Name="canvasTrans"></ScaleTransform>
</Canvas.RenderTransform>
<Image Name="showimg" Source="/SLBigOrSmall;component/1618591.jpg"></Image>
<Button Width="154" Content="Silverlight操作Html" HorizontalAlignment="Right"
Height
="40" Canvas.Left="6" Canvas.Top="400" Click="Button_Click" />
</Canvas>
复制代码

        然后Xaml.cs代码如下:

复制代码
        #region 放大缩小元素

private void LayoutRoot_MouseWheel(object sender, MouseWheelEventArgs e)
{
// e.Delta滚动一个齿轮为120,向前为正,向后为负所以120/1200,让增量变到正负0.1
double delta = e.Delta / 1200.0;
canvasTrans.ScaleX
+= delta;
canvasTrans.ScaleY
+= delta;
}

#endregion
复制代码

二、Silverlight操作Html控件

        在这里我们使用Silverlight中的按钮,通过HtmlElement类操作Html中的ID为Text1的input控件的Value属性值。

        Html代码如下:

<input id="Text1" type="text" />

        Xaml.cs代码如下:

复制代码
        #region Silverlight操作Html元素

private void Button_Click(object sender, RoutedEventArgs e)
{
HtmlElement htmlElem
= HtmlPage.Document.GetElementById("Text1");
htmlElem.SetAttribute(
"value", "Silverlight操作成功Html");

}
#endregion
复制代码

三、Html操作Silverlight控件

        在这里我们通过GetElementById方法找到Html控件然后为它增加一个onchange事件,在这个事件中获取到控件的值并且设置到Silverlight控件中去。

        Html代码如下:

复制代码
<div style=" text-align:center;">
请选择:
<select id="selectColor">
<option value="White">白色</option>
<option value="Gray">灰色</option>
<option value="Black">黑色</option>
</select>
</div>
复制代码

        Silverlight的xaml.cs代码如下:

复制代码
        #region Html操作Silverlight元素

private void HtmlLinkSL()
{
//获取到页面上的selectColor的Html控件
HtmlElement htmlSelectColor = HtmlPage.Document.GetElementById("selectColor");
//为这个Html控件增加onchange选择变化事件
htmlSelectColor.AttachEvent("onchange", new EventHandler<HtmlEventArgs>(htmlSelectColor_onChange));
}
public void htmlSelectColor_onChange(object sender, HtmlEventArgs e)
{
HtmlElement htmlSelect
=sender as HtmlElement;
//获取到html控件选择的值,根据这个值为Html
switch(htmlSelect.GetAttribute("value"))
{
case "White":
ellipse1.Fill
= new SolidColorBrush(Colors.White);
break;
case "Gray":
ellipse1.Fill
= new SolidColorBrush(Colors.Gray);
break;
case "Black":
ellipse1.Fill
= new SolidColorBrush(Colors.Black);
break;
default:
break;
}
}

#endregion
复制代码

        最后我们来看运行的效果如下图所示,另外如需源码请点击 SLBigOrSmall.rar 下载。 



本文转自程兴亮博客园博客,原文链接:http://www.cnblogs.com/chengxingliang/archive/2011/08/03/2124838.html,如需转载请自行联系原作者


相关文章
|
4天前
在线检测显示屏坏点html工具源码
在线检测显示屏坏点html工具源码
43 20
|
2天前
HTML在线扫雷游戏网页源码
HTML在线扫雷游戏网页源码是一款基于HTML+CSS+JavaScript开发的在线扫雷小游戏单页源码,为用户提供了一个无需安装即可在浏览器中直接玩的扫雷游戏。该游戏的源码不仅包含了完整的游戏逻辑,还具备丰富的界面设计和用户交互功能,使得玩家能够轻松上手并享受扫雷带来的乐趣。
30 22
|
5天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
77 24
|
24天前
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
71 2
|
2月前
|
移动开发 JavaScript HTML5
HTML5实现2025雪花飘新年倒计时源码
2025年即将到来,此源码页为单html纯代码,新年倒计时,背景雪花飘落效果,倒计时时间日期在JS/app.js文件第21行代码自行修改即可!
247 7
|
2月前
|
定位技术
时尚的联系我们表单HTML模板(源码)
一款时尚的联系我们表单Html模板,带地图和所在位置,输入基本信息和信息发送,看起来很漂亮的联系我们页面。
71 1
时尚的联系我们表单HTML模板(源码)
|
2月前
斗地主单机游戏HTML源码
斗地主单机游戏HTML源码,可以作为课程设计项目参考,喜欢的朋友可以拿去
44 5
|
2月前
|
前端开发
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
30 0
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
|
2月前
|
移动开发 前端开发 HTML5
HTML5 Canvas制作的粒子十秒倒计时源码
一段基于HTML5 Canvas制作的粒子爆炸,十秒数字倒计时,全屏倒计时动画效果,给人一种非常大气的视觉感
39 0
HTML5 Canvas制作的粒子十秒倒计时源码
|
2月前
渐淡背景导航页HTML源码
每五秒进行淡进淡出切换背景图,适合作为个人引导页,喜欢的朋友拿去吧。
33 2