WPF/E CTP Quick Start - 第十一部分：示例控件（翻译）

<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"
MouseEnter="javascript:hyperlink_MouseEnter"
MouseLeave="javascript:hyperlink_MouseLeave"
MouseLeftButtonDown="javascript: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>

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;
}

<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="javascript:button_MouseLeftButtonDown"
MouseLeftButtonUp="javascript:button_MouseLeftButtonUp"
MouseEnter="javascript:button_MouseEnter"
MouseLeave="javascript:button_MouseLeave">
<Canvas.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="button_transform" X="0" Y="0"/>
</TransformGroup>
</Canvas.RenderTransform>
<Rectangle Width="128.8" Height="56" x:Name="button_rectangle"
Stroke="#FF000000" Fill="sc#1, 0.8123474, 0.8123474, 0.8123474"/>
<Rectangle Stroke="sc#1, 0.912730157, 0.37122494, 0.17111966"
Width="126.8" Height="54" Canvas.Left="1" Canvas.Top="1"
Opacity="0" StrokeThickness="5" x:Name="button_highlight"/>
<TextBlock Text="Press me!" FontSize="20" Canvas.Left="22" Canvas.Top="12"/>
</Canvas>
</Canvas>

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;
}
}

<Canvas Width="300" Height="300"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="javascript:slider_loaded">
<!-- Slider -->
<Canvas Canvas.Top="50" Canvas.Left="20" Width="200" Height="45"
Background="transparent" x:Name="slider"
MouseLeftButtonDown="javascript:slider_MouseLeftButtonDown">
<Line x:Name="slider_line" Stroke="black"
StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
<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="javascript:slider_thumb_MouseLeftButtonUp"
MouseMove="javascript:slider_thumb_MouseMove"
MouseLeftButtonDown="javascript:slider_thumb_MouseLeftButtonDown" />
</Canvas>
</Canvas>

var mouseDownPosition = 0;
var mouseDownValue = -1;

function slider_Loaded(sender, args) {
slider_SetValue(slider, 0);
}

function slider_MouseLeftButtonDown(sender, args) {
var coordinate = args.x;
coordinate -= sender["Canvas.Left"];
slider_SetValue(sender, coordinate);
}

function slider_thumb_MouseLeftButtonDown(sender, args) {
var slider = sender.findName("slider");
sender.captureMouse();
mouseDownValue = slider_GetValue(slider);
mouseDownPosition = args.x;
}

function slider_thumb_MouseLeftButtonUp(sender, args) {
var slider = sender.findName("slider");
sender.releaseMouseCapture();
mouseDownValue = -1;
}

function slider_thumb_MouseMove(sender, args) {
var slider = sender.findName("slider");
if (mouseDownValue != -1) {
var newValue = mouseDownValue
+ (args.x - mouseDownPosition);

slider_SetValue(slider, newValue);
}
}

function slider_GetValue(sender) {
var thumb = sender.findName("slider_thumb");
return thumb["Canvas.Left"] + .5 * thumb.width;
}

function slider_SetValue(sender, newValue) {
if (newValue > sender.width) {
newValue = sender.width;
}
if (newValue < 0) {
newValue = 0;
}
var thumb = sender.findName("slider_thumb");
thumb["Canvas.Left"] = newValue - .5 * thumb.width;
}