演示地址
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 3.0 书籍源代码银光志 silverlight 3.0 书籍源代码银光志 silverlight 3.0 书籍源代码银光志 silverlight 3.0 书籍源代码银光志 silverlight 3.0 书籍源代码
两个不错的silverlight4 的工作流WF学习源代码
silverlight微软一站式示例代码库[中文版]源码
多个Silverlight学习源代码:silverlight toolkit中的主题(theme)应用、SilverLight 桌面文件夹效果源码、Silverlight4.0 Demo 源码、Silverlight5 beta新特性源码、SilverlightDataGrid、SilverlightMVVM模式...
silverlight 数据压缩例子,可在silverlight通信的时候使用,优化数据传输 http://www.dotnetdev.cn
银光志 silverlight3.0 书中附带的各章源代码
Silverlight微软网页插件完成流媒体播放
ilverlight 银光 源码 银光源码 Silverlight. 2010 银光2010源码 银光源码
Silverlight 3.0 对联例子
silverlight4实例,代码,source
Silverlight MEF 演示源代码
silverlight 简单例子,有助于学习
silverlight入门的2个例子 hello world和SilverPaint
详细讲述了Silverlight的基础知识,更加适合初学者,本书中包含了基础知识的讲解和项目的实战
银光志(Silverlight 3.0)书籍源代码.part1 银光志(Silverlight 3.0)书籍源代码.part1
银光志(Silverlight 3.0)书籍源代码.part2 银光志(Silverlight 3.0)书籍源代码.part2
这个是silverlight4.0的学习例子,比较不错,推荐大家进行下载。
自己在学习《银光志 3.0》一书时,自认为有价值的实例,拿来和大家分享。【后续我还会继续更新,目前是前6章得内容】
Silverlight 例子,Silverlight 例子程序大全,包含所有的控件应用实例