Getting the Beta for Silverlight 2

Just so everyone knows here are the bits:

http://www.microsoft.com/downloads/details.aspx?FamilyId=E0BAE58E-9C0B-4090-A1DB-F134D9F095FD&displaylang=en

Download links from MIX 08 - Silverlight

here is a link to a list Tim pushed to his blog with all the download links:

http://blogs.msdn.com/tims/archive/2008/03/05/download-links-for-mix08-announcements.aspx

Silverlight MIX Announcement(s)

In the keynote today Scott G annouced SL 2. is publicly available. very cool. my favorite part whas how much they showed our Entertainment Tonight work in Silverlight. among my favorite features annouced include (I will skip all the new bits Scott put out on his blog last week):

* support for Silverlight on MAC, Windows, Linux and Mobile devices
* improved preformance especially dynamic adaptive streaming and bit rate throttling, including IIS features to support to provide bit rate throttling.
* Silverlight Add templates in visual studio
* Burning Silverlight right into video using ecoder 2
* Multi-language including Silverlight in Python
* Rich WPF UI framework (layout, databinding, skinning and styling system)
* Robust networking (post, SOAP, WCF, sockets etc.)
* LINQ and Databinding
* Local Store and cache between browser sessions
* Controls include: data grids, list box, sliders, radios, buttons calender and date picker controls, checkboxs etc.
* all controls are being shipped with open source license.
* test framework for silveright.
* control templating stucture including the abilty to change animations, and restructure the visual tree
* full intellisense and design experience in VS
* DeepZoom.... formerly Silverdragon formerly SeaDragon taking smut to the next level allowing arbitrary zooming to any resolution smoothly.
* Silverlight Sharepoint bits to make it easier to put silverlight web parts in sharepoint

SeaDragon (DeepZoom) really is cool with the 2billion pixel size images... :)

IE 8.0 first impressions

So one of the first things we are seeing in the MIX keynote is IE 8.0 which seems to be more about standards and helping developers do better work. So far we got some CSS 2.1 support, HTML 5, in proved perf especially with script, more itegrated debugging tools and visual related tools directly in IE if a user wants. there are better tools for users like being able to select text and IE will provide services tools based on the text. That sounds problematic but seeing it work is really cool. And web slices are cool.

beta 1 is available at:

http://www.microsoft.com/ie/ie8/

MIX 08 - Silverlight - Wish you were here...

Ah MIX... its finally here. Hmm... we will see what kind of coolness comes out of mix. The conference starts wed and since it is sooo late that I got back to my room in the Venetian that it actually starts later today. Anyway I digress. Even though the conference started I have learned alot. I spoke with Laurence (another author of the MS press book Silverlight 1.0) about publishers and our up coming books and the like. Plus there was the Silverligth Insiders 'meeting' such that it was at the V Bar. We can to meet some of the guys we didn't know and talk with some of the guys we did. Adam has blue hair and we will see how the rest goes but we still can't talk about too much. Also Nokia annouced that their phones will support Silveright so i think it is safe to extrapolate that MS is going to get it on windows CE. Oh plus the plane ride up... well I guess I have to save the good stuff for after the key note.

No Soap for you! - The No Silverlight Experience

So I'm collecting hacks for my upcoming book, and I must say, here is a simple one, but one of my favorites... LOL!

On my HackingSilverlight.net (the domain not the feed site), I did not have time to worry about the non-silverlight user and in fact chose to be a bit over-the-top towards them. Personally I find it funny, but I know many people think its just plain mean... but really what is someone doing at a Silverlight site if they don't have silverlight? So to save me from work, here is my on-load function...

function OnLoad()
{
Resize();
try
{
if( !Silverlight.isInstalled("1.0") )
{
var parentElement = document.getElementById("BlogContent");
parentElement.innerHTML = "";
}
}
catch(Exception)
{
alert('NO SOUP FOR YOU!...');
}
}

Note the 'innerHTML' which would normally contain the entire HTML block that makes up all the visible content on the page except the install badge... again I found this extremely funny, but alas, with the book coming, I will probably make it play nice.

Using the Silverlight 2 Xaml StackPanel Element

The next advanced layout element in Xaml is the stack panel. The StackPanel lays out its children either horizontally or vertically without having to define the exact location in the visual tree in Xaml. Take the following listing example of a stack panel.

<StackPanel Width="200" Height="200" Orientation="Vertical" Background="Gray">
<Rectangle Width="50" Height="50" Fill="Green"></Rectangle>
<Rectangle Width="50" Height="50" Fill="Blue"></Rectangle>
</StackPanel>

We can see in this example that we set the size and orientation of the StackPanel. The StackPanel will then start at the root X, Y (0,0) position of its parent by default. Children are then rendered vertically in the panel. Now look at this example StackPanel:

<StackPanel Width="200" Height="200" Orientation="Horizontal" Canvas.Top="200" Background="Gray">
<Rectangle Width="50" Height="50" Fill="Green"></Rectangle>
<Rectangle Width="50" Height="50" Fill="Blue"></Rectangle>
</StackPanel>

In the example we see that the Orientation of the StackPanel is set to Horizontal so its children will be laid out accordingly. When we put both of these StackPanel into some Xaml this is what we get. We can see the first one rendered vertically and the second horizontally.

Using advanced layout, it is easier to create list box functionality or recordsets and using other structures like templates and the like you can pull records data bind and then use StackPanels too easily lay out all the items you need.

Using the Silverlight 2 Xaml Grid Element

"The Grid" is basically just that: a grid with a set number of colums and rows. Elements in the grid must then be placed into a cell within the grid by setting the Grid.Column and Grid.Row property of the element in question. To start using a grid you first need to create a grid node.

Here is a simple example:

<Grid Height="200" Width="200" Background="Red"></Grid>

For us to see what is going on, we set the background value to red and then we set a width and height. The width and height set the boundary of our grid. If we don’t set a top and left value. then grid is laid out relative to the top and left of the parent element that it is in. To use a grid we need to add rows and columns inside of it.

<Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions>

This code creates two rows in our grid, but we still need column definitions to actually use the grid. The following code adds 2 columns, which then gives us a grid of 2 rows by 2 columns which then has a total of 4 cells.

<Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions>

With a complete grid we just need to add something to it to be able to actually see how it renders. Lets see what happens if we add a single rectangle to our grid.

The following code sample creates the simple rectangle set to be in the second column and the second row; we also set the fill value to green.

<Rectangle fill="Green" row="1" Column="1" />

Now when we render this xaml you will see that the grid columns are rows are zero based. Zero based means that the first column is 0 and the second column is 1.



Knowing that the grid columns and rows are zero based, we expected the rectangle to be in the lower right position. What we also see from this sample is that by default an element fills the entire grid that it was assigned to. To overwrite this behavior, you would just need to set values for theheight and width. This is the same for top and left values where the default will be to be aligned with the top left of the assigned cell.

Using the same grid, lets remove the old rectangle and add this canvas and textblock.

<Rectangle Fill="Green" Row="0" Column="0"> <Canvas Height="100" Width="100" Background="Blue" Row="1" Column="1" VerticalAlignment="Bottom" HorizontalAlignment="right"> <textblock>Hello</textblock> </Canvas>

In this case, the rectangle is in the top-left cell. However, we now have added a standard canvas with a text area. The canvas is set to have a width and height of just 100 and placed in the lower right cell where we also set the horizontal alignment and vertical alignment. We also set the background to blue so that we can see what is going on.

In this next figure, we can see exactly how the grid lays out the combined set of the elements we have added.

We can also set Margin and ShowGridLines on the Grid element as needed. This allows us add both of these elements as needed. If desired, we could also set height on the row definition and width on the column. This allows us fine control of cell sizes as needed, otherwise, the grid will equalize things for the size it has been given.

Besides setting exact values with height and width, we can set them to auto or * as well. Lastly, elements in a grid can also use Grid.ColumnSpan to allow elements to span more than one column.

Cat out of the Bag

So I see that a number of places that are 'official' have talked about some features that will be in the new bits for Silverlight 2.0... SO therefore I think it is ok to talk about these. for example Scotts blog at:

http://weblogs.asp.net/scottgu/archive/2008/02/22/first-look-at-silverlight-2.aspx

So expect to see more coolness starting today.

Hacking Silverlight 2.0 for designers and developers

As some of you know, I'm writing a book on silverlight titled, "Hacking Silverlight 2.0" with the help of Manning Press. As some of you may also know, I have not been able to blog too much as of late due to all the super secret stuff on campus at Microsoft. Some day that will stop and I will probably have lots of stuff to post, but in the mean time, I thought I would share the work on the cover of the book. The example of a book cover is a prototype and you can see the entire process Ariel went through to develope the painting we are using for the book cover.

http://www.facebook.com/album.php?aid=25283&l=593e3&id=721326429

Manning, the publisher, has a tradition of putting central European art on the cover... milk maids, stable boys, girls in dress's etc. I could not have something like that. Granted all the art is cool and they do have some interesting bits on the cover of some but I couldn't take the risk of getting a milk maid. So I have something manly and war like and for those that are interested in the painting, here is a little bit about it:

The soldier on the cover is a Polish Winged Hussar a type of Polish Calvary from the 16th Century to the 18th Century. This particular Hussar belongs to the Jordan Family or Domus Giordanous from southern Poland near Krakow. The Winged Hussar Calvary were the best mounted calvary at the time and won most engagements even when outnumbered by huge odds. Case in point, The Battle of Kluszyn against the Russians with 35,000 men against the Polish Crown with just over 6,000 Hussars. Key to this was the armor and heavy weapons and their most common tactic of the charge straight into enemy lines.

Silverlight 2.0 Double Click Support

Ok, ok, I'm not giving anything away so don't get too excited. Check back at some later date. Who knows maybe MIX??? That is like next week.

Anyway, recently, I was told that you can't double-click in Silverlight...

So to me this is a bit hard to respond too. Not because Silverlight doesn't support it, but because if it supports single click or, 'OnMouseDown' -- 'OnMouseUp' or anything similar, then we are good. Basic computer science 101 stuff, right? All you need to do is something like this example.

In my code I create a counter for counting ticks. Say like this in c#:

public long LastTicks = 0;

Then in my 'MouseLeftButtonDown' event I have an 'if' statement that basically checks to see if the number of ticks between the last two mouse clicks is less then some defined number like this:

if ((DateTime.Now.Ticks - LastTicks) < 2310000)
{
// double click
here...
}

...and then at the end of the method, we have a line that sets the LastTicks value like this:

LastTicks = DateTime.Now.Ticks;

Nice and simple. This gives us a good solid double-click that we can do with whatever we need. Now in this sample we are using ticks but we could use any date-comparision thing and use seconds, for example, and we would just have to calculate the differential we want to use. For me it was 23.1 million ticks which seemed to work good on my box :)

Now don't go sending me a billion emails on why we don’t use double clicks in web apps. I'm just saying that it can be done, and a number of people asked. I know very well that double-click is not a good plan generally in a web sort of paradigm.

Cool Tool Kaxaml

I know this guy Robby that wrote this cool Xaml tool... Kaxaml. It alot like Xaml pad with the split view but the coolest thing is the snippets, Xaml scrubber and intellisence. check it out at

http://www.kaxaml.com/

Silverlight 2.0 - more to come

So this is just killing me. So much goodness in the super secret builds that I can't talk about that its just killing me... SOOOO just so you know as soon as it is public there will be LOTS and LOTS of stuff to post that I cant really talk about at all. In fact probably the first day I'll post probalby 50 things plus. Anyway now that 'that' is almost off my chest.

Silverlight Game

Here is a cool silverlight game Tim H. found on silverlight insiders.

http://www.miniclip.com/games/zombomatic/en/

Anatomy of a Silverlight Animation

For the most part we should be using Storyboards to do animations. Though it is possible to do programmatic animation and we do sometimes programmatically set properties the Storyboard infrastructure in Silverlight provides a standard easy to use and optimized way to-do animation and is a key tenet of the Silverlight technology especially around performance.

Storyboards like other elements in Xaml are defined with tags. The Storyboard element then can be a resource or in a trigger. We can also point a Storyboard at a specific element where each animation can target a different property and we can also target each specific animation at a given element and property separately. Let us start with a Storyboard then like this example:

<Storyboard x:Name="MyFirstStoryBoard"></Storyboard>

From this Storyboard we will build out our animations. The individual animations go in the story board. There are several kinds of animations such as color, point, key frame and key spline animations but we will start with point and color animations. Now look at this simple double animation.

<DoubleAnimation Storyboard.TargetName="PolygonElement"
Storyboard.TargetProperty="(Canvas.Left)"
To="48" Duration="0:0:3" />

This is a DoubleAnimation that, when the Storyboard is triggers changes one property value to another over the course of the duration. In this case the animation is targeted on the PolygonElement at the Left value. This animation does not have a ‘From’ setting so the property goes from whatever value it at to the ‘To’ setting and then over the duration of the ‘Duration’ setting in this case 3 seconds. We could also set a ‘BeginTime’ using the same time format as that of the Duration like this code sample:

<DoubleAnimation Storyboard.TargetName="PolygonElement"
Storyboard.TargetProperty="(Canvas.Left)" From="5"
To="48" Duration="0:0:3" BeginTime="00:00:02" />

This animation then targets the Canvas.Left property of the element named ‘PolygonElement’. At 2 seconds past the trigger of the animation it will change the left value from 5 to 48 over the course of 3 seconds. This was a double animation and you can have any number of these in a given story board. You can also use color animations in the same way with double animations. Take this code example:


<ColorAnimation
Storyboard.TargetName="PolygonElement"
Storyboard.TargetProperty="(Fill).(Color)"
From="#3c5f0c" To="#728f4a" Duration="0:0:5" />

Like the double animation earlier this ‘ColorAnimation’ is targeted at the same element but on a different property namely one that is a color ‘Fill.Color’. When this animation is triggered the ‘Fill.Color starts at one color and transforms to the other over the course of 5 seconds.

Silverlight Applications Taking All the Available Realestate

Karim sent me this. It is a simple way make sure you Silverlight Application uses all the available realestate using just CSS:


/* hide from ie on mac \*/
html
{
height: 100%;
overflow: hidden;
}
.silverlightHost
{
height: 100%;
width: 100%;
}
/* end hide */

body
{
height: 100%;
margin-left: 1px;
margin-top: 1px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0;
}


Now there are other ways todo this such as from the HTML body onload event and also the resize event on the window together or other programatic ways but this is just nice and simple and I say keep it simple unless you have to.

Lunch at MIX

Anyone going to MIX that wants todo lunch let me know... I know at MIX there will be alot of 'new' stuff and I will probably have 1000 posts on SL 2.0 at MIX... all stuff that is super secret now...

Drinking the Kolaide

I spend a lot of time on campus at MS and some one made a comment about it something todo with singing songs and drinking coolaide etc and I wanted to set the record straight...



We do not in fact come and sit in a circle, hold hands, sing songs and drink coolaide while having stories read to us.

Silverlight and Volta

Now here is a new Silverlight related technology:

http://labs.live.com/volta/blog/Volta+Secrets+Part+5++Silverlight.aspx

Its on a public site so I guess I can blog about it. They idea is simple, you write your application all in C# like a win form and this thing generates it as part web page part serverside script in now using Silverlight. I'm sure I'll talk about this more after I play with it some more.

Silverlight Browser Windows Communcation

I got this email some time ago but it was in my junk email box. Anyway I finally found it and thought it might be of use to everyone.

Hi DavidThanks for your posting on SilverLight. It helps me a lot.Now I have a challenge technical problem:I have a HTML page as parent window that plays some video clip. Also people can click a link from that page to create some popup windows (child windows). In the child windows, the same video clip from the parent window should be played (content sync).I can do this using a common XAML file that shared among these windows.Now the challenge for me is: the parent window has video control buttons (like play, pause, stop, ...). How to sync the action controls? For example, if the video is stopped in the parent window, the stop should also apply to all child windows. In other words, how to achieve the action sync?I am thinking if it is possible to change the XAML by the parent window on the fly so that child windows can be updated accordingly. I am not sure if this is possible in Silverlight since it seems to me the XAML is a static object. Can you think of a way to accomplish that or shed some light on the issue?
Thanks! Jay
my response:

you would need hold a reference to the child window and call into it from script so basically when you click a button in the parent it would also go call out to script and the child window. For doing this in IE MSDN has a good reference on working with the IE object model to do this. Start by finding window.open and how to keep a reference and make calls. This however I don't think is very cross browser...

Video Brush in 5 minutes or less

The Video brush is a great way to do some cool special effects. To make a video brush work on you have to have a named media element that you can bind to. That has a bound source. In the sample below we have a source. We have set the element to be muted but play and its opacity is 0 so no one sees it on screen. Then we add some text in a text block app and add a foreground element with a ‘video’ brush. The video brush element is bound to the media element by using the media element name. Using a video brush you can basically make just about anything play video.

<MediaElement Name="MediaElementElement" Source="ImenSample.2.wmv" Canvas.Left="20" Canvas.Top="20" Width="100" Height="100" IsMuted="True" AutoPlay="True" Opacity="0" />

<TextBlock Name="Sample Text" FontSize="20" FontFamily="Verdana" FontWeight="Bold" Canvas.Left="10" Canvas.Top="50" Opacity="1" >PAINT WITH VIDEO <TextBlock.Foreground> <VideoBrush SourceName="MediaElementElement" /> </TextBlock.Foreground> </TextBlock>

When this Xaml is rendered we get the text ‘Paint with video’ that is actually playing the video in the background of the text.

Uploading/Hosting Encoder Output and other Silverlight Apps into Silverlight Streaming

Now that we have a streaming account and we created our content with Expression Encoder now lets get it hosted. First we need to find the output which generally is under your documents folder then ‘Expression/Output/’ you will need to remove the .csprog, and .html files and the Silverlight.js and then create a manifest.xml file. With the default your manifest.xml file should look like this:

<SilverlightApp> <version>1.0</version> <loadFunction>StartWithParent</loadFunction> <jsOrder> <js>MicrosoftAjax.js</js> <js>BasePlayer.js</js> <js>PlayerStrings.js</js> <js>player.js</js> <js>StartPlayer.js</js> </jsOrder></SilverlightApp>

Now combine this into a zip at the root of the zip and not in a directory. Once you do that log into the Silverlight streaming site and click ‘Manage Application’ and then click ‘Upload a Silverlight Application’.

Give the application and name and browse to your zip. If anything is missing such as a manifest.xml or you have left the html file or something in the file you will get an error.

This window gives you all the information you need to actually link to your uploaded Silverlight Streaming hosted application.

Microsoft® Media Encoder™ in 5 minutes or less

Expression Media Encoder is a Microsoft tool in the Microsoft Expression Suite of tools specifically designed to take media content and either tanscode/encode it or produce in a form that can be consumed online in the form of some kind of Silverlight media player and WMV and to integration with Silverlight Streaming services. Expression media encoder has a number of built in templates for use in quickly building Silverlight media players. Once you get the application up and running, and you stare at it for a few minutes to get oriented it is pretty straight forward.

From the initial screen we need to import our media file. Go to the file menu and select import, navigate to the video file you want and selection ‘open’. Next we need to select a template which you can do by selecting output and then under the section ‘Job Output’ select one of the templates. You should see a shot from your video in the main area.

Now just click the button in the middle on the bottom and Encoder will go to town. Now this is all good and Media encoder has a bunch of other features around setting up markers and the like but the really key thing is that it gets video content into a nice format that Silverlight can consume.

http://www.microsoft.com/expression/products/overview.aspx?key=media

Silverlight Streaming in 5 minutes or less

Microsoft as part of the whole Silverlight ‘thing’ has provided a service to allow people to upload videos and get those video streamed along with providing other video streaming services. At the time of me writing this book it is a free service up to 4 gigs of space/video and streams video up to 700kpbs but as it goes into beta and is released you get advertising or you pay a ‘nominal’ fee but for developer’s and designers this is really cool and for companies this makes live a bit easier if you want to stream video content from you web site but don’t have a streaming media service.

A couple of key points of the streaming media service is to enable rapid application development, to be able to deliver quickly streaming media solutions and to be able to provide unlimited scaling should the need arise of your streaming content. The provide admin tools, a REST API, documentation and other tools online for your application development. Currently there are issues with Silverlight all living in the same domain so your bits out on Silverlight streaming need to be ‘all’ your bits but you can embed them in an iframe or separate window and pass in query string values etc. You can check out the service at :

http://silverlight.live.com/ or

http://www.microsoft.com/silverlight/streaming.aspx#1_4

So let us set up an account, starting from Silverligth.live.com.

Next we click on ‘get it free’. At some point a paid service will be available. But for now it is not.

Click the ‘click here’ link to go onto creating our streaming account.

If you don’t have a live id you will have to go through the registration process if you do then you can just login to create your account. In this case I do have such an id and I login and created my Streaming account and then the screen should look like this after logging in.
So when you click ‘I Accept, Create Account’ you then have your account.

This screen show your public account id and account key. You will want to know these later when we upload some content using the Microsoft Media Encoder. You can learn more about Silverlight Streaming at:

http://dev.live.com/silverlight/

So From here we are ready to for my next post on media encoder.

Childrens Book...

So this isn't exactly Silverlight but it is extremely funny...

http://gizmodo.com/photogallery/microserveces08/1000446145

I would love to turn this into a online 'silverlight' app.