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天前
|
移动开发 前端开发 HTML5
HTML5实现酷炫个人产品推广、工具推广、信息推广、个人主页、个人介绍、酷炫官网、门户网站模板源码
HTML5实现酷炫个人产品推广、工具推广、信息推广、个人主页、个人介绍、酷炫官网、门户网站模板源码
|
2天前
|
移动开发 前端开发 HTML5
HTML5 Canvas发光Loading源码
一款基于HTML5 Canvas的发光Loading加载HTML源码。Loading旋转图标是在canvas画布上绘制的,整个loading动画是发光3D的视觉效果
11 1
HTML5 Canvas发光Loading源码
|
2天前
|
Web App开发 API
通过html页面方式访问www.iximo.com的方式(原创)
通过html页面方式访问www.iximo.com的方式(原创)
13 2
|
2天前
|
移动开发 JSON 前端开发
HTML5作业(四)-----饼状图和柱状图绘制【附源码】
该实验旨在熟悉HTML5 Canvas绘制图形和表单交互。用户需输入统计数据,程序将依据数据绘制饼状图和柱状图。要求验证用户输入有效性,点击按钮可切换图表类型,图上需显示数据标注。提供的代码包含一个表单用于输入JSON数据,两个绘制函数(drawPieChart、drawBarChart)用于生成饼状图和柱状图,以及输入验证和颜色生成辅助函数。
|
10天前
|
移动开发 HTML5
高大上HTML5引导页源码 动态效果更好看
高大上HTML5引导页源码 动态效果更好看,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,
21 0
高大上HTML5引导页源码 动态效果更好看
|
11天前
|
移动开发 前端开发 JavaScript
【专栏:HTML与CSS实战项目篇】使用HTML5与CSS3制作一个动态表单验证页面
【4月更文挑战第30天】本文介绍了使用HTML5和CSS3创建动态表单验证页面的方法。首先,简述HTML5用于构建网页内容,CSS3用于描述样式。接着,分四步展示实现过程:1) 设计包含输入框和提示信息的表单结构;2) 使用CSS3创建样式,增强视觉效果;3) 使用JavaScript监听输入事件,动态验证表单并显示错误信息;4) 测试和调试确保跨平台兼容性。通过学习,开发者能掌握创建带验证功能的表单,提升用户体验。
|
11天前
|
前端开发 测试技术 UED
【专栏:HTML 与 CSS 实战项目篇】实现一个在线产品展示页面
【4月更文挑战第30天】本文介绍了使用HTML和CSS创建吸引人的在线产品展示页面的实战步骤,包括页面设计规划、HTML结构搭建、CSS样式设计、具体页面实现、交互效果添加、优化与提升。通过简洁布局、产品列表和详情页设计,实现易用且具吸引力的展示效果。优化图片和代码,提升性能,以助企业在数字时代脱颖而出。
|
11天前
|
移动开发 HTML5
超级高大上HTML5引导页源码 动态效果更好看
超级高大上HTML5引导页源码 动态效果更好看
36 3
超级高大上HTML5引导页源码 动态效果更好看
|
12天前
横屏式个人主页HTML源码
横屏式个人主页HTML源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,
22 0
横屏式个人主页HTML源码
|
12天前
|
移动开发 HTML5
动漫渐显引导页HTML5单页源码
挺不错的动漫渐显引导页,记事本右键打开即可修改~
16 0
动漫渐显引导页HTML5单页源码