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项目。