演示地址
hyperlink example
The following example creates a hyperlink from a TextBlock and a Line.
[hide XAML]
<!---->
<Canvas Width="300" Height="300"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Hyperlink -->
<Canvas Width="90" Height="30" Canvas.Left="20" Canvas.Top="20"
Background="transparent"
Cursor="Hand"
MouseEnter="hyperlink_MouseEnter"
MouseLeave="hyperlink_MouseLeave"
MouseLeftButtonDown="hyperlink_MouseLeftButtonDown">
<TextBlock Text="hyperlink" Foreground="Blue"/>
<Line Stroke="blue" StrokeThickness="1" X1="0" Y1="20" X2="65" Y2="20"
x:Name="hyperlink_line" Opacity="0"/>
</Canvas>
</Canvas>
[hide JavaScript]
<script type="text/javascript" src="samples/controls-hyperlink.js"></script>
<!---->
function hyperlink_MouseLeftButtonDown(sender, args) {
window.location = "about-frames.html";
}
function hyperlink_MouseEnter(sender,args)
{
sender.findName("hyperlink_line").opacity = 1;
}
function hyperlink_MouseLeave(sender,args)
{
sender.findName("hyperlink_line").opacity = 0;
}
<script type="text/javascript" src="samples/createcontrolsSamples.js"></script>
[hide preview] [restart]
<!---->
<script type="text/javascript">
var sl0visible = !(true);
function toggle_sl0() {
var text = "preview";
if (sl0visible) {
sl0visible = false;
var element = document.getElementById("sl0Host");
element.style.display = "none";
element = document.getElementById("sl0_restart");
element.style.display = "none";
document.getElementById("sl0_hyperlink").innerHTML = "[show "+ text + "]";
} else {
var sl0Host = document.getElementById("sl0Host");
createSamplesl0();
var element = document.getElementById("sl0Host");
element.style.display = "";
sl0visible = true;
element = document.getElementById("sl0_restart");
element.style.display = "";
document.getElementById("sl0_hyperlink").innerHTML = "[hide "+ text + "]";
}
if (window.event) {
// cancel navigation
window.event.returnValue = false;
}
}
function restart_sl0() {
createSamplesl0();
sl0visible = true;
if (window.event) {
// cancel navigation
window.event.returnValue = false;
}
}
toggle_sl0();
</script>
Note There is an alternative way to create a hyperlink that might be more convenient. See the documentation for TextDecorations property of the TextBlock object in the Silverlight SDK.
button example
The following example creates a button from two Rectangle elements and a TextBlock.
[hide XAML]
<!---->
<Canvas Width="300" Height="300"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Button -->
<Canvas
x:Name="button"
Canvas.Top="10" Canvas.Left="20"
MouseLeftButtonDown="button_MouseLeftButtonDown"
MouseLeftButtonUp="button_MouseLeftButtonUp"
MouseEnter="button_MouseEnter"
MouseLeave="button_MouseLeave">
<Canvas.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="button_transform" X="0" Y="0"/>
</TransformGroup>
</Canvas.RenderTransform>
<Rectangle Stroke="#FF000000" Fill="sc#1, 0.8123474, 0.8123474, 0.8123474"
Width="128.8" Height="56" x:Name="button_rectangle"/>
<Rectangle Stroke="sc#1, 0.912730157, 0.37122494, 0.17111966" StrokeThickness="5"
Width="126.8" Height="54" Canvas.Left="1" Canvas.Top="1"
Opacity="0"
x:Name="button_highlight"/>
<TextBlock Text="Press me!" FontSize="20" Canvas.Left="22" Canvas.Top="12"/>
</Canvas>
</Canvas>
[hide JavaScript]
<script type="text/javascript" src="samples/controls-button.js"></script>
<!---->
var mouseOver = false;
var pressed = false;
function button_MouseLeftButtonDown(sender,args) {
sender.captureMouse();
mouseOver = true;
pressed = true;
updateVisuals(sender);
}
function button_MouseLeftButtonUp(sender,args) {
sender.releaseMouseCapture();
pressed = false;
updateVisuals(sender);
if (mouseOver) {
alert("you pressed the button!");
}
}
function button_MouseEnter(sender,args) {
mouseOver = true;
updateVisuals(sender);
}
function button_MouseLeave(sender,args) {
mouseOver = false;
updateVisuals(sender);
}
function updateVisuals(sender) {
//background
if (pressed && mouseOver) {
sender.findName("button_rectangle").fill = "sc#1, 0.548430264, 0.5354195, 0.5354195";
var transform = sender.findName("button_transform");
transform.x = 2;
transform.y = 2;
} else {
sender.findName("button_rectangle").fill = "sc#1, 0.8123474, 0.8123474, 0.8123474";
var transform = sender.findName("button_transform");
transform.x = 0;
transform.y = 0;
}
// highlight
if (mouseOver || pressed) {
sender.findName("button_highlight").opacity = 1;
} else {
sender.findName("button_highlight").opacity = 0;
}
}
[hide preview] [restart]
<!---->
<script type="text/javascript">
var sl1visible = !(true);
function toggle_sl1() {
var text = "preview";
if (sl1visible) {
sl1visible = false;
var element = document.getElementById("sl1Host");
element.style.display = "none";
element = document.getElementById("sl1_restart");
element.style.display = "none";
document.getElementById("sl1_hyperlink").innerHTML = "[show "+ text + "]";
} else {
var sl1Host = document.getElementById("sl1Host");
createSamplesl1();
var element = document.getElementById("sl1Host");
element.style.display = "";
sl1visible = true;
element = document.getElementById("sl1_restart");
element.style.display = "";
document.getElementById("sl1_hyperlink").innerHTML = "[hide "+ text + "]";
}
if (window.event) {
// cancel navigation
window.event.returnValue = false;
}
}
function restart_sl1() {
createSamplesl1();
sl1visible = true;
if (window.event) {
// cancel navigation
window.event.returnValue = false;
}
}
toggle_sl1();
</script>
slider example
The following example creates a slider from a Line and a Path.
[hide XAML]
<!---->
<Canvas Width="300" Height="300"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="slider_Loaded">
<!-- Slider -->
<Canvas x:Name="slider"
Canvas.Top="50" Canvas.Left="20" Width="200" Height="45"
Background="transparent">
<Line x:Name="slider_line"
Stroke="black" StrokeThickness="1"
X1="0" Y1="25" X2="200" Y2="25" />
<Rectangle
Fill="Transparent"
Width="200" Height="45"
MouseLeftButtonDown="slider_MouseLeftButtonDown" />
<Path x:Name="slider_thumb" Stroke="#FF000000"
Fill="sc#1, 0.548430264, 0.5354195, 0.5354195"
Data="M0,0 L11.5,0 11.5,30 5.75,40 0,30z"
MouseLeftButtonUp="slider_thumb_MouseLeftButtonUp"
MouseMove="slider_thumb_MouseMove"
MouseLeftButtonDown="slider_thumb_MouseLeftButtonDown" />
</Canvas>
</Canvas>
[hide JavaScript]
<script type="text/javascript" src="samples/controls-slider.js"></script>
<!---->
var mouseDownPosition = 0;
var mouseDownValue = -1;
var thumbCenter = 5.75;
function slider_Loaded(sender, args) {
slider_SetValue(sender, 0);
}
function slider_MouseLeftButtonDown(sender, args) {
var coordinate = args.getPosition(null).x;
var slider = sender.findName("slider");
coordinate -= slider["Canvas.Left"];
slider_SetValue(slider, coordinate - thumbCenter);
}
function slider_thumb_MouseLeftButtonDown(sender, args) {
var slider = sender.findName("slider");
sender.captureMouse();
mouseDownValue = slider_GetValue(slider);
mouseDownPosition = args.getPosition(null).x;
}
function slider_thumb_MouseLeftButtonUp(sender, args) {
var slider = sender.findName("slider");
slider.releaseMouseCapture();
mouseDownValue = -1;
}
function slider_thumb_MouseMove(sender, args) {
var slider = sender.findName("slider");
if (mouseDownValue != -1) {
var newValue = mouseDownValue + (args.getPosition(null).x - mouseDownPosition);
slider_SetValue(slider, newValue);
}
}
function slider_GetValue(sender) {
var thumb = sender.findName("slider_thumb");
return thumb["Canvas.Left"];
}
function slider_SetValue(sender, newValue) {
if (newValue > sender.width ) {
newValue = sender.width;
mouseDownValue = -1;
}
if (newValue < - thumbCenter) {
newValue = - thumbCenter;
mouseDownValue = -1;
}
var thumb = sender.findName("slider_thumb");
thumb["Canvas.Left"] = newValue;
}
[hide preview] [restart]
<!---->
<script type="text/javascript">
var sl2visible = !(true);
function toggle_sl2() {
var text = "preview";
if (sl2visible) {
sl2visible = false;
var element = document.getElementById("sl2Host");
element.style.display = "none";
element = document.getElementById("sl2_restart");
element.style.display = "none";
document.getElementById("sl2_hyperlink").innerHTML = "[show "+ text + "]";
} else {
var sl2Host = document.getElementById("sl2Host");
createSamplesl2();
var element = document.getElementById("sl2Host");
element.style.display = "";
sl2visible = true;
element = document.getElementById("sl2_restart");
element.style.display = "";
document.getElementById("sl2_hyperlink").innerHTML = "[hide "+ text + "]";
}
if (window.event) {
// cancel navigation
window.event.returnValue = false;
}
}
function restart_sl2() {
createSamplesl2();
sl2visible = true;
if (window.event) {
// cancel navigation
window.event.returnValue = false;
}
}
toggle_sl2();
</script>
Copyright © 2008 Microsoft Corporation. All rights reserved. Legal Notices.
分享到:
相关推荐
银光志 silverlight 3.0 书籍源代码银光志 silverlight 3.0 书籍源代码银光志 silverlight 3.0 书籍源代码银光志 silverlight 3.0 书籍源代码银光志 silverlight 3.0 书籍源代码银光志 silverlight 3.0 书籍源代码
《Silverlight 4 工作流WF入门代码详解》 在现代软件开发中,工作流技术扮演着重要的角色,它能够帮助我们构建出灵活、可扩展的业务流程管理系统。本篇将围绕“Silverlight 4 工作流WF入门代码”这一主题,深入探讨...
银光志 silverlight 3.0 书籍源代码银光志 silverlight 3.0 书籍源代码银光志 silverlight 3.0 书籍源代码银光志 silverlight 3.0 书籍源代码银光志 silverlight 3.0 书籍源代码
《Silverlight微软一站式示例代码库:中文版源码解析》 Silverlight,作为微软推出的一款基于.NET Framework的浏览器插件,曾广泛应用于富互联网应用(RIA)开发,尤其是在多媒体内容展示、交互式用户界面设计等...
多个Silverlight学习源代码:silverlight toolkit中的主题(theme)应用、SilverLight 桌面文件夹效果源码、Silverlight4.0 Demo 源码、Silverlight5 beta新特性源码、SilverlightDataGrid、SilverlightMVVM模式...
Silverlight 3.0 是微软推出的一个强大的富互联网应用程序(RIA)开发平台,它允许开发者创建具有丰富图形、动画和交互性的Web应用程序。这个“Silverlight 3.0 对联例子”提供了一个实际的应用场景,展示了如何在...
在IT行业中,Silverlight是一种基于.NET Framework的浏览器插件,由微软开发,主要用于创建富互联网应用程序(RIA)。这个“silverlight 数据压缩例子”是针对Silverlight应用中的数据传输优化的一个示例,它展示了...
**Silverlight(银光)**是微软开发的一种插件技术,用于在Web浏览器中呈现丰富的媒体和交互式应用程序。它提供了类似Adobe Flash的功能,但在.NET Framework的支持下,为开发者提供了更强大的编程模型和更丰富的...
Silverlight是由微软公司推出的,用于创建和展示丰富的交互式用户界面的框架,它在Web应用程序、多媒体播放和数据可视化等方面表现卓越。下面我们将围绕Silverlight实例,深入探讨其核心知识点。 1. **基础概念**:...
银光志 silverlight3.0 书中附带的各章源代码
Silverlight微软网页插件完成流媒体播放
**银光(Silverlight)入门指南** 银光(Silverlight)是微软公司推出的一种富互联网应用程序(RIA)框架,主要用于创建交互式、图形丰富的网络应用。它基于.NET Framework,使用C#作为主要编程语言,为开发者提供...
【银光(Silverlight)拖拽效果详解】 在Web应用开发中,交互性和用户体验是至关重要的因素,而拖放(Drag and Drop)功能是提升用户体验的一种常见方式。Silverlight,作为微软推出的一种富互联网应用程序(RIA)...
1. **Visual Studio**: 微软的集成开发环境(IDE),提供对Silverlight项目的完整支持,包括代码编辑、调试和项目管理。 2. **Expression Blend**: 一个专门针对设计者的工具,用于创建和编辑XAML用户界面,与...
Silverlight Toolkit是一款由微软开发并维护的开源库,它为Silverlight应用程序提供了大量的控件和功能扩展,包括各种图表、日历、进度条等,极大地丰富了开发者的工具箱。本示例主要关注的是在Silverlight中如何...
**银光(Silverlight)源码详解** **一、什么是Silverlight** Silverlight是由微软公司开发的一种基于浏览器的插件,用于创建丰富的交互式Web应用程序。它与Adobe Flash类似,但专注于提供更强大的数据绑定、图形...
Silverlight 错误代码对照 Silverlight 是一款基于 Windows Presentation Foundation(WPF)的 Rich Internet Application(RIA)框架,它提供了一个基于浏览器的富客户端应用程序开发平台。然而,在 Silverlight ...
在本资源中,“基于Silverlight实现工作流流程定义源代码及例子程序”为我们提供了一个利用Microsoft Silverlight技术来设计和执行工作流流程的实例。Silverlight是微软推出的一种富互联网应用程序(RIA)平台,它...
Silverlight 4是一款由微软开发的富互联网应用程序(RIA)技术,主要用于构建具有交互性和多媒体功能的Web应用。它在Web浏览器中运行,提供了一种跨平台、跨浏览器的编程模型,让开发者能够利用.NET Framework的强大...
SilverLight作为微软推出的一种轻量级的插件技术,为Web应用程序提供了丰富的媒体体验和交互式用户界面。在本篇文章中,我们将深入探讨一款基于SilverLight的开源图表库,它提供了多种类型的图表,包括饼状图、线状...