What’s New In Silverlight 5Jeff Brand
Developer and Platform [email protected] | slickthought.net | @jabrand
What’s New in Silverlight 5
Agenda
MVVM Databinding Enhancements
Binding In Style SettersImplicitDataTemplatesRelativeSource Ancestor BindingsCustom Markup ExtensionsDatabinding DebuggingDataContextChanged EventUpdateSourceTrigger
WCF RIA Services Enhancements
Text, Printing & MediaUnrestricted File AccessTrusted Apps In-BrowserGroup PolicyP/InvokeHTML supportMultiple Windows64-bit
Focused on your top asks:User Voice:
DataBinding Enhancements
Enabling MVVM, but also just more productive
Services Models
Person VehicleCalenda
rPeople Vehicles Tax
Orders ShippingSchedul
es
Layers Of Our Applications
UI (XAML)
Code Behind (XAML.cs/vb)
Data
Presentation logic
Not reusable
EF POCO XML
WCF
SQL Server
OracleTelco
Switches
Web Service
s
Media Streams
Web Service
s
UI (XAML)
OrdersCode Behind
(XAML.cs/vb)
UI (XAML)
PeopleCode Behind
(XAML.cs/vb)
How to test?How to reuse?How can the designer update the UIHow to provide different views
Laptop/DesktopTablet/Slate w/TouchPhone
REST JSON RIA
Appointments
Laptop/DesktopAppointmentsCode Behind
(XAML.cs/vb)
Services Models
Person VehicleCalenda
rPeople Vehicles Tax
Orders ShippingSchedul
es
MVVM
Class Libraries
Data
EF POCO XML
WCF
SQL Server
OracleTelco
Switches
Web Service
s
Media Streams
Web Service
s
REST JSON RIA
Test API w/VSTTLeverage logic across UIsDesigner parties on XAMLSkin across varied form factors
Laptop/DesktopTablet/Slate w/TouchPhone
Aggregation of data & services for your presentation logic
Tablet/SlateAppointmentsCode Behind
(XAML.cs/vb)
PhoneAppointmentsCode Behind
(XAML.cs/vb)
Test Framework
Visual Studio
Team Test
ViewModel (VM.cs/vb
Benefits of MVVM
Separation of concerns
Data binding (XAML)
Unit testing
Designer and developer symbiosis
Consistent, Maintainable, Scalable
MVVM Enhancements
Reduce the need for UI codeHow to reduce code?Enhance DataBinding
Silverlight 5 Binding In Style SettersImplicitDataTemplatesRelativeSource Ancestor BindingsCustom Markup ExtensionsDatabinding DebuggingDataContextChanged EventUpdateSourceTriggerWCF RIA Services EnhancementsText, Printing & Media
MVVM Enhancements
Binding In Style SettersImplicitDataTemplatesRelativeSource Ancestor BindingsCustom Markup ExtensionsDatabinding DebuggingDataContextChanged EventUpdateSourceTriggerWCF RIA Services EnhancementsText, Printing & Media
Binding Style Setters
How do I change styles without shipping new XAML?Can I set the styles in the database?
demo
Binding Style Setters How It Works
Create a Class to expose your values
Instance the Class in your Resources
Bind the value to the instanced resource<Style TargetType="TextBlock"> <Setter Property="Foreground" Value="{Binding ForegroundColor}, Source={StaticResource MyAppStyles}”
namespace MyProject.Styles { public class MyAppStyles : INotifyPropertyChanged { public Brush ForegroundColor {
get { return _foregroundColor; }
set { _foregroundColor = value; NotifyPropertyChanged("ForegroundColor");
<ResourceDictionary xmlns:stylesNS="clr-namespace:MyProject.Styles">
<stylesNS:MyAppStyles x:Key=“MyAppStyles"/>
MVVM Enhancements
Binding In Style SettersImplicit DataTemplatesRelativeSource Ancestor BindingsDatabinding DebuggingCustom Markup ExtensionsDataContextChanged EventUpdateSourceTriggerWCF RIA Services EnhancementsText, Printing & Media
Implicit Data Templates
Template Based On TypeHeterogeneous Collections
With Inheritance Hierarchy
demo
<Application.Resources><ResourceDictionary>
<DataTemplate x:Key=“StatesDataTemplate"><Grid>
<StackPanel Orientation="Horizontal"><TextBlock Text="{Binding StateCode}"/><TextBlock Text="{Binding StateName}"/>
</StackPanel></Grid>
</DataTemplate></ResourceDictionary>
</Application.Resources>
<Application.Resources> <ResourceDictionary> <DataTemplatex:Key="vehiclesDataTemplate">
DataType="models:Vehicle"> <Image Source="Vehicle.png"/> </DataTemplate> </ResourceDictionary></Application.Resources>
<Application.Resources><ResourceDictionary>
<DataTemplate x:Key="stateDataTemplate">DataType=“models:State">
<Grid><StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding StateCode}"/><TextBlock Text="{Binding StateName}"/>
</StackPanel></Grid>
</DataTemplate></ResourceDictionary>
</Application.Resources>
<Application.Resources><ResourceDictionary>
<!--Default Vehicle DataTemplate--><DataTemplate DataType="models:Vehicle">
<Image Source="Vehicle.png"/></DataTemplate>
<DataTemplate DataType="models:Car"><Image Source="Car.png"/>
</DataTemplate>
<DataTemplate DataType="models:Truck"><Image Source="Truck.png"/>
</DataTemplate>
<DataTemplate DataType="models:Motorcycle"><Image Source="Motorcycle.png"/>
</DataTemplate></ResourceDictionary>
</Application.Resources>
MVVM Enhancements
Binding In Style SettersImplicit DataTemplatesRelativeSource Ancestor BindingsDatabinding DebuggingCustom Markup ExtensionsDataContextChanged EventUpdateSourceTriggerWCF RIA Services EnhancementsText, Printing & Media
Relative Source Ancestor BindingHow do I bind to data up the visual tree?
<ListBox ItemsSource="{Binding Path=Appointments}"> <ListBox.ItemTemplate><DataTemplate><Grid ...
<TextBlock Text="{Binding Time}" …
<ComboBox ItemsSource="{Binding DataContext.Status, RelativeSource={RelativeSource FindAncestor AncestorType=UserControl,
Mode=FindAncestor}}"
namespace SLInsurance.ViewModels { public class AppointmentsViewModel { public ObservableCollection<Appointments> Appointments{ get; set; }
public ObservableCollection<Status> Status{get; set; }
namespace SLInsurance.Views { public partial class AppointmentView : UserControl {...
this.DataContext = new ViewModels.AppointmentViewModel();
Relative Source Ancestor Binding
Used For Control Hierarchy Binding As Well
<DataTemplate x:Key="StateComboBoxDataTemplate"> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding StateCode}" Margin="0,0,5,0"/> <TextBlock Text="{Binding StateName}" Visibility="{Binding IsDropDownOpen, RelativeSource={RelativeSource FindAncestor
AncestorType=ComboBox}, Converter={StaticResource BoolToVisibilityConverter} }"/></StackPanel>
demo
MVVM Enhancements
Binding In Style SettersImplicit DataTemplatesRelativeSource Ancestor BindingsDatabinding DebuggingCustom Markup ExtensionsDataContextChanged EventUpdateSourceTriggerWCF RIA Services EnhancementsText, Printing & Media
DataBinding Debugging
demo
DataBinding Debugging
Bound Instance & Type
Values of the Final Source
Pipeline• Initial• AfterValue• AfterStringFormat• AfterTypeConversion• …
XAML BreakpointsBreak when objects are bound,
such as Grid Cycling
Locals:Dig into what’s working, what’s
notFull Debugging Support
((System.Windows.Data.Debugging.BindingDebugState)BindingState).Error != null
MVVM Enhancements
Binding In Style SettersImplicit DataTemplatesRelativeSource Ancestor BindingsDatabinding DebuggingCustom Markup ExtensionsDataContextChanged EventUpdateSourceTriggerWCF RIA Services EnhancementsText, Printing & Media
Custom Markup Extensions
demo
public partial class Appointments : UserControl {
private void OnAppointmentsListbox_SelectionChanged(object sender, SelectionChangedEventArgs e){this.DataService.GetClaimById(GetClaimsCallback,
((AdjusterAppointment) (this.appointmentsListbox.SelectedItem)).Claim_Id); }
private void GetClaimsCallback(ObservableCollection<Claim> claims) {this.AppoinmentsListBox.Items.Add(claims[0]);
<ListBox x:Name="appointmentsListbox"ItemsSource="{Binding Appointments}"
SelectionChanged="OnAppointmentsListbox_SelectionChanged">UI (XAML)
Code Behind (XAML.cs/vb)
ViewModel (VM.cs/vb
Services Models
Custom Markup Extensions
How do I get my event handler code out of my Code Behind
Data
public void GetClaimById(Action<ObservableCollection<Claim>> callback, string claim_Id) {var query = DataContext.GetClaimByIdQuery(claim_Id);_getClaimCallback = callback;_claimLoadOperation = DataContext.Load<Claim>(query);…
Custom Markup ExtensionHow It Works
public class MethodInvokeExtension : IMarkupExtension<object> {// Properties Exposed in XAML as Intellisense Lovepublic String Method { get; set; }
// Invoked by the XAML Parser @ runtimepublic object ProvideValue(IServiceProvider serviceProvider) {
<UserControl x:Class=“AppointmentsView" xmlns:MyUtils="clr-namespace:SLInsurance;assembly=SLInsurance">
...<StackPanel x:Name="LayoutRoot">
<ComboBox Name=“appointmentsListBox" SelectionChanged="{MyUtils:MethodInvoke Method=OnAppointmentChanged}"
MVVM Enhancements
Binding In Style SettersImplicit DataTemplatesRelativeSource Ancestor BindingsDatabinding DebuggingCustom Markup ExtensionsDataContextChanged EventUpdateSourceTriggerWCF RIA Services EnhancementsText, Printing & Media
DataContextChanged Event
It just worksIncrease Memory Efficiency “handle references”
this.DataContextChanged += View_DataContextChanged;…void View_DataContextChanged(object sender, DependencyPropertyChangedEventArgs e) { INotifyPropertyChanged customer; customer = e.OldValue as INotifyPropertyChanged; if (customer != null) customer.PropertyChanged -= customer_PropertyChanged;
customer = e.NewValue as INotifyPropertyChanged; if (customer != null) customer.PropertyChanged += customer_PropertyChanged;}
MVVM Enhancements
Binding In Style SettersImplicit DataTemplatesRelativeSource Ancestor BindingsDatabinding DebuggingCustom Markup ExtensionsDataContextChanged EventUpdateSourceTriggerWCF RIA Services EnhancementsText, Printing & Media
UpdateSourceTriggerHow can I get key stroke changes?
private void vinTextBox_TextChanged(object sender, TextChangedEventArgs e) { Helpers.VinCarInfo carInfo = Helpers.VINParser.Parse(vinTextBox.Text); this.vehicleYearsAutoComplete.Text = carInfo.Year.Value.ToString(); this.vehicleMakeAutoComplete.Text = carInfo.Make; this.vehicleModelComboBox.SelectedValue = carInfo.Model;
<TextBox Name="vinTextBox"Text="{Binding SelectedClaim.InsuredVIN, Mode=TwoWay}"
TextChanged="vinTextBox_TextChanged" UI (XAML)
Code Behind (XAML.cs/vb)
ViewModel (VM.cs/vb
Services Models
Data
public void GetVehicleMakes(Action<ObservableCollection<string>> callback, int year) { _getVehicleMakesCallback = callback; this.SearchServiceClient.GetVehicleMakesCompleted += OnGetVehicleMakesCompleted; this.SearchServiceClient.GetVehicleMakesAsync(year); }
public void LoadVehicleYears() {this.DataService.GetVehicleYears(GetVehicleYearsCallback);
}public void LoadVehicleMakes(Nullable<int> year) {
if (year.HasValue) {this.DataService.GetVehicleMakes(GetVehicleMakessCallback, year.Value);
…
public void LoadVehicleModels(Nullable<int> year, string make) {if (year.HasValue) {
this.DataService.GetVehicleModels(GetVehicleModelssCallback, year.Value, make);
UpdateSourceTrigger
Moving code from the UI to the testable ViewModel
<TextBox Name="vinTextBox"Text="{Binding SelectedClaim.InsuredVIN, Mode=TwoWay}"UpdateSourceTrigger=PropertyChanged}"
UI (XAML)
Code Behind (XAML.cs/vb)
ViewModel (VM.cs/vb
Services Models
Data
void OnClaimPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e) {switch (e.PropertyName) {
case "InsuredVIN":ParseVIN();break;
…
private void ParseVIN() {Helpers.VinCarInfo carInfo = Helpers.VINParser.Parse(this.SelectedClaim.InsuredVIN);
this.SelectedClaim.InsuredYear = carInfo.Year;this.SelectedClaim.InsuredMake = carInfo.Make;this.SelectedClaim.InsuredModel = carInfo.Model;
…
UpdateSourceTrigger
demo
MVVM Enhancements
Binding In Style SettersImplicit DataTemplatesRelativeSource Ancestor BindingsDatabinding DebuggingCustom Markup ExtensionsDataContextChanged EventUpdateSourceTriggerWCF RIA Services EnhancementsText, Printing & Media
WCF RIA Services for Silverlight 5
Complex Types (SP1)
Custom ClientCode
Gen(SP1)
DateTimeOffset
MVVM Support
EF Code First
(coming soon)
But Wait, There’s More
TextPrintingMedia
Binding In Style SettersImplicit DataTemplatesRelativeSource Ancestor BindingsDatabinding DebuggingCustom Markup ExtensionsDataContextChanged EventUpdateSourceTriggerWCF RIA Services EnhancementsText, Printing & Media
Text Enhancements
Linked Text ContainersFlow Rich Text from one container to anotherDynamically flows on resize
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus enim dolor, molestie at auctor id, auctor ultrices nisi. Curabitur urna lorem, luctus hendrerit dapibus quis, facilisis sed orci. Aliquam nunc massa, placerat id pretium eget, luctus sit amet diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque fermentum neque at nisl bibendum cursus. Aliquam sollicitudin elit eu nunc placerat et pulvinar mauris condimentum. Donec sed sapien elit, vel condimentum justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ut odio nunc. Maecenas vitae quam urna. Nulla a ante imperdiet sem tincidunt porta. Donec est tellus, imperdiet eget ullamcorper eu, laoreet vel lorem. Fusce ornare nislmollis lacus cursus semper suscipit urna ultricies. Phasellus magna justo, commodo sodales auctor nec, euismod vitae purus.
Vivamus dignissim feugiat tristique. Cras aliquet sapien non justo sagittis imperdiet. In a velit mauris, eu sodales magna. Fusce lectus lectus, blandit non semper vitae, cursus ut purus. Vestibulum quis aliquam augue. Morbi id est sed diam imperdiet pretium vitae a turpis. Sed vel sapien arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac diam ut ante imperdiet lacinia. Integer sit amet justo sit amet tortorfacilisis id sit amet augue. Etiam in risus vel erat molestie viverra. Suspendisse pellentesque bibendum sagittis. Etiam convallis leo at dui ornare eget elementum odio dictum. Integer tempus ultricies lectus. Maecenas dictum ipsum id nisl adipiscing eu iaculis tortor suscipit. Etiam sed sapien neque, in ultricies magna. Aliquam in nisl et lectus bibendum vestibulum. Donec suscipit, velit vitae convallis accumsan, tortor magna dignissim purus, sed convallis orci tortor sed sem. Cras quis est id turpis congue porta. Proin pharetra mattis nulla quis vestibulum.
Ut in sapien id mauris egestas rhoncus a eget erat. Vivamus tempor tempus quam facilisis dapibus. Curabitur volutpat ipsum vitae tortor tincidunt sed malesuada urna tincidunt. Quisque porttitor, neque id malesuada faucibus, quam leo auctor nisl, quis aliquet enim ligula ut odio. Etiam vel turpis magna. Cras iaculis est sem. Pellentesque malesuada, libero eu tempor tempor, tellus ipsum dignissim sapien, id facilisis augue ipsum vitae quam. Cras quis imperdiet leo. In orci purus, placerat ac ultricies in, elementum vitae turpis. Nunc lectus sapien, sagittis id luctus ut, hendrerit ut massa. Sed purus sapien, pharetra id faucibus nec, semper id lacus. Phasellus et lectus leo, eget
adipiscing lorem. Donec fermentum lacus dolor. Etiam laoreet tristique nisi, sit amet convallis nunc lacinia et. Integer aliquam, magna ac porttitor congue, est libero consectetur lacus, lobortis porta orci risus nec magna. Integer sapien purus, volutpat sit amet vehicula vitae, accumsan a felis. Sed a nulla vel enim laoreet consequat. Nulla ut neque massa, at semper enim.risus nec magna. Integer sapien purus, volutpat sit amet vehicula vitae, accumsan a felis. Sed a nulla vel enim laoreet consequat. Nulla ut neque massa, at semper enim.
<RichTextBox OverflowContentTarget="{Binding ElementName=overflow1}"><RichTextBoxOverflow x:Name="overflow1" OverflowContentTarget="{Binding ElementName=overflow2}"><RichTextBoxOverflow x:Name="overflow2" OverflowContentTarget="{Binding ElementName=overflow3}">...
Text Clarity
Sharpens text by snapping with pixelsGreat for low res devices
Vector
Bitmap
Shapes
Text
0 100 200 300 400 500 600 700 800
Spool Time
BitmapVector
(milliseconds)
Vector Printing
Shapes
Text
0 20 40 60 80 100 120 140
File Size Sent to Printer
BitmapVector
(MB)
Trick PlayWhere did they joke about…
Speed through videos, search for soundsNew dimension to searchNo “Alvin & The Chipmunks”
Unrestricted File AccessSL5 trusted
apps can access:
SL4 trusted apps
can access:
Unrestricted File Access
demo
Agenda
Unrestricted File AccessTrusted Apps In-BrowserGroup PolicyP/InvokeHTML supportMultiple Windows64-bitPivotViewer
Trusted Apps
SL4: OOB apps run trusted with user consentSL5: in-browser trusted apps with admin consent
Set permissions via group policyNo prompts or installsFamiliar navigation modelCan be part of a larger HTML site
Trusted Apps
SandboxedApp
Trusted SL4 App
TrustedSL5 App
Prompt-free No Yes Yes
Cross domain networking No Yes Yes
Full keyboard in full screen mode
No Yes Yes
COM No Yes Yes
Unrestricted file access
No Kinda Yes
P/Invoke No No Yes
Run in-browser No No Yes
Creating a Trusted App
Just like SL4 trusted OOB
<OutOfBrowserSettings> <OutOfBrowserSettings.SecuritySettings> <SecuritySettings ElevatedPermissions="Required" /> </OutOfBrowserSettings.SecuritySettings></OutOfBrowserSettings>
Creating a Trusted App
Sign the .xapSame as for a trusted OOBIn Visual Studio or on command line
signtool.exe sign /v /f nameOfCert.pfx /p "<password>" nameOfApp.xap
or
Agenda
Unrestricted File AccessTrusted Apps In-BrowserGroup PolicyP/InvokeHTML supportMultiple Windows64-bitPivotViewer
Permissions in Group Policy
Actually, only one permission – trusted or notNetwork admin specifies which publishers are trusted
Publishers identified by Authenticode certificatePut certificate in client machine’s trusted publisher storeSame as ClickOnce
Xaps are associated with publishers by Authenticode
Agenda
Unrestricted File AccessTrusted Apps In-BrowserGroup PolicyP/InvokeHTML supportMultiple Windows64-bitPivotViewer
P/Invoke
P/Invoke lets you call native codeCOM (SL4) also lets you call native code
Anything you can do with COM can also be done with P/Invoke
Strongly typedNo COM registration
P/Invoke is optimized for Win32 APIs & native C/C++ codeCOM is optimized for COM Automation APIs, eg Office
COM & P/Invoke are available on Windows to trusted apps
P/Invoke
Works exactly like it does in .NET Framework
[DllImport("kernel32.dll")]static extern int GetDriveType(string lpRootPathName);…int type = GetDriveType(drive);
Unrestricted File AccessTrusted Apps In-BrowserGroup PolicyP/InvokeHTML supportMultiple Windows64-bitPivotViewer
Agenda
Unrestricted File AccessTrusted Apps In-BrowserGroup PolicyP/InvokeHTML supportMultiple Windows64-bitLots of 3D Stuff
Agenda
Multiple Windows
System.Windows.Window is now an instantiable class
Window w = new Window();w.Height = 400;w.Width = 600;w.Content = new MyUserControl();w.Visibility = Visibility.Visible;
Multiple Windows
demo
Unrestricted File AccessTrusted Apps In-BrowserGroup PolicyP/InvokeHTML supportMultiple Windows64-bitPivotViewer
Agenda
64-bit Support
64-bit machines & apps are becoming increasingly commonSL5 can run in a 64-bit process
64-bit browsersSidebar on 64-bit Windows
Why 64-bit is interesting:Because you don’t get to choose the browserBecause you’re native hosting in a 64-bit processBecause you need a lot of address space
3D Target applications
Data visualization*3D charts and reportsScatter pointsGeographic overlaysScience & astronomy
Education & trainingMarketing & advertising
Business*ManufacturingIndustrial processesHome designRealty & virtual toursCustomer support
MedicalGames & simulation
* Enterprise focus for Silverlight 5
3D Demo
demo
Silverlight 5 Summary
Adding productivity & robustness withAdvanced styling and templatingDatabinding Enhancements & DebuggingBetter Text & Printing Improved trusted and native interop
Enabling Next Gen MediaSilverlight 5 ships second half 2011
Resources
Silverlight.netWCF RIA Services Page: http://silverlight.net/riaservices
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION
IN THIS PRESENTATION.
Top Related