Wednesday, June 10, 2009
Silverlight and Xaml
<Canvas
Xmlns="http://Schemas.microsoft.com/client/2007 "
Xmlns:X="http://Schemas.microsoft.com/Winfx/2006/Xaml"
Width="640" Height="480"
Background="White">
</canvas>
Xaml Supports Shapes
- Retangle:Allows you to define a rectangular shape on the screen.
- Ellipse: Allows you to define an ellipse or circle.
- Line: Draws a line connecting two points.
- Polygon:Draws a many-Sided shape.
- Polyline:Draws many line segments.
- Path: Allows you to create a non-linear path.
PointAnimation
ColorAnimation
DoubleAnimation
Animates the value of a Double between two target values by using linear interpolation over a specified Duration.
Xaml supports Animation
- DoubleAnimation.
- ColorAnimation.
- PointAnimation.
Alternative input & Accessibility-Features Of WPF
- WPF supports digital Ink-related functionality.
- WPF Microsoft UI Automation to allow developers to create accessible interfaces.
Text-Features of WPF
- WPF includes a number of typographic and text rendering features that were not available in GDI. This is the first Windows programming interface to expose OpenType features to software developers, supporting OpenType, TrueType, and OpenType CFF (Compact Font Format) fonts.
- Support for OpenType typographic features includes:
- Ligatures Old-style numerals (for example, parts of the glyph hang below the text baseline)
- Swash variants Fractions
- Superscript and Subscript
- Small caps
- Line-level justification
- Ruby characters
- Glyph substitution
- Multiple baselines
- Contextual and Stylistic Alternates
- Kerning
WPF handles texts in Unicode, and handles texts independent of global settings, such as system locale. In addition, fallback mechanisms are provided to allow writing direction (horizontal versus vertical) handled independent of font name; building international fonts from composite fonts, using a group of single-language fonts; composite fonts embedding.
Tuesday, June 9, 2009
Documents-Features Of WPF
- WPF natively supports paginated documents. It provides the DocumentReader class, which is for reading fixed layout documents. The FlowDocumentReader class offers different view modes such as per-page or scrollable and also reflows text if the viewing area is re sized.
- Natively supports XML Page Specification documents.
- Supports reading and writing paginated documents using Open Packaging Convention.
Effects-Features Of WPF
- WPF provides for BitmapEffects, which are raster effects applied to a Visual. These raster effects are written unmanaged code and therefore force rendering of the Visual to be performed on the CPU and not hardware accelerated.
- In .NET Framework 3.5 SP1, one of the new additions was the Effect class, which is a Pixel-Shader 2.0 effect that can be applied to a visual, which allows all rendering to remain on the GPU .
Imaging-Feature Of WPF
- WPF can natively access Windows Imaging Component(WIC) code and APIs allowing developers to write image codecs for their specific image file formats.
Annotations-Features of WPF
- Annotations can be applied on a per-object basis, for objects in a Document or FlowDocument.
- WPF only provides the capability for creating, storing and managing annotations; each application must expose the UI on their own.
Data binding-Features of WPF
- WPF has a built-in set of data services to enable application developers to bind and manipulate data within applications.
- There exists support for three types of data binding:
- one time: where the client ignores updates on the server.
- one way: where the client has read-only access to data.
- two way: where client can read from and write data to the server.
- A set of built-in controls is provided as part of WPF, containing items such as button, menu, grids and list box.
- A powerful concept in the WPF is the logical separation of a control from its appearance.
- A control's template can be overridden to completely change its visual appearance.
and a control can contain any other control or layout, allowing for unprecedented control over composition. - Features retained mode graphics, so that applications do not have to be bothered with repainting the display.
Animations-Feature of Silverlight
- Time-based animation. Scene redraws are time triggered.
- Presentation timers are initialized and managed by WPF.
- Scene changes co-ordinated by using a Storyboard.
- Animations can be triggered by other external events, including user action.
- Animation effects can be defined on a per-object basis, which can be accessed directly from XAML markup.
- Ships with a set of predefined effects, such as fade out for all controls.
Media Services -Feature Of WPF
- WPF provides shape primitives for 2D graphics along with a built-in set of brushes, pens, geometries, and transforms.
- The 3D capabilities in WPF are a subset of the full feature set provided by Direct3D. However, WPF provides tighter integration with other features like user interface (UI), documents, and media. This makes it possible to have 3D UI, 3D documents, and 3D media.
- There is support for most common image formats.
- WPF supports the video formats WMV,MPEG and some AVI files by default, but since it is Windows Media Player running beneath, WPF can use all the codecs installed for it.
- WPF supports time-based animations, in contrast to the frame-based approach. This decouples the speed of the animation from how the system is performing.
Interoperability-Features Of WPF
- WPF provides interoperability with the Windows API: Via hosting, one can use Windows Presentation Foundation inside existing Win32 code, or one can use existing Win32 code inside Windows Presentation Foundation.
- Interoperability with Windows Forms is also possible through the use of the ElementHost and WindowsFormsHost classes.
Graphical Services-Feature of WPF
- All graphics, including desktop items like windows, are Direct3D applications.
This aims to provide a unified avenue for displaying graphics, as well as more advanced graphical features. - Routing the graphics through Direct3D allows Windows to offload some graphics tasks to the GPUfound on the computer's graphics card. This can reduce the workload on the computer's CPU.
- Supports vector-based graphics, which allow lossless scaling.
- Supports 3D model rendering and interaction in 2D applications.
- Interactive 2D content can be overlaid on 3D surfaces, natively.
Features of Windows Presentation Foundation
The features are:
- Graphical Services
- Interoperability
- Media Services
- Animations
- Data binding
- Annotations
- Imaging
- Effects
- Documents
- Text
Difference between FLASH and SILVERLIGHT
Flash:
- Timeline animation in Flash is frame based. It uses transformation matrix.
- Flash uses a 3rd party library to store shapes
- Flash supports multiple video formats/codec’s, however the output is proprietary
- Flash content can be created by using Adobe Flash.
- As a programming model, ActionScript has a huge learning curve and is not a common
- programming skill found in developers.
- Flash provides with 2D animation graphics.
- The cost of Media server licensing in Flash is more.
- Full screen video capabilities (720p) not available
- Flash content binary in nature.
Silverlight:
- Silverlight uses timeline (vector) based animation.
- Silverlight uses XAML.
- Silverlight uses an industry standard codec
- To create Silverlight content, you can use your existing tools like Visual Studio. Anotherdedicated tool is Expression Blend
- Silverlight has been developed from ground-up using the languages you are already familiar with as a .NET developer. Silverlight content can be created using XAML and a .NET language. This way, you can utilize your existing skills.
So does Silverlight - The cost is much lesser than Flash
- Scalable full screen video available up to HD (720p)
- Silverlight content is textual in nature
Connected to data, servers, and services
- Create mash-ups by incorporating data and services from anywhere on the Web by using Silverlight support for LINQ and LINQ-to-XML. Access data with common protocols like JSON, RSS, POX, and REST.
- Increase discoverability of RIA content that can be indexed and searched, thanks to the Silverlight text-based XAML format.
- Rapidly scale Silverlight applications by using SilverlightTM Streaming by Windows Live.
High-quality media, low-cost delivery
- Unified media format scales from high definition (HD) to mobile with Windows Media Video (WMV), the Microsoft implementation of the Society of Motion Picture and Television Engineers (SMPTE) VC-1 video standard, as well as support for Windows Media Audio (WMA) and MP3 audio.
- Add vector-based graphics and overlays to media with support for integration of graphics that scale to any size and broadcast-style overlays for tickers and closed captioning.
- Flexible ad-insertion solutions with video and animation including the ability to deliver fluid, broadcast-style video or animated advertisements without any loss of visual fidelity or motion quality.
Flexible Programming Model with Collaboration Tools
- Based on the Microsoft .NET Framework, Silverlight enables developers and designers to easily use existing skills and tools to deliver media experiences and RIAs for the Web.
- Choice of programming languages such as AJAX, Visual Basic .NET, C#, Python, and Ruby offers developers and designers the flexibility to use their existing skills without the need to learn a new language.
- Simple integration with existing Web technologies and assets means Silverlight works with any back-end Web platform or technology. No "rip and replace" required. Silverlight integrates with your existing infrastructure and applications, including Apache and PHP, as well as with JavaScript and XHTML on the client.
Compelling cross-platform user experiences-Silverlight Benefits
- Deliver media experiences and rich interactive applications (RIA) for the Web that incorporate video, animation, interactivity, and stunning user interfaces (UIs).
- Seamless, fast installation for users, thanks to a small, on-demand, easy-to-install plug-in that is under 2 megabyte (MB) in size and works with all leading browsers.
Consistent experiences on Windows and on Mac OS without any additional installation requirements. - Create richer, more compelling Web experiences that take greater advantage of the client for increased performance.
- Stunning vector-based graphics, media, text, animation, and overlays enable seamless integration of graphics and effects into any existing Web application.
Enhance existing standards/AJAX-based applications with richer graphics and media and improve their performance and capabilities by using Silverlight.
Benefits Of Silverlight
- Compelling cross-platform user experiences.
- Flexible Programming Model with Collaboration Tools
- High-quality media, low-cost delivery
- Connected to data, servers, and services
Rotate transform in a clockwise direction
<image.rendertransform>
<transformgroup>
<scaletransform/>
<skewtransform/>
<rotatetransform angle=" -45">
<translatetransform/>
</transformgroup>
</Image.RenderTransform>
</image>
Rotate transform
RenderTransformOrigin=" 0.5,0.5">
Scale Transform
<image.rendertransform>
<transformgroup>
<scaletransform scalex="2" scaley="2">
<skewtransform/>
<rotatetransform/>
<translatetransform/>
</transformgroup>
</Grid.RenderTransform>
</image>
Xaml Using Transformations
Transformations are defined in a TransformGroup block Consisting of one or more of the following :
- ScaleTransform
- SkewTransform
- RotateTransform
- TranslateTransform
The following codeshows the basic framework needed to apply transformations on an image control:
<image.rendertransform>
<transformgroup>
<scaletransform/>
<skewtransform/>
<rotatetransform/>
<translatetransform/>
</transformgroup> <image.rendertransform/>
The centre point of the translation is based off the RenderTransformOrigin property of the control and this is based on two coordinates points.To render around the centre of the control, the following code is set for that:
RenderTransformOrigin=”0.5,0.5”
ListBox
The Width and Height attributes represent the width and the height of a ListBox. The x:Name attribute represents the name of the control, which is a unique identifier of a control.
The following code snippet sets the name, height, and width of a ListBox control.
Monday, June 8, 2009
DatePicker control
- This enables you to select a date by either typing it into a text field or by using a drop-down Calendar control.
- When you type a date directly into a text field, the Text property of the DatePicker control gets set.
- This is available in the Toolbox of any Silverlight application and you can use the drag and drop approach to add it to your XAML code.
- The DateValidationError event is raised if the DatePicker cannot convert whatever you typed to a valid date.
- Normally, this causes an exception, but you can set the ThrowException property to false in an event handler and prevent an exception from being raised.
How to Create a Checkbox Control
The mouse cursor changes to a checkbox image. Position the mouse cursor to the the upper left corner of where you want to draw your new checkbox created, press the left button, and drag it to the size you want.
When you release the button, the panel editor will ask for the checkbox properties.
Notice that the status bar contains the characteristics of your new checkbox control; the status bar content is updated whenever you move the mouse cursor over any control. It's a quick way to see the basic definition of a control.
You can try out your checkbox by selecting Panel/Execute from the menu.
Calender Events
SelectedDatesChanged="MonthlyCalendar_SelectedDatesChanged"
DisplayDateChanged="MonthlyCalendar_DisplayDateChanged"
DisplayModeChanged="MonthlyCalendar_DisplayModeChanged"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="10,10,0,0">
private void MonthlyCalendar_SelectedDatesChanged(object sender, SelectionChangedEventArgs e)
{
}
private void MonthlyCalendar_DisplayDateChanged(object sender, CalendarDateChangedEventArgs e)
{
}
private void MonthlyCalendar_DisplayModeChanged(object sender, CalendarModeChangedEventArgs e){
}
Calendar Events
- DisplayDateChanged,
- DisplayModeChanged.
- SelectedDatesChanged.
Silverlight Calendar Control
Scroll Viewer Control
- This control encapsulates horizontal and vertical ScrollBar elements and a content container in order to display other visible elements in a scrollable area.
- You must build a custom object in order to use the ScrollBar element for content scrolling. However, you can use the ScrollViewer element by itself because it is a composite control that encapsulates ScrollBar functionality.
- This control responds to both mouse and keyboard commands, and defines numerous methods with which to scroll content by predetermined increments.
- You can use the ScrollChanged event to detect a change in a ScrollViewer state.
- It can only have one child, typically a Panel element that can host a Children collection of elements. The Content property defines the sole child of the ScrollViewer.
Predefined elements in Wpf Applications
- ScrollBar
- ScrollViewer.
ItemViewer
Indeterminate progress bar
Pop up message box
Drop-down list
Dropdownbox in Silverlight
Indeterminate Progressbar
How to Use the TextBox Control
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Canvas>
<TextBlock x:Name="userNameLabel" Canvas.Left="0" Canvas.Top="52" Text="User Name:" FontFamily="Arial" />
<TextBlock x:Name="passwordLabel" Canvas.Left="0" Canvas.Top="82" Text="Password:" FontFamily="Arial" />
<TextBox x:Name="userName" Canvas.Top="50" Canvas.Left="80" Width="150" MaxLength="20" TabIndex="0" />
<PasswordBox x:Name="password" Canvas.Top="80" Canvas.Left="80" Width="150" TabIndex="1" />
</Canvas>
</UserControl>
Silverlight TextArea
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
Width="400" Height="300">
<Canvas>
<liquid:TextArea x:Name="textarea" Canvas.Top="20" Canvas.Left="20" Width="250" Height="250" TabIndex="1" Text="This is a test!" />
</Canvas>
</UserControl>
How to Use the Radio Button
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Canvas>
<RadioButton Canvas.Left="100" Canvas.Top="10" Content="Option 10" GroupName="group2" />
<RadioButton Canvas.Left="100" Canvas.Top="30" Content="Option 20" GroupName="group2" />
</Canvas>
</UserControl>
How to Use the NumericUpDown Control
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
</Grid>
</UserControl>
How to Use the ListBox Control
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Canvas>
<ListBox x:Name="list" Canvas.Top="10" Canvas.Left="10" Width="200" Height="200" SelectionChanged="list_ItemSelected">
<ListBoxItem Content="Australia" />
<ListBoxItem Content="Canada" />
<ListBoxItem Content="China" />
</ListBox>
</Canvas>
</UserControl>
How to Use the Date Picker Control
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
Width="400" Height="300">
<Canvas>
<liquid:DatePickerPlus x:Name="testPicker" Canvas.Left="10" Canvas.Top="10" Width="200" />
</Canvas>
</UserControl>
How to use Checkbox in Silverlight
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Canvas>
<CheckBox x:Name="testCheckBox" Canvas.Left="10" Canvas.Top="0" Content="This is a checkbox" Click="testCheckBox_Click" />
<CheckBox x:Name="testCheckBox2" Canvas.Left="10" Canvas.Top="20" Content="This is another checkbox" />
</Canvas>
</UserControl>
How to use Calender Control
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
xmlns:extended="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
Width="400" Height="300">
<Canvas>
<extended:Calendar x:Name="testCal" Canvas.Top="10" Canvas.Left="10" />
</Canvas>
</UserControl>
Standard Controls of Silverlight
some standard controls of Silverlight is given below:
Calendar
CheckBox
Date Picker
DropDownList/ComboBox
ListBox
NumericUpDown
Radio Buttons
TextArea (Multi-line TextBox)
TextBox
Text Label
Viewer Control
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:extended="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
xmlns:liquidRichText="clr-namespace:Liquid;assembly=Liquid.RichText"
Width="800" Height="600">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="4" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<liquid:Viewer Grid.Column="0" Minimum="0.4" Maximum="5">
<liquidRichText:RichTextBlock Width="600" RichTextURL="assets/RichText.xml" />
</liquid:Viewer>
<extended:GridSplitter x:Name="grsplSplitter" Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Center" Width="4" Margin="0 2 0 2" Background="#00ffffff" />
<liquid:Viewer Grid.Column="2">
<Image Source="assets/reef.jpg" />
</liquid:Viewer>
</Grid>
</UserControl>
Sunday, June 7, 2009
File Upload
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
Width="400" Height="300">
<Canvas>
<liquid:ProgressBarPlus x:Name="progress" Canvas.Left="8" Canvas.Top="8" Width="200" Height="24" />
<Button x:Name="startUpload" Canvas.Left="80" Canvas.Top="50" Content="Upload" Width="60" Height="32" Click="StartUpload_Click" />
</Canvas>
<UserControl>
Item viewer Control
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
Width="400" Height="300">
<liquid:ItemViewer x:Name="myList" Width="400" Height="300" DoubleClick="Items_DoubleClick">
<liquid:ItemViewer.Items>
<liquid:FileItem Text="My File.pdf" OtherText="300KB" Icon="images/large/pdf.png" />
<liquid:FileItem Text="My File 2.doc" OtherText="360KB" Icon="images/large/doc.png" />
<liquid:FileItem Text="My File 3.xls" OtherText="100KB" Icon="images/large/xls.png" />
<liquid:FileItem Text="My File 4.xaml" OtherText="40KB" Icon="images/large/xaml.png" />
<liquid:FileItem Text="My File 5.jpg" OtherText="167KB" Icon="images/large/jpg.png" />
<liquid:FileItem Text="My File 6.mp3" OtherText="96KB" Icon="images/large/mp3.png" />
</liquid:ItemViewer.Items>
</liquid:ItemViewer>
</UserControl>
ProgressBar Control
<UserControl x:Class="ProgressBar.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
Width="400" Height="300">
<Canvas>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard x:Name="timer">
<DoubleAnimation x:Name="animation" BeginTime="00:00:00" Duration="00:00:0.02" Storyboard.TargetName="InvisibleRect" Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
<Rectangle Visibility="Visible" x:Name="InvisibleRect" Width="1" Height="1" />
<liquid:ProgressBarPlus x:Name="progress" Canvas.Top="0" Canvas.Left="0" Width="128" Height="16" Text="Uploading"/>
</Canvas>
</UserControl>
Popup MessageBox Control
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquidPopup="clr-namespace:Liquid;assembly=Liquid.Popup"
Width="400" Height="300">
<Canvas x:Name="LayoutRoot" Background="White">
<Button x:Name="messageboxButton" Canvas.Left="16" Canvas.Top="8" Width="250" Height="32" Content="MessageBox Dialog" Cursor="Hand" Click="MessageBox_ButtonClick" />
<liquidPopup:MessageBox x:Name="messageBoxDialog" Canvas.Left="50" Canvas.Top="50" />
</Canvas>
</UserControl>
DropDown Control in Silverlight
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
xmlns:liquidTreeView="clr-namespace:Liquid;assembly=Liquid.TreeView"
Width="400" Height="300">
Grid x:Name="LayoutRoot" Background="White">
<liquid:DropDown x:Name="dropDown" Width="100" Height="23" SelectedItemContent="Pick...">
<liquidTreeView:Tree x:Name="treeView" Width="150" Height="150" EnableLines="True" SelectionChanged="Tree_SelectionChanged">
<liquidTreeView:Node Title="Root Node">
<
<liquidTreeView:Node Title="Item 2" />
<liquidTreeView:Node Title="Item 3" />
<liquidTreeView:Node Title="Item 4" />
<liquidTreeView:Node Title="Item 5" />
</liquidTreeView:Node>
</liquidTreeView:Tree>
</liquid:DropDown>
</Grid>
</UserControl>
ColorSelector in Silverlight Controls
This Silverlight only Color Selector Control is easy to implement on your Silverlight driven website and is also customizable to provide a visual feel suitable for any site design.
<UserControl x:Class="ColorSelector.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<liquid:ColorSelector x:Name="selectColor" SelectionChanged="selectColor_SelectionChanged" />
</Grid></UserControl>