Welcome to besug the belgian silverlight user group
Sponsored Links
This presentation is the property of its rightful owner.
1 / 37

Welcome to BESUG The Belgian Silverlight User Group PowerPoint PPT Presentation


  • 55 Views
  • Uploaded on
  • Presentation posted in: General

Welcome to BESUG The Belgian Silverlight User Group. Gill Cleeren Microsoft Regional Director Benelux MVP ASP.NET Software architect Ordina Blog: www.snowball.be Mail: [email protected] Welcome to BESUG!. Silverlight… What is it? XAML With a Visual Studio/Blend demo

Download Presentation

Welcome to BESUG The Belgian Silverlight User Group

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Welcome to BESUGThe Belgian Silverlight User Group

Gill CleerenMicrosoft Regional Director BeneluxMVP ASP.NETSoftware architect Ordina

Blog: www.snowball.be

Mail: [email protected]


Welcome to BESUG!

  • Silverlight… What is it?

  • XAML

    • With a Visual Studio/Blend demo

  • Silverlight 2 features

    • Controls demo

  • Showcasing

  • Q&A


Silverlight… What is it?


Microsoft Silverlight is a cross-browser, cross-platform implementation of .NET for building and delivering the next generation of media experiences & rich interactive applications for the Web.


3 Ps of Silverlight

Productivity

Performance

Portability


Silverlight givesyouproductivty


Silverlight givesyou performance


Silverlight givesyouportability


Whycan’t we befriends?

Designer

Developer


Again… Whycan’t we befriends?

Request

Designer

Developer

Logic

User interface

Data sources

User interface

Logic

Response


Let’sbefriends…

XAML

XAML

Designer

Developer


A word on the developerexperience

  • Full CLR

  • Trimmed-downversion of .NET classlibrary

  • Full support from Visual Studio 2008 usingtemplates


A word on the designer experience

  • ExpressionBlend is the tool for designers (sometimesdevelopers as well!)

  • Gradients, blurs, animations… all the stuff designers like!

  • Automaticallycreates XAML

  • Project schema is samefrom Visual Studio


Someother important talkingpoints

  • Remember: it’s a client-sidetechnology

    • Requires plug-in to beinstalled (Lessthan 5MB)

  • Buildfor web and desktop (WPF)

  • Richcontrol set, best forLOBs

    • Seefurther

  • Supports HD playback


Silverlight Roadmap

  • Silverlight V1 Shipped Q307

  • Silverlight V2 Shipped a few weeks back

  • Silverlight control toolkit shipped last week

    • More being added constantly

    • Goal is at least 50 controls

  • Silverlight for mobile is coming

    • Same code running on mobile devices


XAML

  • XAML = eXtensible Application Markup Language, pronounced as “Zammel”


Fastest-ever XAML course

<Grid>

<TextBlockFontSize="32" Text="Hello world" />

</Grid>

  • =

TextBlock t = new TextBlock();

t.FontSize = 32;

t.Text = "Hello world";


Fastest-ever XAML course

<Rectangle Canvas.Top=”25” Canvas.Left=”25” Width=”200” Height=”150”>

<Rectangle.Fill>

<SolidColorBrush Color=”Black” />

</Rectangle.Fill>

</Rectangle>

<Rectangle Width=”200” Height=”150” >

<Rectangle.Fill>

<LinearGradientBrush StartPoint=”0,0” EndPoint=”1,1”> <LinearGradientBrush.GradientStops>

<GradientStop Color=”Red” Offset=”0” />

<GradientStop Color=”Black” Offset=”1” /> </LinearGradientBrush.GradientStops>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>


Attached Property Syntax

<Canvas>

<RectangleCanvas.Top="25"/>

</Canvas>

  • Top property only make sense inside a Canvas

  • When we add new container panels, do we have to add new properties to Rectangle?

  • Solution: Use attached properties to add flexible, container specific customization


Code-behind

  • Name your controls so you can use it in code

    • Visual Studio automatically declares field for all x:name elements

<Button x:Name=“MyButton”/>

public void Page_Loaded(sender, MouseEventArgs e)

{

MyButton.Content = “Push Me!”;

}


More code-behind

  • Event handlers can be wired up declaratively in XAML:

  • Or explictly within the code-behind file

    • VB – using the "Handles" keyword

    • C# -- programmatically within the Page_Loaded event handler

<Button x:Name=“MyButton” Content=“Push Me” Click=“MyButton_Click“/>

public void MyButton_Click(object sender, RoutedEventArgs e) {

// todo: add code

}


A finalnote…

UseXAML wherepossible!Otherwise, you’llget a team

of sad designers

and developers…


Blending it all together: A demo!

Using Visual Studio 2008 and Blend 2


Silverlight 2 Runtime Features

  • 2D, Graphics

  • Audio, Video

  • Animations

  • Text, Text Input

  • Controls

  • Layout

  • Styles/Templates

  • Data Binding

  • Networking

    • HTTP/S and Sockets

  • .NET Support

    • C# and VB.NET

  • LINQ

  • XML APIs

  • Generics

  • HTML Integration

  • Local storage

  • Crypto APIs (AES)

  • Threading


Controls and the controls toolkit

  • A control: Re-usable UI elements that encapsulate UI and behavior and enable re-use and composition

    • Vitalfor building business applications

    • Notavailable in Silverlight 1.0!

  • Controls toolkit: Out-of-band release (open-source) of extra controls via www.codeplex.com/silverlight


Some Built-in Controls in Silverlight 2

  • Core Controls:

    • Border

    • Image

    • MediaElement

    • MultiScaleImage

    • ToolTip

    • ScrollViewer

    • Dropdown list

  • Navigation Controls:

    • HyperlinkButton

    • Popup

  • Form Controls:

    • TextBox

    • Button

    • Toggle/Repeat Button

    • CheckBox

    • RadioButton

    • ListBox

  • Layout Controls:

    • StackPanel

    • Grid / GridSplitter

    • Canvas

  • Large Controls:

    • Calendar

    • DataGrid

    • Slider

    • DateTimePicker

  • Shapes:

    • Ellipse

    • Rectangle

    • Line

    • TextBlock

    • Path


Sample control usage

<Button x:Name=“MyButton” Content=“Push Me” Width=“150” Height=“50” />

Button b = new Button();

b.Width = 150;

b.Height = 50;

b.Content = “Push Me";


Controls toolkit

  • Collection of Silverlight controls, components and utilities made available outside the normal Silverlight release cycle

  • Community driven: source is available, you can submit bugs and feature requests

  • First release contains:

    • Source

    • Unit tests

    • Samples

    • Documentation

    • 12 new controls for charting, styling…

    • Theming


Controls toolkit example

  • AutoCompleteBox

  • NumericUpDown

  • Viewbox

  • Expander

  • ImplicitStyleManager

  • Charting

  • TreeView

  • DockPanel

  • WrapPanel

  • Label

  • HeaderedContentControl

  • HeaderedItemsControl


Theming support

Shiny Blue

Shiny Red

RainierPurple

Rainier Orange

ExpressionDark

ExpressionLight


Silverlight 2 controls

Standard controls and the control toolkit


Silverlight In Action

Showcasing


Summary

  • Silverlight is a platform for building RichInteractiveapplications

  • Strong tooling support, bothfordevelopers and designers withworkflowbetween the 2

  • Extendedcontrol toolset thatwill keep ongrowing


Resources

  • General

    • www.silverlight.net

    • weblogs.asp.net/scottgu

    • blogs.msdn.com/tims

    • silverlight.net/blogs/jesseliberty

  • Personal

    • www.snowball.be

    • [email protected]


Q&A

Gill CleerenMicrosoft Regional Director BeneluxMVP ASP.NETSoftware architect Ordina

www.snowball.be

[email protected]


Thank youThe Belgian Silverlight User Group

Gill CleerenMicrosoft Regional Director BeneluxMVP ASP.NETSoftware architect Ordina

www.snowball.be

[email protected]


Ifyou are interested…

  • Want to help us?

  • Want to join?

    Register @ www.besug.be

    orsend mail to [email protected]


  • Login