Easily Create Your Silverlight Page With BorderControl, ToggleButtonControl & ImageControl Controls etc
There are rich controls in Silverlight projects. Though they are really easy to use as that of HTML or Frontpage, as fresher we still need to know some basic usages of them. The top-left one applies BorderControl and TextBlockControl while the bottom-left one applies ToggleControl. And the right one is made with ImageControl. In this case we’ll use VWD2008 Expression with SP1 + Silverlight 3 Tools, and we’ll step by step get these controls listed below realized in your page:
BorderControl: to create rectangle boundary with its corner can be rounded.
TextBlockControl: to add a text block.
CanvasControl: to arrange the layout.
ToggleButtonControl: to create a button with three states.
ImageControl: to show pictures in the page.
Create a blank Silverlight project, insert the codes in MainPage.xaml
Notice that the default Grid markup are placed by Canvas markup. Canvas Left is the distance from the page’s left side to the border’s left side, similarly so does the Canvas Top mean. ToolTip means that when the cursor moves to the inside of the border, a tip will show up.
Run the project, the page effect is like the following:
Then how about the ToggleButtonControl? You must have found that your media player has such a button. It can switch among three states: start, pause, and end, while most buttons are single-state or two-state. To do this, we use ToggleButtonControl. In fact the process is nearly the same as that of using Button Control, so this may be just a piece of cake to you!
Add codes below in MainPage.xml. Thus we create a ToggleButton named myButton, its original content is ”ToggleButton”. The property IsThreeState is set to be True, then the button can have three different states. If its value is False, it will be equal to a common two-state or single-state button.
ToggleButtonControl has three events: Checked, Indeterminate, and Unchecked, each presents a dependent state.
Add functions dealing with the three events above:
OK, start to run. When you move the cursor to the pink border a prompt string "It’s a pink border" shows up. When you repeatedly click the button its content just switch over between three phrases, presenting three states. See the pic below you’ll know exactly what the Canvas.Left and Canvas.Top is.
What’s more, if you want to add one pic into your page, just add the pic stored in your PC through Solution Explorer by right-click the ClientBin folder, choose to add Existing Item:
Now I have add a pic named scene.jpg.
Then follow the pic to inset the scene.jpg into the page.
Run and the final page effect will be like what the demo shows:
Demo
