WPF/E CTP Quick Start - 第十一部分：示例控件（翻译）
2006-12-21 13:27 by 老赵, 4990 visits
“超级链接”示例
下面的示例使用一个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项目。
这种做控件的方式……