What is Silverlight ?

• Microsoft Silverlight is a cross-browser, cross-platform implementation of the .NET Framework for building rich interactive application (RIA) for the web and Mobile.

• Silverlight uses the eXtensible Application Markup Language (XAML) for UI Development.

• Supports managed code.

Layout And Grouping Controls:

What is Layout Control ?

• Controls that contain other controls are often referred to as layout controls.
• A layout control serves as the layout root of your app within a page.
• By default Grid control serves as the layout root With in page.
• Most of the controls derive from the Panel class.

Examples for Layout Controls:

• StackPanel

Syntax: 

<StackPanel>

.................

</StackPanel>

• Canvas

Syntax: 

<Canvas>

.................

</Canvas>

• Grid

Syntax: 

<Grid>

.................

</Grid>

Additional layout controls

• Panorama
• Pivot

The Pivot and Panorama controls derives from ItemsControl.

What is Pivot Control ?

• The Pivot control provides a quick way to manage the navigation of views within an application.

• The control can be used as a navigation interface for switching between views.

• Each view or section of the control is called the PivotItem.
• Pivot control is very similar to Tab Control, except navigation, here are two way to navigate to one page to another, you can tap page’s header or swipe (Pan or Flick) control.

PivotControl

Syntax:
 
<phone:Pivot Title="pivot"> <phone:PivotItem Header="item1"> .............. </phone:PivotItem> <phone:PivotItem Header="item2"> .................... </phone:PivotItem> </phone:Pivot>

What is Panorama Control ?

• Creates a panoramic (wide) view of items that can be panned side to side.
• The Panorama control is tab navigation control.
• Its built-in support touch and navigation, no need to implement any functionality for gestures functionality.

Panorama Control

Syntax:
 
<phone:Panoram Title="pivot"> <phone:PanoramaItem Header="item1"> .............. </phone:PanoramaItem> <phone:PanoramaItem Header="item2"> .............. </phone:PanoramaItem> </phone:Pivot>

Text Controls:

• Text control typically display string content
• Different types of text controls
• TextBlock: Use this to display simple read-only of text. Content is set with the Text property.

Syntax: 

<TextBlock Text="textblock"/>

• TextBox: Used for short text input, you can also use it for large, multi-line text input. Content is set with Text property.

Syntax: 

<TextBox Text="textbox"/>

• PasswordBox: Makes the text a user inputs. Content is set with Password property and marked with the PasswordChar property.

Syntax: 

<PasswordBox Password="textblock"/>

Button And Selection Controls:

• Button and selection controls enable the user to easily choose items or navigate through the app.
• Most of the button and selection controls are derived from ContentControl, means we added content to them with the Content property.

Button Controls :

• Button : Control that responds to user input and raises a click event. Content is set with Content property.

Syntax: 

<Button Content="button"/>

• HyperlinkButton: Represents a button control that displays a hyperlink. When clicked HyperlinkButton enables to move other page, content is set with Content property and URL to navigate to is set with NavigateUrl property.

Syntax: 

<HyperlinkButton Content="hyperlinkbutton"/>

               

Selection Controls :

• CheckBox: Represents a control that user can select or clear. A checkbox  optionally an indeterminate state. Content is set with Content property

Syntax: 

<CheckBox Content="checkbox"/>

• RadioButton: Allows a user to select a single option from list of options. When radio buttons are grouped together they are mutually exclusive. Content is set with Content property.

Syntax: 

<RadioButton Content="radiobutton"/>

• Slider: Represents a control that lets the user select from range of values along a track. The Value property sets determines the position on the track.

Syntax: 

<Slider .../>

Windows Phone Controls

Common Controls:

• ViewBox:
• The ViewBox controls is content decorate that takes one child element and stretches it or scales it to fit the size of viewbox.

Syntax:

<ViewBox Stretch=”UnifromToFill”>

<TextBlock Text=”this is viewbox control”/>

<ViewBox>

• Image Control:
• Represents a control that displays an image in the JPEG or PNG file formats.

Syntax:

<Image .../>

• RichTextBox:
• Represents a rich text control that supports formatted text, hyperlink, inline images and other rich content.

Syntax : 

<RichTextBox>

<Paragraph/>

</RichTextBox>

• WebBrowser Control:
• The WebBrowser control provides a surface for displaying HTML content. This control is now based on Internet Explorer 10.
• Navigation:
• We can navigate in webbrowser control, by using following events.
• Navigating: This event is fired when browser starts to navigate Url.This event has NavigatingEventArgs as parameters and by setting Cancel property to true we can prevent user’s navigation to certain Urls.
• Navigated : This event fired after web site has found and device successfully loads web content.
• LoadCompleted: This event is fired after all content for the site has been loaded.
• InkPresenter Control:
• This control implements a rectangular surface that displays ink strokes.
• InkPresenter is derived from Canvas and can display one or more UIElement objects and a StrokeCollection.
• If we want to contain the ink within the InkPresenter control, use the Clip property.

syntax:  

InkPrensenter x:Name=”MyIP” />