Silverlight utility tip series: 51. Zoom-in and zoom-out of Silverlight page controls, and mutual operations between Silverlight and HTML controls [with source code instance]

This section describes three tips for using Silverlight: Zoom-in and zoom-out of Silverlight pages, HTML operations for Silverlight controls, and HTML operations for Silverlight controls.

I. Zoom in and out the Silverlight page

First, we can use scaletransform to set the canvas control to zoom in and out the Silverlight page. In this way, all child controls in the canvas control are zoomed in and out.

The source code of XAML is as follows:

<Canvas mousewheel = "layoutroot_mousewheel" width = "500" Height = "450">
<Canvas. rendertransform>
<Scaletransform X: Name = "canvastrans"> </scaletransform>
</Canvas. rendertransform>
<Image name = "showimg" Source = "/slbigorsmall; component/1618591.jpg"> </image>
<Button width = "154" content = "Silverlight operation html" horizontalalignment = "right"
Height = "40" canvas. Left = "6" canvas. Top = "400" Click = "button_click"/>
</Canvas>

Then the XAML. CS code is as follows:

# Region zoom in/out Element

Private void layoutroot_mousewheel (Object sender, mousewheeleventargs E)
{
// E. Delta rolling a gear is 120. The forward is positive, and the backward is negative so 120/1200, so that the increment is increased to positive and negative 0.1.
Double Delta = E. Delta/1200.0;
Canvastrans. scalex + = delta;
Canvastrans. scaley + = delta;
}

# Endregion

Ii. Using Silverlight to operate HTML controls

Here, we use the buttons in Silverlight to use the htmlelement class to operate the Value Attribute Value of the input control whose ID is text1 in HTML.

The HTML code is as follows:

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

The code for XAML. CS is as follows:

# Region Silverlight operate on HTML elements

Private void button_click (Object sender, routedeventargs E)
{
Htmlelement htmlelem = htmlpage. Document. getelementbyid ("text1 ");
Htmlelem. setattribute ("value", "Silverlight operation successful html ");

}
# Endregion

Iii. html-based Silverlight Control

Here, we use the getelementbyid method to find the HTML control and add an onchange event to it. In this event, we get the control value and set it to the Silverlight control.

The HTML code is as follows:

<Div style = "text-align: center;">
Select: <select id = "selectcolor">
<Option value = "white"> White </option>
<Option value = "gray"> gray </option>
<Option value = "black"> black </option>
</SELECT>
</Div>

The code for Silverlight XAML. CS is as follows:

# Region HTML operations on Silverlight Elements

Private void htmllinksl ()
{
// Obtain the selectcolor HTML control on the page
Htmlelement htmlselectcolor = htmlpage. Document. getelementbyid ("selectcolor ");
// Add onchange selection event for this HTML Control
Htmlselectcolor. attachevent ("onchange", new eventhandler }
Public void htmlselectcolor_onchange (Object sender, htmleventargs E)
{
Htmlelement htmlselect = sender as htmlelement;
// Obtain the selected value of the HTML control. The value is HTML.
Switch (htmlselect. getattribute ("value "))
{
Case "white ":
Ellipse1.fill = new solidcolorbrush (colors. White );
Break;
Case "gray ":
Ellipse1.fill = new solidcolorbrush (colors. Gray );
Break;
Case "black ":
Ellipse1.fill = new solidcolorbrush (colors. Black );
Break;
Default:
Break;
}
}

# Endregion

Finally, let's take a look at the running effect as shown in. In addition, click slbigorsmall.rar to download the source code.