WPF/E CTP Quick Start - 示例控件（翻译）

          　　这片文档包含了几个例子，演示了如何使用WPF/E来创建交互式的控件。 　　这篇文档包含了如下部分：

• “超级链接”示例

• “按钮”示例

• “滚动条”示例 

• 下面该做什么呢？

  “超级链接”示例 　　下面的示例使用一个TextBlock和一个Line创建了一个超级链接。

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

重新开始隐藏内容 “按钮”示例　　下面的示例使用两个Rectangle元素和一个TextBlock创建了一个按钮。

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

重新开始隐藏内容 “滚动条”示例　　下面的示例使用了一个Line和Path创建了一个滚动条。

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

重新开始隐藏内容 下面该做什么呢？　　在下一部分“创建一个Visual Studio的WPF/E项目”中，您会了解如何在Visual Studio中创建一个WPF/E项目。