本节将讲述三个Silverlight中应用的小技巧:Silverlight页面的放大缩小、Silverlight操作Html、Html操作Silverlight控件。

一、Silverlight页面的放大缩小

        首先对于Silverlight页面的放大缩小我们可以使用ScaleTransform对Canvas控件进行设置。这样所有在该Canvas控件内的所有子控件都被放大缩小。

        下面我们看Xaml源码如下:

 

  1. <Canvas  MouseWheel="LayoutRoot_MouseWheel" Width="500" Height="450"
  2.     <Canvas.RenderTransform> 
  3.         <ScaleTransform x:Name="canvasTrans"></ScaleTransform> 
  4.     </Canvas.RenderTransform> 
  5.     <Image Name="showimg" Source="/SLBigOrSmall;component/1618591.jpg"></Image> 
  6.     <Button Width="154"  Content="Silverlight操作Html" HorizontalAlignment="Right" 
  7.             Height="40" Canvas.Left="6" Canvas.Top="400" Click="Button_Click" /> 
  8. </Canvas> 

        然后Xaml.cs代码如下:

 

  1. #region 放大缩小元素 
  2.  
  3. private void LayoutRoot_MouseWheel(object sender, MouseWheelEventArgs e) 
  4.     // e.Delta滚动一个齿轮为120,向前为正,向后为负所以120/1200,让增量变到正负0.1 
  5.     double delta = e.Delta / 1200.0; 
  6.     canvasTrans.ScaleX += delta; 
  7.     canvasTrans.ScaleY += delta; 
  8.  
  9. #endregion 

二、Silverlight操作Html控件

        在这里我们使用Silverlight中的按钮,通过HtmlElement类操作Html中的ID为Text1的input控件的Value属性值。

        Html代码如下:

 

  1. <input id="Text1" type="text" /> 

        Xaml.cs代码如下:

 

  1. #region Silverlight操作Html元素 
  2.  
  3. private void Button_Click(object sender, RoutedEventArgs e) 
  4.     HtmlElement htmlElem = HtmlPage.Document.GetElementById("Text1"); 
  5.     htmlElem.SetAttribute("value""Silverlight操作成功Html"); 
  6.  
  7. #endregion 

三、Html操作Silverlight控件

        在这里我们通过GetElementById方法找到Html控件然后为它增加一个onchange事件,在这个事件中获取到控件的值并且设置到Silverlight控件中去。

        Html代码如下:

 

  1. <div style=" text-align:center;"> 
  2.         请选择:<select id="selectColor">    
  3.                     <option value="White">白色</option>     
  4.                     <option value="Gray">灰色</option>      
  5.                     <option value="Black">黑色</option>    
  6.                </select> 
  7. </div> 

        Silverlight的xaml.cs代码如下:

 

  1. #region Html操作Silverlight元素 
  2.  
  3. private void HtmlLinkSL() 
  4.     //获取到页面上的selectColor的Html控件 
  5.     HtmlElement htmlSelectColor = HtmlPage.Document.GetElementById("selectColor"); 
  6.     //为这个Html控件增加onchange选择变化事件 
  7.      htmlSelectColor.AttachEvent("onchange", new EventHandler<HtmlEventArgs>(htmlSelectColor_onChange));  
  8. public void htmlSelectColor_onChange(object sender, HtmlEventArgs e) 
  9. {  
  10.     HtmlElement htmlSelect=sender as HtmlElement; 
  11.     //获取到html控件选择的值,根据这个值为Html 
  12.     switch(htmlSelect.GetAttribute("value")) 
  13.     { 
  14.         case "White"
  15.             ellipse1.Fill = new SolidColorBrush(Colors.White); 
  16.             break; 
  17.         case "Gray"
  18.             ellipse1.Fill = new SolidColorBrush(Colors.Gray); 
  19.             break; 
  20.         case "Black"
  21.             ellipse1.Fill = new SolidColorBrush(Colors.Black); 
  22.             break; 
  23.         default
  24.             break; 
  25.     } 
  26.  
  27. #endregion 

        最后我们来看运行的效果如下图所示,另外如需源码请点击 SLBigOrSmall.rar 下载。