Transcript
SILVERLIGHT 4.0
Agenda• Introduction• Architecture• XAML• Standard Controls• Resources and Styles• Data Binding• Templates• Custom Controls• Graphics, Transformations and Animations• UI interaction• Triggers• Hosting • Working with Services• Navigation Applications• Debugging Silverlight Applications• Unit Tests• Expression Suite• 3-rd party libraries
Day 1
• Introduction• Architecture• XAML• Standard Controls– Layout controls– Useful properties
• Exercise
Introduction
What is Silverlight ?
• Microsoft Silverlight is a cross-browser, cross-platform implementation of the .NET Framework
• It is used for creating Internet/Intranet applications with rich graphic interface and business logic executed by client
History• Until middle of 90s the most applications had
Win32/MFC style GUI• In 90s the Web started to grow• Many Web frameworks offered “Windows style”
solutions for creating “rich internet applications”:– JavaScript-based (AJAX, jQuery, Dojo, ExtJs, etc)– Flash-based– Java applets– ActiveX
• In 2002 Microsoft introduced .NET 1.0 with new API for creating WinForms application that replaced MFC
History• In .NET 3.0 Microsoft added a totally new concept
for building WinForms applications – Windows Presentation Foundation (WPF)
• Silverlight 1.0 was released shortly after .NET 3.0. It was developed under code name WPF/E – WPF everywhere
• There was a big gap between WPF 3.0/3.5 and Silverlight 1.0/2.0, but starting from Silverlight 3.0 this gap had minimized drastically and now Silverlight 4.0 pretty much comparable to WPF 4.0
Architecture
Silverlight platform
• Silverlight must by installed before first-time using by running small footprint installation (~6 MB)
• Silverlight is installed as plug-in to Internet browser
• Silverlight consists from 2 major parts:– Core presentation framework– .NET Framework for Silverlight
Silverlight platform
Compatible Operating Systems and Browsers
Application structure
• Silverlight application contains – Application assembly:
• complied application code• XAML files• Embedded resources: Images, video
– Included resources referred by URL– 3-rd party assemblies referenced by application
• Visual Studio combines all these files into application package – compressed zip file that has .xap extension
Application structure
• XAP file includes manifest file that identifies all assemblies in the package
• At minimum the application package includes assembly with your implementation of System.Windows.Application class:– Handles Startup and Exit events– Interaction with Silverlight plug-in– Resource management
Deployment
• Silverlight application is always deployed from Web server on Internet/Intranet
• Web Server must include at least:– XAP package– HTML page that embeds Silverlight plug-in
• End user just browses to HTML page and Silverlight plug-in downloads and initializes XAP package
HELLO WORLD
Application Caching
• Browsers store XAP file in browser cache in order to improve startup time
• Usually XAP file includes number of non-changed standard or 3-rd party assemblies
• Application library caching improves startup time by separating these rarely changed assemblies from main XAP to dedicated ZIPs
XAML
What is XAML
• Extensible Application Markup Language (XAML) is a declarative language based on XML
• Initializes objects and sets properties• Has hierarchical structure that defines relations
between objects• Could include code that respond to events and
manipulates objects in separate code-behind file
Example<UserControl
x:Class="MySilverlight.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Grid Background="OldLace"> </Grid> </UserControl>
XAML syntax
• XAML defines objects that are mapped into CLR types
• Attributes defined in XAML are mapped into properties of CLR type
• Examples<Button Name="CheckoutButton"/><TextBox Text="This is a Text Box"/>
Controls• WPF/Silverlight GUI is combined from hierarchy
of controls that are combined into “visual tree”• Controls are defined in XAML or in code-behind.
<UserControl> <Grid Background="OldLace">
<Border><TextBlock Text=“Text is here”/>
</Border><my:CustomControl>
<TextBlock Text=“Another Text is here”/></my:CustomControl>
</Grid> </UserControl>
Control Content Model• Most controls are designed to display certain kinds
of content• Controls could be divided to following categories
from content point of view:– No content controls
<TextBox…/> <TextBlock …/> <Rectangle …/>
– Controls that display a single element<Border><TextBlock/></Border>
– Controls that display collection of elements (layout controls)<StackPanel><TextBlock/><Border>…</Border></StackPanel>
XAML properties syntax
• Properties of objects could be defined in various ways:
• Attribute syntaxSets a value for a property by declaring an attribute on an existing object element
<TextBox Text="This is a Text Box"/>
• The string value of attribute is converted/parsed into type of underlying property
<Button Visibility=“Collapsed” /><Border Width=“50” Background=“Red”/>
XAML properties syntax
• Property element syntaxAllows to assign non-string values (objects) to property
<Button Content=“Click Me”> <Button.BorderBrush>
<LinearGradientBrush> … </LinearGradientBrush> </Button.BorderBrush> </Button>
XAML properties syntax• Collection syntax
Properties that implement IList, IDictionary or derived from Array could be defined as:
<Button Content=“Click Me”> <Button.BorderBrush>
<LinearGradientBrush> <LinearGradientBrush.GradientStops>
<GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Button.BorderBrush> </Button>
XAML properties syntax
• Content propertiesEnabled for classes that has ContentPropertyAttribute which specifies what property will get value of content
<LinearGradientBrush><GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /></LinearGradientBrush>
Attached properties
• Attached properties are owned and defined by a particular type, but set on any element
• Example<Canvas> <TextBlock Canvas.Left="10" Canvas.Top="10"
Text="Left-top corner"></TextBlock> <TextBlock Canvas.Left="170" Canvas.Top="170"
Text="Right-bottom corner"></TextBlock></Canvas>
Events
• Silverlight controls usually have various events that help for interaction with controls
• Event handling is provided as method in code-behind file
CLICK ME
Routed events
• A routed event is an event that is potentially passed on (routed) from a child object to each of its successive parent objects in the object tree
• When routed event is handled by non-owner the sender is no longer the same object as the event-raising object. For these cases, the value of the RoutedEventArgs.OriginalSource property is the object of interest
• Setting RoutedEventArgs.Handled to true stops future routing of event
Routed events• Routed events in Silverlight:
– KeyDown– KeyUp– GotFocus– LostFocus– MouseLeftButtonDown– MouseLeftButtonUp– MouseMove– MouseWheel– BindingValidationError– DragEnter– DragLeave– DragOver– Drop
XAML namespaces
• Namespaces are used for resolve ambiguities of string tokens (object names and properties)
• XAML uses XML-style namespace declaration (xmlns)
• Used for distinguish between:– Silverlight core objects from core libraries– Objects from extension libraries– Objects defined in Silverlight application
Using namespaces
• Every XAML file has definition of default XAML namespace and XAML language xmls:x namespacexmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
• Default XAML namespace defines all XAML standard elements
• XAML language namespace defines few properties that could be defined for every XAML object:x:Name – name of object. Unique per XAML filex:Key – unique key for resource
Using namespaces
• Other namespaces need to be declared first xmlns:sdk=http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdkxmlns:mpsl="clr-namespace:MP.SL“
• Than objects from these namespaces could be used:<sdk:ValidationSummary
x:Name="validationSummary" Grid.Row="2" Margin="0,20,0,0" />
<mpsl:WaitControl x:Name="waitMessage" Grid.RowSpan="3">
</mpsl:WaitControl>
Standard Controls
Controls types• Silverlight ships with many common controls. In addition
there are more controls available from Silverlight SDK (Toolkit)
• All controls could be ordered by types:– Layout– Information display– Buttons– Data display– User input– Dialog boxes– Media– HTML display
Layout controls
Layout controls are used to manage the size, dimensions, position, and arrangement of child elements
– Border– Canvas– Grid, GridSplitter– StackPanel– DockPanel– WrapPanel– ViewBox– ScrollViewer– TabControl
Layout controls - Border
• Provides a border, background, or both to another control
• Syntax<Border> singleChild </Border>
• Useful propertiesWidth, Height, BorderBrush, BorderThickness, Background, CornerRadius, Padding
• Useful attached propertiesVerticalAlignment, HorizontalAlignment
Layout controls - Canvas
• Provides a surface to display child elements at specific coordinates in the canvas
• Syntax<Canvas ...> one or more UIElements </Canvas>
• Useful attached propertiesCanvas.Left, Canvas.Top, Canvas.ZIndex
Layout controls - Grid
• Provides a surface composed of rows and columns to display child elements
• Syntax<Grid ...> one or more UIElements </Grid>
• Useful propertiesColumnDefinitions, RowDefinitions
• Useful attached propertiesGrid.Column, Grid.Row, Grid.ColSpan, Grid.RowSpanVerticalAlignment, HorizontalAlignment
Layout controls – Grid cont.
• Width of columns and height of rows could be defined in various ways:– Default (not specified) – proportionally divide
available space– Absolute value in pixels– Star - weighted proportion of available space
Syntax: “[weight]*”– Auto – based on size of content
Syntax: “Auto”
Layout controls – GridSplitter (SDK)
• Allows a user to resize the columns or rows in a Grid control
• The resizing behavior depends on Grid.ColSpan, Grid.RowSpan, HorizontalAlignment and VerticalAlignment
HorizontalAlignment VerticalAlignment ResultStretch Top, Center, Bottom Resizes rows.Right, Left, Center Stretch Resizes columns.
Layout controls – StackPanel
• Provides a surface to display child elements in a line; either horizontally or vertically.
• Syntax<StackPanel ...>
oneOrMoreChildren </StackPanel>
• Useful propertiesOrientation
• Useful attached propertiesVerticalAlignment, HorizontalAlignment
Layout controls – DockPanel (Toolkit)
• Defines an area where you can arrange child elements either horizontally or vertically, relative to each other
• Syntax<toolkit:DockPanel>
Children </toolkit:DockPanel>
• Useful propertiesLastChildFill
• Useful attached propertiesDockPanel.Dock
Layout controls – WrapPanel (Toolkit)
• Positions child elements in sequential position, breaking content to the next line at the edge of the containing box
• Syntax<toolkit:WrapPanel>
Children </toolkit:WrapPanel>
• Useful propertiesOrientation
Layout controls – ViewBox
• Provides a control that can stretch or scale its content to fill the available space
• Syntax<ViewBox ...>
child </ViewBox>
• Useful propertiesStretch, StretchDirection
Layout controls – ScrollViewer
• Provides a scrollable surface for displaying a child element
• Syntax<ScrollViewer ...>
single content control</ScrollViewer>
• Useful propertiesHorizontalScrollBarVisibility, VerticalScrollBarVisibilityCould be Visible, Hidden, Auto
Layout controls – TabControl (SDK)
• Provides a tabbed interface for displaying elements• Syntax
<sdk:TabControl …>one or more sdk:TabItem controls
</sdk:TabControl>
<sdk:TabItem Header=“Tab caption”…>single content control
</sdk:TabItem>• Useful properties
TabStripPlacement
Useful properties - Size
• Control sizeFrameworkElement.WidthFrameworkElement.HeightWidth and Height are specified in pixels. The default value is “Auto” – according to size of content.
• Control actual sizeFrameworkElement.ActualWidthFrameworkElement.ActualHeightCan’t be set. Contains calculated width and height of control in pixels
Useful properties - Position
• AlignmentFrameworkElement.VerticalAlignmentValues: Top, Bottom, Center, StretchFrameworkElement.HorizontalAlignmentValues: Left, Right, Center, StretchBoth are attached properties
Useful properties - Position• Margin
FrameworkElement.MarginDefines outlet margin of control in pixelsSyntax:
<frameworkElement Margin="uniform"/>or
<frameworkElement Margin="left+right,top+bottom"/>
or <frameworkElement
Margin="left,top,right,bottom"/>
• PaddingControl.PaddingDefines space between content of control and its outlet borderHas same syntax like MarginSome controls implements Control.Padding too (Border)
Useful properties - Visibility
• VisibilityUIElement.VisibilityDefines visibility of control. Collapsed controls are not renderValues: Visible, Collapsed
• OpacityUIElement.OpacityDefines the degree of control opacity 0.0-1.0. Default is 1.0
Useful properties - Background
• BackgroundControl.BackgroundDefines color backgroundValues: color string or Brush
Useful properties - Border
• BorderControl.BorderBrushDefines color of borderValues: color string or Brush
• BorderThicknessControl. BorderThicknessDefines thickness of borderSyntax:
<control BorderThickness="uniform"/> or
<control BorderThickness="left&right,top&bottom"/> or
<control BorderThickness="left,top,right,bottom"/>
Useful properties - Brushes
• SolidColorBrushDefines solid colorSyntax:<object property="predefinedColor/#rgb/#argb"/>
<object.property><SolidColorBrush Color=“color"/>
</object.property>
predefinedColor – Colors class properties#rgb – Red, Green, Blue#argb – Alpha (%), Red, Green, Blue
Useful properties - Brushes
• ImageBrushSyntax:<ImageBrush ImageSource=“image"/>
Useful properties - Brushes• LinearGradientBrush
Defines a gradient along a lineSyntax:<LinearGradientBrush ...> oneOrMoreGradientStops </LinearGradientBrush>The gradient line is definedby StartPoint and EndPointproperties. Default is diagonalline StartPoint=0,0 and EndPoint=1,1
Useful properties - Brushes
• RadialGradientBrushDefines radial gradientSyntax:<RadialGradientBrush>
oneOrMoreGradientStops </RadialGradientBrush>
The gradient is defined by focal point (GradientOrigin) and ellipse (Center, RadiusX, RadiusY).
LAYOUT EXERCISE
Day 2
• Standard Controls– Information display– Buttons– Data display– User input– Dialog boxes– Media– HTML display
• Resources and Styles• Exercise
Information display
User information controls provide contextual feedback or clarify an application's user interface. The user typically cannot interact with these controls.– TextBlock– Fonts, Foreground, Text decorations– ProgressBar– ToolTip
Information display - TextBlock
• Displays small amounts of read-only text• Syntax
<TextBlock ...>text
</TextBlock> or <TextBlock Text=“text”.../>
• Useful propertiesText, TextAlignment
• Useful attached propertiesfont and decoration properties
Information display – TextBlock cont
• TextBlock inline Syntax<TextBlock>
oneOrMoreInlineElements </TextBlock>
• RunRepresents a discrete section of formatted or unformatted text<Run Text=“text”… /> or <Run>text</Run>
• LineBreakBegins a new line <LineBreak/>
• Bold, Italic, Span
Fonts, Foreground
• FontsControl.FontFamilyControl.FontSizeControl.FontWeightControl.FontStyleControl.FontStretch
• ForegroundDefines color of textControl.Foreground
Text decorations
• TextDecorationsTextBlock.TextDecorations
• Text wrappingTextBlock.TextWrappingTextBlock.TextTrimming
Information display – ProgressBar
• Represents the progress of an operation• Syntax
<ProgressBar .../>• Useful properties
Width, Height,Value, Minimum, Maximum, IsIndeterminate, Foreground
Information display – ToolTip• Displays a ToolTip• Syntax
<ToolTip Content=“string”.../> or
<ToolTip ...> singleObject
</ToolTip ...> or
<ToolTip ...>stringContent</ToolTip>• Useful attached properties
HorizontalOffset, VerticalOffset• Useful attached properties
ToolTipService.ToolTip, ToolTipService.Placement
Buttons
Buttons are one of the most basic user interface controls. Applications typically perform some task in the Click event when a user clicks on them. – Button– HyperlinkButton– RepeatButton
Buttons - Button
• Responds to user input from a mouse, keyboard, stylus, or other input device and raises a Click event.
• Syntax<Button Content=“string”.../>
or<Button>
singleObject </Button>
• Useful eventsClick
• Useful propertiesIsEnabled
Buttons – HyperlinkButton• Represents a button control that displays a hyperlink.
Allows users to navigate to an external Web page or content within the same Silverlight application
• Syntax<HyperlinkButton Content=“string”.../>
or <HyperlinkButton>
singleObject </HyperlinkButton>
Useful eventsClick
• Useful propertiesIsEnabled, NavigateUri
Buttons - RepeatButton
• Represents a control that raises its Click event repeatedly from the time it is pressed until it is released.
• Syntax<RepeatButton Content=“string”.../>
or<RepeatButton>
singleObject </RepeatButton>
• Useful eventsClick
• Useful propertiesDelay
Data display
Data display controls are used to show information from a data source– DataGrid– Collection views– DataPager– TreeView
Data display – DataGrid (SDK)
• Displays a collection of data in rows and columns
• Syntax<sdk:DataGrid .../>
• Useful propertiesItemsSource, AutoGenerateColumns, Columns
Data display – DataGrid cont.
• Columns typesDataGridTextColumnDataGridCheckBoxColumnDataGridTemplateColumn
Data display – Collection views
• PagedCollectionViewRepresents a view for grouping, sorting, filtering
• Useful propertiesSortDescriptions, GroupDescriptions, Filter
Data display – DataPager (SDK)
• Provides a user interface for paging through a collection of data that implements IPagedCollectionView
• Syntax<sdk:DataPager .../>
• Useful propertiesSource, PageSize, DisplayMode, AutoEllipsis
• Typically used with DataGrid or ListBox
Data display – TreeView (SDK)
• Displays hierarchical data in a tree structure that has items that can expand and collapse.
• Syntax<sdk:TreeView ItemsSource=“items”.../>or<sdk:TreeView>
oneOrMore <sdk:TreeViewItem></sdk:TreeView>
• Useful propertiesSelectedValue, SelectedItem
User input
– TextBox– PasswordBox– RichTextBox– AutoCompleteBox– CheckBox– ComboBox– ListBox– RadioButton– Slider– Calendar, DatePicker
User input - TextBox
• Control for displaying or editing text• Syntax
<TextBox Text=“text”.../> • Useful properties
Text, IsReadOnly, AcceptsReturn• Useful attached properties
font and decoration properties
User input - PasswordBox
• Control that allows the user to enter sensitive data, such as a password
• Syntax<PasswordBox Password=“password”.../>
• Useful propertiesPassword, PasswordChar
User input - RichTextBox• Control for displaying or editing rich text. Supports formatted
text, hyperlinks, images, and other rich content• Syntax
<RichTextBox .../> or <RichTextBox ...>
blocksContent </RichTextBox>
• BlocksInline, InlineUIContainer, Run, Span, Bold, Hyperlink, Italic, Underline, LineBreak
User input – AutoCompleteBox (SDK)
• Provides a text box for user input and a drop-down that contains possible matches based on the input in the text box
• Syntax<sdk:AutoCompleteBox .../>
• Useful propertiesItemsSource, FilterMode, TextFilter, ItemFilter
• Filter ModesStartsWith (default), Contains, Equals, Custom, etc
User input – CheckBox
• Control that a user can select or clear• Syntax
<CheckBox Content=“string” .../>or<CheckBox>
singleObject </CheckBox>
• Useful propertiesIsChecked, IsThreeState
• Useful eventsClick, Checked, Indeterminate,Unchecked
User input – ComboBox
• Displays a drop-down list of items a user can select from
• Syntax<ComboBox .../>
• Useful propertiesItems, ItemsSource, SelectedItem,SelectedIndex, SelectedValue, DisplayMemberPath, SelectedValuePath
• Useful eventsSelectionChanged
User input – ListBox
• Displays a list of items a user can select by clicking• Syntax
<ListBox .../>• Useful properties
Items, ItemsSource, SelectionMode, SelectedItem, SelectedValue,SelectedIndex, DisplayMemberPath, SelectedValuePath
• Useful eventsSelectionChanged
User input – RadioButton• Allows a user to select a single option from a list of options• Syntax
<RadioButton Content=“string”.../> or <RadioButton ...>
content </RadioButton>
• Useful propertiesContent, IsChecked, GroupName
• Useful eventsClick, Checked, Indeterminate,Unchecked
• Grouping– Radio buttons under same parent are grouped. – Radio buttons with same GroupName are grouped
User input – Slider
• Represents a control that lets the user select from a range of values by moving a thumb along a track
• Syntax<Slider .../>
• Useful propertiesValue, Minimum, Maximum, SmallChange, LargeChange, Orientation, IsDirectionReversed
User input – Calendar (SDK)
• Allows a user to select a date from a visual calendar display
• Syntax<sdk:Calendar .../>
• Useful propertiesDisplayMode, SelectionMode, BlackoutDates, SelectedDate, SelectedDates
• Useful eventsSelectedDatesChanged
User input – DatePicker (SDK)
• Allows a user to select a date by typing it in a text field or selecting it from a drop-down calendar control
• Syntax<sdk:DatePicker .../>
• Useful propertiesSame as Calendar control
Dialog boxes
– MessageBox – standard .NET message box– OpenFileDialog– SaveFileDialog– ChildWindow– Popup
Dialog boxes - OpenFileDialog
• Enables the user to select one or more files from the file system
• Syntaxbool? userClickedOK =
(new OpenFileDialog()).ShowDialog();• Useful properties
MultiSelect, File, Files, Filter
Dialog boxes - SaveFileDialog
• Enables the user to specify options for saving a file
• Syntaxbool? userClickedOK =
(new SaveFileDialog()).ShowDialog();• Useful properties
File, Filter
Dialog boxes – ChildWindow (SDK)
• Provides a window that can be displayed over a parent window and blocks interaction with the parent window
• Syntax<sdk:ChildWindow Content=“string”.../> or<sdk:ChildWindow ...>
singleObject </sdk:ChildWindow>
• Useful methodsShow, Close
• Useful propertiesTitle, HasCloseButton, DialogResult
• ChildWindow is independent control that has its own XAML and code-behind files
Dialog boxes – Popup
• Overlays content on top of the existing content within the bounds of the Silverlight plug-in
• Syntax<Popup .../>
• Useful propertiesIsOpen, VerticalOffset, HorizontalOffset
Media
– Image– MultiScaleImage– MediaElement
Media - Image• Displays an image• Syntax
<Image .../> • Useful properties
Source, Stretch• Image size is defined by Width, Height and Stretch properties• Image Source
– Absolute URI (http://contoso.com/myPicture.jpg)– Relative to the referencing XAML file, no leading slash
(Source="myPicture.png" or Source="../resources/myPicture.png")– Relative to the XAP file application root
(Source="/resources/myPicture.png“)– Specifying an assembly, and then referencing the component
(Source=“/MySilverlightApp;component/myPicture.png")
Media – MultiScaleImage (DeepZoom)
• Enables users to open a multi-resolution image which can be scaled or repositioned for detail viewing
• Syntax<MultiScaleImage .../>
• The pictures need to be prepared using DeepZoom Composer
Media – MediaElement
• Hosts audio or video content• Syntax
<MediaElement Source=“URI”.../>
HTML display
– WebBrowser
HTML display - WebBrowser
• Provides a surface for displaying HTML content when the application is hosted outside the browser
• Syntax<WebBrowser .../>
• Useful propertiesSource
ResourcesStyles
Resource dictionaries
• A resource dictionary is a keyed dictionary of objects that can be used both in XAML and in code
• Resource dictionaries can exist as:– Immediate (page) resources– Application resources (App.xaml)– Separate XAML resource files
• Typically resources used for sharing objects as Styles, Brushes, Templates, Storyboards, Transforms, custom types, etc
• Every Silverlight element has Resources property that could be used for resources definition
Keys and resources
• The item within resource dictionary must have a key defined using x:Key attribute. The key must be unique inside particular resource dictionary
• Example<Page> <Page.Resources> <Style x:Key=“ButtonStyle” … /> <SolidColorBrush x:Key=“BlueBrush” … /> </Page.Resources></Page>
Resource scope• Resources defined in App.xaml file are application
resources - globally available in every page• Resources defined at <root user
control>.Resources are page resources – visible to all elements of the page
• Resources defined in Element.Resources – are element resources – visible to all children of the specific element
• Resources are resolved from bottom-up. From several resources with the same key the nearest to requested element will be taken
Referencing resources in XAML• StaticResource markup extension is used for referencing
resources in XAML• Syntax
property=“{StaticResource key}”• Example
<Page> <Page.Resources> <SolidColorBrush x:Key=“BlueBrush” … /> </Page.Resources></Page>…<Border Background=“{StaticResource BlueBrush}” …/><TextBox Foraground=“{StaticResource BlueBrush}” …/>
Referencing resources from code
• Every Silverlight element has FrameworkElement.Resources property of type ResourceDictionary
• ResourceDictionary class has string-keyed indexer:
Brush brush = (Brush)page.Resources[“key1”];App.Current.Resources[“s1”] = “test”;
Merged resource dictionaries• A merged resource dictionary enables you to declare the
contents of a resource dictionary by referencing an external file• Example
<Grid> <Grid.Resources> <ResourceDictionary> <SolidColorBrush Color="#d0157820" x:Key="muddyBrush"/> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="/rd1.xaml" /> <ResourceDictionary Source="/rd2.xaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Grid.Resources> .... <Grid>
Styles• A Style is basically a collection of property
settings applied to single or multiple instances of the same type
• Every Silverlight element has a Style property (FrameworkElement.Style)
• Syntax<Style TargetType=“type”>
<Setter Property=“property” Value=“value”/>…
</Style>
Inline styles• Style could be defined directly for the element (inline)
<Border> <Border.Style> <Style TargetType="Border"> <Setter Property="Background" Value="Blue“/> <Setter Property="Width" Value="50“/> <Setter Property="Height" Value="50“/> </Style> </Border.Style></Border>
• Inline styles are useless, because properties could be set as attributes
• The real added value of styles is ability to reuse the same style over multiple elements. Such style are always defined inside Resources
Styles scope
• Style without x:key attribute is called implicit style and it is applied to all elements of specific type under resource container, except elements that have its own style. As result style without x:key defined in App.xaml applies to whole application
• Style with x:key applies only to elements that explicitly called to this style using StaticResource markup
Styles inheritance
• Style class has BasedOn property that can contain reference to another Style
• When a base style and the BasedOn style have the same property, the property value set in the BasedOn style is used
STANDARD CONTROLS AND STYLES EXERCISE
Day 3
• Data Binding• Templates• Custom Controls• Graphics, Transformations and Animations• Exercise
Data Binding
Understanding DataBinding• Data binding provides a simple way for Silverlight
applications to display and interact with data• The way data is displayed is separated from the
management of the data• A connection, or binding, between the UI and a
data object allows data to flow between the two• When a binding is established and the data
changes, the UI elements that are bound to the data can reflect changes automatically. Similarly, changes made by the user in a UI element can be reflected in the data object
Connecting UI Elements with Data• Every binding must specify a source and a target
• Direction (Mode)– OneTime - update the target with the source data
when the binding is created– OneWay - update the target with the source data
(default)– TwoWay - update both the target and the source
when either changes
Data Binding Syntax
• Markup extension<object property="{Binding …}" .../>
• {Binding path, oneOrMoreBindingProperties}– path – string representing the property path for
the binding. If not specified DataContext property is used
– Binding properties are specified as propertyName=value pairs separated by comma
DataContext• Data context is a concept that allows objects to
inherit binding-specifying information from their parents in the object tree
• Every control in Silverlight has DataContext property (FrameworkElement .DataContext)
• Example of usage:<StackPanel DataContext=“{Binding …}”>
<TextBlock Text=“{Binding}”/><TextBox Text=“{Binding}”/><Grid>
<TextBlock Text=“{Binding}”/></Grid>
</StackPanel>
Data Binding properties - Path
• Specifies the path to the binding source property
{Binding} = DataContext{Binding Name} = DataContext.Name{Binding Employee.FirstName} = DataContext. Employee.FirstName{Binding Path=Name} = DataContext.Name{Binding (Errors)[2].Message} = DataContext.Errors[2].Message
Data Binding properties - Mode
• Specifies the binding mode, as one of the following strings: OneTime, OneWay, or TwoWay.
{Binding path,Mode=OneTime}{Binding path,Mode=OneWay} – default{Binding path,Mode=TwoWay}
Data Binding properties - ElementName
• Specifies a data source by referencing another element by name
{Binding path,ElementName=name}
Data Binding properties – fall backs
• FallbackValue - Specifies a value to be assigned when the source path cannot be resolved{Binding path,FallbackValue=string}
• TargetNullValue - Specifies a value to be assigned when the source value is null{Binding path,TargetNullValue=string}
Data Binding properties – StringFormat
• Specifies the String format to use for display{Binding path,StringFormat=format}
• ExampleText=“{Binding Value, StringFormat=f2}”Displays: 50.12
Data conversions
• Data binding allows to perform two-way conversions during binding using classes implemented IValueConverter interface
• This interface exposes two methods:– Convert– ConvertBack
• The converter should be defined as Resource and referenced via {Binding Converter={StaticResource key}} markup
• Converters support a single converter parameter which can be specified using {Binding ConverterParameter=string} markup
Dependency Properties
• The purpose of dependency properties is to provide a way to compute the value of a property based on the value of other inputs
• Most properties of Silverlight elements are dependency properties
• Dependency properties are exposed as regular CLR properties, but the value of dependency property is stored differently.
Dependency Properties• CLR property usually backed by private field:
private string name;public string Name{
get { return name; }set { name = value; }
}
• Dependency properties are owned only by classes derived from DependencyObject class
• Dependency property must be registered and its identifier is stored as static readonly field in owner class
• The CLR wrapper of dependency property uses GetValue/SetValue methods of DependencyObject
Dependency Properties
public static readonly DependencyPropertyIsSpinningProperty =
DependencyProperty.Register( "IsSpinning", typeof(Boolean), typeof(SilverlightExampleClass), null );
public bool IsSpinning {
get { return (bool)GetValue(IsSpinningProperty); } set { SetValue(IsSpinningProperty, value); }
}
Dependency Properties
• A dependency property provides functionality that extends the functionality of regular CLR property:– Target of data binding– Property-Changed behavior – ability to notify
other objects when property is changed (implemented by DependencyObject class)
– Default value
INotifyPropertyChanged interface
• The ability of dependency property to notify other objects about its value change is relied on implementation of INotifyPropertyChanged interface
• This interface has a single event PropertyChanged that provides the name of changed property
• When source object of data binding is implementing INotifyPropertyChanged interface the changes in source object is automatically reflected by target of data binding
Data Annotation and Validation
• There are few CLR attributes that when applied on data source impact the display and validation behavior
• The data annotation attributes fall into three categories: validation attributes, display attributes, and data modeling attributes
• Data validation is processed by data binding
Data validation attributes
• CustomValidationAttribute• DataTypeAttribute• EnumDataTypeAttribute• RangeAttribute• RegularExpressionAttribute• RequiredAttribute• StringLengthAttribute
Data validation attributespublic class Product {
[Range(0, 5000)] public int ProductID { get; set; }
[Required] public string ProductName { get; set; }
[DataType(DataType.Currency)] public double ListPrice { get; set; }
[EnumDataType(typeof(ProductColor))] public ProductColor Color { get; set; }
}
Display attributes
• DataTypeAttribute• DisplayAttribute• DisplayColumnAttribute• DisplayFormatAttribute• FilterUIHintAttribute• UIHintAttribute• Display attributes are used by DataGrid control
Data modeling attributes
• AssosiationAttribute• ConcurrencyCheckAttribute• EditableAttribute• KeyAttribute• TimestampAttribute
Validation controls (SDK)
• ValidationSummaryDisplays a summary of the validation errors on a form
• DescriptionViewerDisplays a description and tracks error state for an associated control
• LabelDisplays a caption, required field indicator, and validation error indicator for an associated control.
• Validation properties of Data BindingValidatesOnNotifyDataErrors, ValidatesOnDataErrors, ValidatesOnExceptions, NotifyOnValidationError
Custom validation• Data object may implement IDataErrorInfo or INotifyDataErrorInfo
interfaces in order to provide custom validation logic• IDataErrorInfo interface
Provides simple object validation– Syntax
string this[ string columnName ] { get; }Returns error if property has invalid value
• INotifyDataErrorInfo interfaceProvides more complex validation scenarios– Syntax
IEnumerable GetErrors( string propertyName )bool HasErrors { get; }event EventHandler<DataErrorsChangedEventArgs> ErrorsChanged
• Both interfaces are supported by data binding and validation controls
Templates
Control Templates• Every Silverlight control has Control.Template
property that specifies ControlTemplate class object
• ControlTemplate specifies the visual structure and visual behavior of control
• Every standard Silverlight control has default template defined by Microsoft and published in MSDN
• Defining an alternative ControlTemplate allows customization of control representation without effecting the control logic
Controls used in ControlTemplate• You can use any Silverlight standard or custom
controls inside of ControlTemplate• There is a special controls ContentPresenter and
ItemsPresenter that displays the content of template owner
• You can use binding markups inside ControlTemplate• There is a special binding markup TemplateBinding
that allows to make binding to the property of template owner
• There is a good practice to define control template as part of style for achieving reuse
Defining control appearance according to visual states
• Many standard and custom controls define different visual states as part of controls definition. For example Button has: Normal, MouseOver, Pressed, Disabled, Focused and Unfocused states. The states could be grouped by state groups
• Control template could define a different visual appearance of control for each state using VisualStateManager and VisualState controls
ContentControl
• Represents a control with a single piece of content of any type
• Syntax<ContentControl>
single child</ContentControl>
• ContentControl doesn’t have default visual template. Usually used for creating custom templated controls
ItemsControl
• Represents a control that can be used to present a collection of items
• Syntax<ItemsControl>
one or more items</ItemsControl>
or<ItemsControl ItemsSource=“binding”/>
• ItemsControl doesn’t have a default template for presenting items. The visual representation of items could be defined via ItemTemplate property of type DataTemplate
VirtualizingStackPanel
• Improves application performance when large number of items is used in ItemsControl
• Syntax<ItemsPanelTemplate> <VirtualizingStackPanel .../> </ItemsPanelTemplate>
• The improvement is achieved by generating only visible elements
Custom Controls
Customization in Silverlight
• Silverlight provides several ways for customization of existing controls or creating new controls:– Setting properties of existing control directly or
via styles– Overwriting ControlTemplate of existing control– Creating custom user control– Creating custom templated control
Custom user control• Reasons for creating custom user controls:– To separate functionality into smaller, manageable
pieces of logic that can be created independently from an application and other controls
– To group related controls that can be used more than once in an application
• Actually there is always at least one custom user control in each Silverlight application – the main page
• Custom user control can be reused in only in application in which it is created
Custom user control - structure
• Custom user control is combined from XAML file and code-behind file.
• It could contain standard and custom controls included in XAML file and refer these controls in code-behind
• It could contain resources• It could define dependency, attached
properties and events
CustomerEditor Example<UserControl x:Class="Training.CustomControls.CustomerEditor“ ….. Standard Namespaces ….. xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" xmlns:local="clr-namespace:Training.CustomControls" x:Name="editor"> <UserControl.Resources> <local:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"></local:BooleanToVisibilityConverter> <Style TargetType="TextBox"> <Setter Property="Width" Value="100"></Setter> </Style> </UserControl.Resources> <StackPanel> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"></ColumnDefinition> <ColumnDefinition Width="5"></ColumnDefinition> <ColumnDefinition Width="Auto"></ColumnDefinition> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <sdk:Label Grid.Column="0" Grid.Row="0" Target="{Binding ElementName=FistName}"></sdk:Label> <TextBox Grid.Column="2" Grid.Row="0" x:Name="FistName" Text="{Binding FirstName}"></TextBox> <sdk:Label Grid.Column="0" Grid.Row="1" Target="{Binding ElementName=LastName}"></sdk:Label> <TextBox Grid.Column="2" Grid.Row="1" x:Name="LastName" Text="{Binding LastName}"></TextBox> <sdk:Label Grid.Column="0" Grid.Row="2" Target="{Binding ElementName=City}" Visibility="{Binding ShowAddress,ElementName=editor,Converter={StaticResource BooleanToVisibilityConverter}}"></sdk:Label> <TextBox Grid.Column="2" Grid.Row="2" x:Name="City" Text="{Binding City}" Visibility="{Binding ShowAddress,ElementName=editor,Converter={StaticResource BooleanToVisibilityConverter}}"></TextBox> <sdk:Label Grid.Column="0" Grid.Row="3" Target="{Binding ElementName=Address}" Visibility="{Binding ShowAddress,ElementName=editor,Converter={StaticResource BooleanToVisibilityConverter}}"></sdk:Label> <TextBox Grid.Column="2" Grid.Row="3" x:Name="Address" Text="{Binding Address}" Visibility="{Binding ShowAddress,ElementName=editor,Converter={StaticResource BooleanToVisibilityConverter}}"></TextBox> </Grid> <sdk:ValidationSummary></sdk:ValidationSummary> </StackPanel></UserControl>
CustomerEditor Example public partial class CustomerEditor : UserControl { public bool ShowAddress { get { return (bool)GetValue(ShowAddressProperty); } set { SetValue(ShowAddressProperty, value); } }
public static readonly DependencyProperty ShowAddressProperty = DependencyProperty.Register("ShowAddress", typeof(bool), typeof(CustomerEditor), new PropertyMetadata(true));
public CustomerEditor() { InitializeComponent(); } }
Custom templated controls
• These controls usually based (derived) from existing controls and extend its functionality
• These controls could be packed into separate DLL (library) and reused in multiple Silverlight applications
• Custom templated control is combined from code-behind file and template defined in Themes\Generic.xaml
Graphics Transformations Animations
Shape controls
• Silverlight provides number of “shape” controls that enables drawing of various shapes:– Ellipse– Line– Polygon– Polyline– Rectangle– Path
• All shape controls share the following properties:– Stroke – defines the brush for outline of shape– StrokeThickness – defines the thickness of stroke– Fill – defines the brush that fills the shape
Cropping objects
• You can crop an object by clipping out an area of the object's display. This is done by using the Clip property
• Clip property gets Geometryobjects:– EllipseGeometry– LineGeometry– RectangleGeometry– PathGeometry– GeometryGroup
Transforms
• Transforms allow to rotate, scale, skew and move Silverlight controls.
• Every Silverlight control derived from UIElement has RenderTransform property that could be set to one of transform classes:– RotateTransform – rotates an element
by the specified Angle– ScaleTransform – scales an element by
specified ScaleX and ScaleY amounts– SkewTransform – skews an element by
specified AngleX and AngleY amounts– TranslateTransform – moves an element
by specified X and Y amounts
Transforms cont.
• In order to create more complex transforms the following classes could be used:– CompositeTransform – applies multiple
transforms to the same object– TransformGroup – like CompositeTransform, but
allows to specify the order of transforms– MatrixTransform – allows creation of custom
transformations
3-D transforms
• Silverlight allows "perspective transforms" that provides 3-D effects
• 3-D transforms are applied via Projection property that should be set to PlaneProjection class
Animations• Silverlight animates objects by applying animations to individual
properties of object• Animations are executed by Storyboard objects (container for
animations)• Storyboard may contain animations or other nested storyboards:
– Simple animations• DoubleAnimation• ColorAnimation• PointAnimation
– Key frame animations• DoubleAnimationUsingKeyFrames• ColorAnimationUsingKeyFrames• PointAnimationUsingKeyFrames• ObjectAnimationUsingKeyFrames
Storyboard
• Container for animations• Syntax
<Storyboard>one of many animations
</Storyboard>• Useful methods
Begin, Stop, Pause, Resume• Useful attached properties
Storyboard.TargetName, Storyboard.TargetProperty• Useful properties
Duration• Useful events
Completed
DoubleAnimation• Animates the value of a Double property between two
target values using linear interpolation over a specified Duration
• Syntax<Storyboard>
<DoubleAnimation Storyboard.TargetName=“element”Storyboard.TargetProperty=“property”
From=“x” To=“y”/> </Storyboard>• Useful properties
AutoReverse, RepeatBehavior, Duration
ColorAnimation
• Animates the value of a Color property between two target values using linear interpolation over a specified Duration
• Syntax<Storyboard>
<ColorAnimation Storyboard.TargetName=“element”Storyboard.TargetProperty=“property”
From=“color1” To=“color2”/> </Storyboard>• Useful properties
AutoReverse, RepeatBehavior, Duration
PointAnimation
• Animates the value of a Point property between two target values using linear interpolation over a specified Duration
• Syntax<Storyboard>
<PointAnimation Storyboard.TargetName=“element”Storyboard.TargetProperty=“property”
From=“x1,y1” To=“x2,y2”/> </Storyboard>• Useful properties
AutoReverse, RepeatBehavior, Duration
Key frame animations
• Key-frame animations enable you to animate using more than two target values, and control an animation's interpolation method
• Key frame animation contains series of key frames. • The key-frame animation classes adhere to the
following naming convention:type_AnimationUsingKeyFrames
• For example: DiscreteDoubleKeyFrame, EasingDoubleKeyFrame, LinearDoubleKeyFrame, SplineDoubleKeyFrame
BINDING AND CUSTOM CONTROLS EXERCISE
Day 4
• UI interaction• Triggers• Hosting • Working with Services• Navigation Applications• Debugging Silverlight Applications• Unit Tests• Expression Suite• 3-rd party libraries
UI Interaction
Keyboard support• UIElement has 2 keyboard related events:
– KeyDown– KeyUp
• The element must be “in focus” in order to get these events• The handler for these events has the following syntax:
void KeyHandler(object sender, KeyEventArgs e)• KeyEventArgs.Key provides the pressed/released key• These events are “bubbling” events – go from bottom to top in
controls hierarchy. Setting KeyEventArgs.Handled to true stops event bubbling
• Some controls may handle key events and prevent its bubbling. For example TextBox, Button. Usually such controls provide their own events(TextBox.TextChanged, Button.Click, etc)
Mouse support• There are few mouse related events in UIElement:
– MouseMove– MouseEnter– MouseLeave– MouseLeftButtonDown– MouseLeftButtonUp– MouseRightButtonDown– MouseRightButtonUp– MouseWheel
• All mouse events provides mouse data of type MouseEventArgs (or derived from it) in their handler. This class provides mouse position and Handled property
• Some mouse events are routed (bubbling) events, that can be stopped by setting Handled property to true.
• Controls like Button hides mouse button events and provides its own Click event.
Drag & Drop support
• UIElement has AllowDrop property (false by default)
• Setting AllowDrop to true indicates that specific element can be drop target of drag-and-drop operations. In this case element starts getting: DragEnter, DragLeave, DragOver and Drop events
Isolated storage
• Silverlight application usually hosted by browser. This means it is running inside security sandbox and doesn’t have access to file system
• There is a special “safe virtual file system” provided to Silverlight application for its file operations – isolated storage
• Application works with isolated storage via IsolatedStorageFile class
• Isolated storage could be encrypted
Threading
• Silverlight application has one main application thread (UI thread) and can use additional threads
• BackgroundWorker and ThreadPool classes could be used for providing multithreaded in Silverlight application
• Any UI operations could be executed only in context of UI thread. For this purpose DependencyObject.Dispatcher property provides Dispatcher class that allows invoking methods calls in context of UI thread
Triggers
Event triggers• Silverlight supports only event triggers that can start storyboards in
response to an event• Syntax
<EventTrigger>one or more BeginStoryboard
</EventTrigger>• Example
<Rectangle …><Rectangle.Triggers>
<EventTrigger RoutedEvent=“Rectangle.Loaded”><BeginStoryboard>
<Storyboard …> … </Storyboard></BeginStoryboard>
</EventTrigger></Rectangle.Triggers>
</Rectangle>
Hosting
Silverlight plug-in
• Silverlight application is usually hosted by web browser• During Silverlight installation a special plug-in is
installed. This plug-in allows executing Silverlight application code
• Every Silverlight application is embedded into HTML page using <object> HTML tag:<object width="300" height="300"
type="application/x-silverlight-2" > <param name="source“ value=“app.xap"/>
</object> • Width and height of object defines the available screen
size of Silverlight application
Silverlight plug-in parameters• minRuntimeVersion – specifies minimal required
version of Silverlight<param name="minRuntimeVersion" value="version"/>
• initParams – sets user defined initialization parameters. These parameters are passed to Application_Startup method in App.xaml.cs<param name=" initParams" value=“k1=v1[,k2=v2,..,kn=vn]"/>
• splashscreensource – specifies alternative Splash screen to be displayed during application load <param name="splashscreensource" value="uri to XAML"/>
• There are more rear used parameters
Splash screens
• Silverlight plug-in includes default splash screen which is displayed when download of application takes more than 0.5 sec. The default splash screen displays percent of download
• Splash screen could be customized by providing an alternative XAML page resized in hosting Web site. This is page of type “Silverlight JScript page” – means does not have code-behind
• The URL for alternative splash screen is defined via splashscreensource parameter of Silverlight plug-in
Out-of-browser support• Silverlight application could be installed locally on user
machine and became out-of-browser application• Out-of-browser support is enabled by checking “Enable
running application out of browser” checkbox in project settings
• User installs application via menu provided by right-clicking on Silverlight application
• Out-of-browser application can run without network connection – offline
• If configured as trusted out-of-browser application may bypass some sandbox restrictions
• Application code may distinguish between running in-browser and out-of-browser by examining Application.IsRunningOutOfBrowser property
Out-of-browser special features
• Window manipulation – change size, minimize, maximize application window
• Window customization – trusted applications may hide title bar and window border
• HTML hosting – display HTML content within your application using WebBrowser class
• Notification windows – style Outlook e-mail notifications in task bar. NotificationWindow class
• File system access – trusted applications can access files out of isolated storage
Updates of out-of-browser apps
• Regular Silverlight application is always running its latest version – Silverlight plug-in compares version of XAP stored in browser cache with XAP on the server
• Out-of-browser application must provide its own logic for upgrades. Application class has few related methods and events: CheckAndDownloadUpdateAsync method, CheckAndDownloadUpdateCompleted event
HTML bridge
In Silverlight, the HTML Bridge is an integrated set of types and methods that enable you to do the following:– Expose complete managed types to JavaScript for
scripting.– Expose individual methods of managed types to JavaScript
for scripting– Pass managed types as parameters to JavaScript functions
and objects– Return managed types from JavaScript– Assign managed types as event handlers, which are
callable from JavaScript– Call JavaScript event handlers from managed types
Working with Services
Silverlight networking options
• HTTP classes – Silverlight supports HttpWebRequest/HttpWebResponse and WebClient classes from System.Net namespaceThese classes are useful for accessing REST or raw HTTP services
• Proxy classes – these classes are generated by Visual Studio by adding reference to SOAP Web service or WCF service
• Sockets – Silverlight supports Socket class from System.Net.Sockets namespace which allows adding UDP/TCP/Multicast communication to Silverlight application
Navigation Applications
Navigation between pages
• Regular Silverlight application has a single “main page” - the user control specified as RootVisual in Application_Startup of App.xaml.cs
• This “main page” may contain other user controls and may provide interaction behavior by hiding or dynamically creating these user controls
• Other option is reassigning of RootVisual to other control upon user action or other logic
Navigation in Silverlight 4.0
• In Silverlight 4.0 two new controls were supported: Frame and Page
• Page represents discrete section of content• Frame acts as container for Page controls• At any time Frame displays content of single page• Usually you are creating “main page” and set it as
RootVisual. The main page contains permanent UI – which is not changed during navigation and one or more frames
• The navigation (changing a page displayed in the frame) could be done through user action (HyperlinkButton) or programmatically (Source property, Navigate, GoBack, GoForward methods)
Uri mapping
• Browser address bar reflects the current page URL when navigation is used
• Frame control supports Uri mapping that allows to map certain pattern to specific Url
• Example: /Home is actually /Views/Home.xaml• The mapping is defined using UriMapper
property of Frame that gets collection of UriMapping classes
Debugging Silverlight Applications
Unit Tests
Expression Suite
3-rd Party Libraries
top related