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]

Source: Internet
Author: User

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"/>

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>

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 );
Case "gray ":
Ellipse1.fill = new solidcolorbrush (colors. Gray );
Case "black ":
Ellipse1.fill = new solidcolorbrush (colors. Black );

# Endregion

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.