Silverlight Control Roadmap

Shawn BurkeProduct Unit ManagerMicrosoft Corporation

PC35

Introducing the Controls Team How we ship code PDC Controls

Controls from WPF New Controls

Styling support Future Plans

MIX Controls WPF work

Introduction

Controls Team dedicated to driving controls on WPF and Silverlight Will deliver a “Silverlight Toolkit” and “WPF

Toolkit” Goal is to ship controls frequently, out of

band from major releases Ship with source, unit tests, and samples Best/most used controls will be delivered

into platform

Focusing on Controls

Delivery Model

CodePlex Project

New Controls

Iterative releases (6-8w)

Component “Quality Bands”ExperimentalPreviewStableMature

SDK/Tools Release

• Customer Feedback Driven• May include new components• “No-brainer” upgrade

• “Mature” band controls delivered with SDK/Tools

• Customers can replace with CodePlex release for full control package

Core RuntimeSome controls may move to core runtime

Silverlight Toolkit Walkthrough

demo

DockPanel WrapPanel TreeView Expander Label ViewBox HeaderedContentControl HeaderedItemsControl

WPF Partity Controls

DockPanel docks children to a particular side via an attached property

IsLastChildFill property sets last child to fill remaining space

DockPanel

LeftTop

Right

Using DockPanel

 <controls:DockPanel LastChildFill=“False” >

     <Border controls:DockPanel.Dock="Left“ Background="Yellow" Width="100"/>

     <Border controls:DockPanel.Dock="Top“ Background="Green" Height="100"/>

     <Border controls:DockPanel.Dock="Right" Background="Purple" Width="100" />

 </controls:DockPanel>

As Above: Reverse Order:

Expander allows the expand/collapse of content in one of four directions

Has Header and Content area

Expander

Using Expander

<controls:Expander ExpandDirection="Down" Header="Tasks">

<Border Width="100" Background="#BFFFFFFF" BorderBrush="#FF000000" CornerRadius="3,3,3,3"

BorderThickness="1,1,1,1"> <StackPanel> <HyperlinkButton Content="Do this" FontSize="14"/> <HyperlinkButton Content="Do that" FontSize="14"/> <HyperlinkButton Content="Do it all" FontSize="14"/> </StackPanel> </Border> </controls:Expander>

TreeView allows a nested hierarchy of templatable nodes

Each node is a HeaderedItemsControl

TreeView

Using TreeView

<controls:TreeView SelectedValuePath="Classification”> <controls:TreeView.ItemTemplate> <controls:HierarchicalDataTemplate

ItemsSource="{Binding Subclasses}"> <StackPanel> <TextBlock Text="{Binding Rank}"

Foreground="Gray" Margin="0 0 0 -5" /> <TextBlock Text="{Binding Classification}" /> </StackPanel> </controls:HierarchicalDataTemplate> </controls:TreeView.ItemTemplate> </controls:TreeView>

New controls for Silverlight at PDC: AutoComplete Charting NumericUpDown

These controls will be made available on WPF WPF versions will take advantage of WPF

capabilities where appropriate

New Silverlight Controls

AutoComplete

Standard AutoCompleteItemsSource set to a list of stringsIsTextSearchEnabled is set to true

Easy to style with data templatesItemsSource is a set of Photograph objectsCustom DataTemplate

Very customizableCan use an adapter to put anything inside the drop down – including a DataGrid

Above: an AutoComplete ComboBox control (custom template)

Using AutoComplete

<controls:AutoComplete MinWidth="300" MinimumPrefixLength="1" MinimumPopulateDelay="0" ItemsSource="{StaticResource MonthsObjectCollection}"/>

Charting

Supports Line, Pie, Column, Scatter charts Heavy focus on architecture allows easily

adding more chart types Chart types are extensible, templatable

Using Charts

<controls:ObjectCollection x:Key=“AssetValues"> <local:Assets Type="Stocks" Value="10000“/> <local:Assets Type="Bonds" Value="2124“/> <local:Assets Type="Cash" Value="22000“/></controls:ObjectCollection><charting:Chart><charting:Chart.Series> <charting:ColumnSeries ItemsSource="{StaticResource BasicValues}"

DependentValueBinding="{Binding Value}" IndependentValueBinding="{Binding Type}"

Title="Portfolio“> </charting:ColumnSeries></charting:Chart.Series></charting:Chart><charting:Chart ><charting:Chart.Series> <charting:PieSeries ItemsSource="{StaticResource BasicValues}“ DependentValueBinding="{Binding Value}" IndependentValueBinding="{Binding Type}" Title="Portfolio“> </charting:PieSeries></charting:Chart.Series></charting:Chart>

Controls in Action

demo

Challenge: make it easy to theme an application in Silverlight Silverlight doesn’t currently support WPF’s

‘implicit styling’ functionality New pack of 6 themes work with ISM to

easily theme your application

Styling Support

Before: After:

Applying Themes

<UserControlxmlns:barberred="clr-namespace:Microsoft.Windows.Controls;

assembly=Microsoft.Windows.Controls.Theming.BarberRed“/>

<barberred:BarberRedTheme><StackPanel Grid.Row="0" Orientation="Horizontal">

<CheckBox Content="CheckBox"/> <Button Content="Button" Height="22" Width="43"/> <ComboBox Height="22"

ItemsSource="{StaticResource stuff}“/> <RadioButton Content="RadioButton"/> </StackPanel>

< … /> </barberred:BarberRedTheme></UserControl>

Styling

demo

Updating the Silverlight Toolkit

Already working on update release Fix major issues Add new components that didn’t make it into PDC

Accordion ListView

Charting improvements Designer (Blend, VS) experience improvements Integtration of SDK controls

Tab GridSplitter Calendar DatePicker

Proposed Controls – MIX09

Below is our current thinking – not set in stone at this point

MIX Timeframe MediaPlayer TimePicker Carousel Rating MaskedTextBox

Proposed Controls – Future

InPlaceEditing AppointmentCalendar ImageMap FileUpload Menu Slideshow

WPF Plans

Charting, AutoCompleteBox on WPF Aligning work with WPF team on Ribbon,

DataGrid, DatePicker Themes for WPF Committed to delivering value on WPF and

Silverlight

Evals & Recordings

Please fill

out your

evaluation for

this session at:

This session will be available as a recording at:

www.microsoftpdc.com

Please use the microphones provided

Q&A

© 2008 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.