转：silverlight开发技巧—让silverlight支持输入文本框 §§与大家分享学习!

maxjimmy2008 2007-10-19 01:36:09

来源：80s team blog| 作者：ai829|

众所周知，在silverlight1.0beta中是不支持inputtext（输入文本）的，但是我们可以用另外一种方法来实现输入文本的效果。
在silverlight中文本的显示可以用到两种形式
1 textblock
2 glyphs
glyphs是个不可见元素，没法对文字进行排版，而且也不常用，因此我们这个方法就用textblock来做这个inputtext。
下面讲讲原理：
silverlight支持鼠标和键盘输入，因此我们可以利用键盘输入来获取Key的value然后吧把value赋值给textblock，这样就可以简单的实现输入文本的功能了。
下面我们来看看例子：
新建一个xaml文件，在xaml中加入一个textblock，起名叫input_txt。
然后在js里addEventListener，在EventHandle里根据key的value来给textBlock赋不同值，但是这个暂时还不支持中文，因为中文的输入不是简单的键盘事件。
代码如下：
xaml：

<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640" Height="480"
x:Name="Page"
>
<Canvas.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Canvas.Background>
<Rectangle x:Name="background" Width="640" Height="480" Stroke="#FF000000">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.519,1.273" StartPoint="0.515,-0.061">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FF5B5A5A" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Cursor="Arrow" x:Name="input_txt" Width="350" Height="20" Canvas.Left="151" Canvas.Top="132" Canvas.ZIndex="4" FontFamily="Arial" FontSize="12" Foreground="#FFFFFFFF" TextWrapping="Wrap"/>
<Rectangle x:Name="text_input_bg" Width="352" Height="22" Stroke="#FF000000" Canvas.Left="149" Canvas.Top="129" Canvas.ZIndex="3">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.528,0" StartPoint="0.526,1.45">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FF696969" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Width="113" Height="24" Canvas.Left="263" Canvas.Top="167" Canvas.ZIndex="2" FontFamily="Arial" FontSize="14" Foreground="#FFFFFFFF" TextWrapping="Wrap"><Run Text="text input solution"/></TextBlock>
</Canvas>

javascript：

if (!window.UntitledProject1)
window.UntitledProject1 = {};

UntitledProject1.Page = function()
{
}

UntitledProject1.Page.prototype =
{
handleLoad: function(control, userContext, rootElement)
{
this.control = control;

var page = rootElement.findName("Page");
page.addEventListener("KeyUp", Silverlight.createDelegate(this, this.handleKeyUp));
},
handleKeyUp: function(sender, keyEventArgs)
{
var input_txt = sender.findName("input_txt");
var keyvalue = keyEventArgs.key;
var textvalue;
switch (keyvalue)
{
case 30:
textvalue = "A";
break;
case 31:
textvalue = "B";
break;
……
default:
textvalue ="";
}
input_txt.Text += textvalue;
}
}

...全文