person vehicle calendar people vehicles tax orders shipping schedules presentation logic not...

Building In Browser Experiences with Silverlight 5Steve Lasker

Lead Program ManagerMicrosoft Corporation

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

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"

Source={StaticResource MyAppStyles},

Value="{Binding ForegroundColor}"

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<ListBox ItemsSource="{Binding States}“ ItemTemplate="{StaticResource StatesDataTemplate}“/>

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>

<ListBox ItemsSource="{Binding Vehicles}“ ItemTemplate="{StaticResource VehicleDataTemplate}"/> <Application.Resources> <ResourceDictionary> <DataTemplatex:Key="vehiclesDataTemplate">

DataType="models:Vehicle"> <Image Source="Vehicle.png"/> </DataTemplate> </ResourceDictionary></Application.Resources>

<ListBox ItemsSource="{Binding States}“ ItemTemplate="{StaticResource StatesDataTemplate}"/> <Application.Resources>

<ResourceDictionary><DataTemplate x:Key="stateDataTemplate">

DataType=“models:State"><Grid>

<StackPanel Orientation="Horizontal"><TextBlock Text="{Binding StateCode}"/><TextBlock Text="{Binding StateName}"/>

</StackPanel></Grid>



<Application.Resources><ResourceDictionary>

<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"/>

MVVM Enhancements


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


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


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)


ViewModel (VM.cs/vb

Services Models

Custom Markup Extensions

How do I get my event handler code out of my Code Behind

demo

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}"

public partial class AppointmentsViewModel {

private void OnAppointmentChanged( ) { this.DataService.GetClaimById(GetClaimsCallback, this.SelectedAppointment.Claim_Id);} private void GetClaimsCallback(ObservableCollection<Claim> claims) {

this.SelectedClaim = claims[0];

public void GetClaimById(Action<ObservableCollection<Claim>> callback, string claim_Id) {var query = DataContext.GetClaimByIdQuery(claim_Id);_getClaimCallback = callback;_claimLoadOperation = DataContext.Load<Claim>(query);…

UI (XAML)


ViewModel (VM.cs/vb

Services Models

Custom Markup Extensions

How do I get my event handler code out of my Code Behind

Data

<ListBox x:Name="appointmentsListbox"ItemsSource="{Binding Appointments}"

SelectionChanged="{helpers:MethodInvoke Method=OnAppointmentChanged}”>

MVVM Enhancements


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;}

Coming Soonpost beta

MVVM Enhancements


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)


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

Silverlight 5 Adds PropertyChangedMoving code to your testable ViewModel

demo


UpdateSourceTrigger

Moving code from the UI to the testable ViewModel

<TextBox Name="vinTextBox"Text="{Binding SelectedClaim.InsuredVIN, Mode=TwoWay}"UpdateSourceTrigger=PropertyChanged}"

UI (XAML)


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);


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;

…

MVVM Enhancements


WCF RIA Services SP2 for Silverlight 5

announcing

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


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}">...demo

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”

demo


Silverlight 5 Summary

Adding productivity & robustness withDatabinding Enhancements & Debugging

Better Text & Printing Enabling Next Gen Media Players

Silverlight 5 ships second half 2011

Binding In Style SettersImplicitDataTemplatesRelativeSource Ancestor BindingsCustom Markup ExtensionsDatabinding DebuggingBinding to Custom ObjectsDataContextChanged Event*UpdateSourceTrigger*WCF RIA Services EnhancementsText, Printing* & Media*

*coming post beta

Additional Sessions

WednesdayGraphics & 3D with Silverlight 53:30 PM w/Aaron Oneal Tips for Improving Performance in Silverlight Applications5:00 PM w/Mike Cook

ThursdayAdvanced Features in Silverlight 53:00pm w/Nick Kramer

Questions?

Please provide us feedback on the beta!

http://forums.silverlight.net/[email protected]://Blogs.MSDN.com/SteveLasker

mailto:[email protected]



http://blogs.msdn.com/SteveLasker

http://blogs.msdn.com/SteveLasker

Resources

WCF RIA Services Page: http://silverlight.net/riaservicesSilverlight.net

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.

person vehicle calendar people vehicles tax orders shipping schedules presentation logic not...

Documents