MIX10 Keynote: Silverlight and Windows Phone 7

Yesterday there was a unique event on Schiphol Airport in the Netherlands.

What?? Your title says you’re talking about MIX10??

Just read on, it is about MIX10. Microsoft Netherlands organized, for the first time, an official get-together for a small group of people to come together and watch the MIX10 Keynote and I was fortunate to be one of those people. This article is about the keynote and the event in the Netherlands.

The arrival

As I arrived, I was expecting to be early, but to my surprise there were already about twenty people in the lobby waiting to get to the conference room where we would watch the keynote. It struck me that this was not your typical group of developers, but more a mix of different stakeholders for the information that was going to be released. I guess that’s why they call it MIX :-).

After a couple of minutes we were escorted to the conference room where, with about 35 people we would watch the keynote. I expected more people than that, but it was a bit short notice to get a larger group together. I received my invitation on Friday.

Pre-keynote

As we entered the conference room the live feed to Las Vegas was already displayed on the beamer and we could watch the performance of the world champion in JoJo’s. Sure, it was impressive, but I did get bored about 2 minutes into that and there was at leas another 10 minutes to go.

The Keynote!

Obviously the keynote is always presented by one of the top people at Microsoft and this year it was Scott Guthrie. I was pleased as it wasn’t some commercial hot-shot who can’t go into technical details. I have great respect for Scott. He seems to know what he’s doing :-).

The first couple of minutes where all about Silverlight and the successes it has had recently. I was seriously impressed with the Winter Olympics case that was presented and I was more impressed with the fact that the source for this is being open sourced on CodePlex.

There was also the eBay demo, where they announced a Silverlight app to more easily list items. It looked smooth, but the one question that stuck was, why didn’t you do that a year ago? The technology was already there. It would have been almost just as easy in Silverlight 3.

Next was the obvious announcement of Silverlight 4 RC. The announcement that Silverlight 4 RTM will follow next month wasn’t a great shocker as well. I was happy to hear that upgrading from Expression Blend 3 to 4 is going to be free.

After this there where some demos of the Windows Phone 7. I’d seen what the Windows Phone would look like before, so I wasn’t so interested, until an announcement was made that Silverlight 4 is the major platform for the Windows Phone 7. There where demo’s and that’s great. Scott slapped together the first second tweeter app in under eight minutes and with that displayed, not the power of the Windows Phone, but the power of the Silverlight platform. For Silverlight developers it also became obvious that the model that we all know and love, is no different for the Phone.

Another great thing that came across from the demos was the emulator. It looked like it would work easily, fast and exactly the same like the actual device.

Oh, and yes, there is the Marketplace where you, as a developer, can post your Silverlight applications, decide how you want people to experience the trial version and you can start selling your app. Details are still a bit sketchy, but there will be the opportunity to monetize your apps, either through selling or through advertizing.

When they announced that the tools for developing Windows Phone 7 applications in Silverlight are, and always will be free, it all came together. This is a full frontal attack on both the iPhone and the Android platform.

The other platform

To enable developers of games to provide a greater experience, Microsoft announced that the XNA platform is fully supported on the Windows Phone 7, including XBOX Live integration. Now you can port your XBOX game to the PC AND to the Phone with a minimal amount of work. Simply a great achievement.

Some demos where given, showing games across platforms and showing off the XBOX Live integration. It looked like a powerful platform for games, which, to me as a consumer, is a great asset.

After the keynote

After the keynote ended, there was a short break with drinks and discussion about what was presented. I found out there where both Silverlight adepts and Windows Mobile developers and business owners in the room, which explained the somewhat unusual mix of people.

We where then invited to have some of the dutch people attending MIX10 in person to do a Q&A. One thing that stuck was that the model you develop in in Silverlight is the same for the Phone. There where some tough questions about the Marketplace, which seems still a bit obscure at the moment, more announcements should be available later this week. Also there where questions about push notifications through a server platform. These will be provided for free.

After about an hour of Q&A we all had some pizza and talked some more about the proposition Microsoft has for the mobile market.

Conclusions

So Microsoft is taking on the mobile market, directly attacking both the iPhone and the Android platform. The big question remains, will they succeed? If you look at the philosophy behind the new Windows Phone 7 platform, then you have to conclude it is a better thought out platform than both the iPhone and the Android platform.

The iPhone actually looses the battle in terms of usability as there is no structure holding together the applications on the phone, were as the Windows Phone 7 supplies hubs centered around tasks you want to do with your phone. Microsoft did a good job taking a long hard look at the iPhone, though. They took what are considered the strongest points on the iPhone and incorporated them into their own platform. This includes the single custom application model, the capacitive touch screen and the all important marketplace.

In comparison with the Android platform it should be easy. Android allows users to run as many processes in the background as they like and shuts down those processes when the OS determines they are no longer used. This sounds like a great plan, but in practice turns out to be a real headache for the user. It seems to be going in the direction that Windows Mobile was heading. The only huge advantage Andriod has is that it’s open. This means that any vendor, any developer and any operator can do Android. Microsoft has given a very strict set of specifications that phones need to adhere to.

Basically they chose to be in between the choices made for the iPhone, one vendor, limited operators and limited developers resulting in a smooth user experience, and the choices made for the Android, unlimited vendors, operators and developers resulting in a not so great user experience.

Looking at the above and at how the platform is easier monetized because of the limited investments, the only potential issue that Microsoft has, it that they are late. On the other hand this may work to their advantage. Everyone experienced the good and bad of the other platforms before Microsoft comes with a more balanced solution. The future will show us.

A final word as a Silverlight Developer. Thank you, Microsoft, for making my personal investments in Silverlight worth while. And thank you, for providing us with free tools.

Adventures while building a Silverlight Enterprise application part #21

I came back from a short vacation today and read this post from Tim Heuer. I then realized that in all twenty parts I've written on our adventure of building a Silverlight Enterprise application, I've actually never elaborated about why and how we chose Silverlight and how we (or at least I) learned to use Silverlight technology. So now seems as good a time as any.

Let's be a lazy author and just follow the questions that Tim put up there.

Decision resources
Obviously when you go about to start a project you have to decide on what you are going to use and why. If you are looking at Silverlight, what factors into your decision?

In our case, one of the most important topics was to move from a client-server based solution with a (very) fat client to a multi-tier solution with a web based client. The first choice was to go with DotNetNuke as some experience was already available, however, as you may very well know, this uses regular ASP.NET Ajax like solutions, which we found very limiting in UI perspective. At the time Silverlight 2 was just about to come out of the Beta stage and we felt we should at least take a good hard look at it. We needed to have technology that was relatively easy to implement and yet have enough flexibility to make for a very useful UI.

So our major decision factors where:

1. UI possibilities / user friendliness
   
2. Development speed
3. Flexibility

Why did your company choose to adopt Silverlight (or choose not to)? Was there another technology that was chosen to be better? Why/why not?

We choose to go with Silverlight because it checked the boxes on the above list. We felt it was easier to build a good user friendly UI with Silverlight, in comparison with ASP.NET / Ajax. Also we experienced in our prototyping / prove of concept face, that building a UI with Silverlight is taking less time as well, because of the use of XAML and C# only. No HTML or JavaScript code made live a lot easier for us.

Another elementary aspect of Silverlight proved valuable to us. It was the fact that you can embed controls inside other controls and work with templating. In combination with declarative databinding this became an important topic for us during decision making.

Again we where comparing to DotNetNuke, which had some advantages over Silverlight as well. One of the things that DotNetNuke had which was considered an advantage, is the fact that you could than access the database directly from your client side code. In hindsight I'm glad that we can't do this with Silverlight and just have all the logic in a service layer. This proved to be much more flexible for a lot of scenarios we already ran into.

What is the most important thing in deciding if Silverlight is right? Feature set? Existing technologies? Rapid development? Other reasons?

At the time, Silverlight 2 was not exactly existing technology as it was just coming out of Beta. This was a concern for us, but the fact that this was Silverlight 2 and that there was already an active and growing community, combined with the fact that Microsoft had plans for updates layed out already, pulled us across. The feature set was definitely important. The way databinding is implemented is important to us, as we are building a data rich application. Also the controls available at the time as default, but also trough the Silverlight Toolkit and the fact that third party companies literally jumped at Silverlight 2 helped easing the choice even further.

Rapid development was obviously something that needed prove as no real world examples where available at the time. We build prototypes of several scales and found that it was indeed fast enough to build something with Silverlight 2, even without experience with the technology.

Learning resources
On learning – how do you best learn? Do you prefer “atomic” samples? These are the ones that you can just pop in and figure out a task-based situation (i.e. how do I open a file in Silverlight). Or do you prefer more of a “lesson plan” approach to things? This would be a series based on a task (i.e. Build a Media Player in Silverlight).

For me personally a lesson plan approach was new. I did part of the digg API sample series, but after several steps I lost interest, mainly because some of the topics where not of interest at the time and some of the topics where just to easy for me. This makes me lean towards atomic samples, altough as a starting place I can see why people like this lesson plan thing. Later on atomic samples are obviously the way to go. They have the advantage of showing only the bare minimum of implementation without the burden of having to go trough previous steps to understand code that was already there.

On medium – in either types of these learning paths, what is your preference? Video? Written step-by-step guides? Labs?
When you are completely new to a topic, watching a video is great. It takes away some of the effort of having to follow along with some article and just being showed how things work. This is also great for some more indept topics, with less code and more explanation.

If looking for a reference, or if I need to actually start coding on something, I do prefer written material, as it is a lot easier to just scan trough and look for that bid of code, or that bid of explanation you needed, instead of plowing trough twenty minutes of video trying to find that five second shot of the code you need.

I've tried labs in the past and I found that they are not my thing. I tend to get bored very quickly because usually the level of instructions is making things to easy. Also setting up to do a lab feels like a lot of work most of the time.

On topics – what are the top 3 topics you expect when learning a new technology? How do you on-ramp yourself when you know nothing about it? Do you expect to learn the tools first? Or jump right in to data access?

This is actually a very tough question to answer. It realy depends on what a technology looks like. When looking at Silverlight I felt that I already knew enough about the most important tool: Visual Studio 2008. Of course Blend became part of the toolset I use and over time I did watch videos and read tutorials on Blend to learn some tricks here and there. So for me, while learning Silverlight, diving right into important topics was very helpful. I do feel it is important to include tips on how to use tools, where this is important to the topic at hand.

For example if you are talking about databinding and data access, it is handy to demonstrate on how to do this in Blend including using sample data. If something like this becomes to elaborate, at least make sure you point out to the public that this is a handy feature they should know about and tell them where they can find more information about it.

Other notes
Something that bugged me for quite some time when getting started with Silverlight was the number of resources that where available for Silverlight 2 Beta 1 and 2. While being a great help to win over management to go with Silverlight, this made live a lot tougher when trying to find useful resources for Silverlight 2 RTM as a lot of times the important bits would not work in the RTM.

Something else that I found is that, altough silverlight.net is a great resource when learning Silverlight, it is a bit of a mess. Videos are not categorized in a way that makes them easy to find and there is not a proper search function on the site. Also I think it would be very helpful to have a search engine that can search for Silverlight content for your specific version only. So if I'm working on Silverlight 3, I might not be very interested on Silverlight 1.1 and 2 content. Or at times I might not care if it's Silverlight 2 or 3 content, because they are likely to be compatible any way.

As a final note I would like to encourage anyone who hasn't already done this, please go to the article of Tim Heuer and comment. Or you can comment on this article as well.

The birth of CodeEmbed4Web part #2

As it's Friday today, I figured I give an update on the CodeEmbed4Web project. I've been working on this on and off for the past week and a half and got some stuff done. As you may still remember from the previous post I sad I would test the mechanism I came up with to make sure it works with XAML as well. I'm happy to let you know it works exactly like expected.

I haven't got around to building a template for C# yet, let alone for XAML, but I have been putting a lot of thought into how the user interface for this tool should look. Some considerations:

• The tool shouldn't be invasive. This means that it should take the smallest space possible without disturbing the functionality.
• As I'm using WPF, I figured it should look good, but as I'm not much of a designer I figured I would use one of the themes from the WPF Toolkit.
• It should be flexible in allowing to add new templates.

After playing around with Microsoft Expression Blend 3 Preview I came up with what you can see in the screenshot below.

No, it's not integrated with Visual Studio. That's just to show you how small the user interface is. You can go trough the buttons from top to button, to use the tool. The top tool expands a list of templates, so you can select your template. The middle button converts whatever code is on the clipboard and puts it back on the clipboard. The bottom button expands a menu which, at the moment, only allows you to close the tool.

At the top of the user interface, above the first button, is a handle you can use to drag the tool anywhere.

So, next steps:

1. Finish up the user interface in terms of behaviour (not showing it in the task bar and staying on top of other windows, just to name a few).
2. Build a template for C#
3. Build a setup
4. Release Beta 1

I would love to know what you think about the user interface and if you have any ideas to further improve on it. Please let me know what you think, by leaving me a comment.

Adventures while building a Silverlight Enterprise application part #11

Wow, it's been a while. I've been on a holiday and right after that I became ill. Now that I'm back, some things have changed in the team (people leaving or getting different assignments, etc.). This had it's impact on how the team operates so I needed some time to let the dust settle, before I could take out some time to write my next post here.

For the next week or so, I'll be spending time on building a selector, or whatever I should call it. Basically it's a control that consists of two lists with items, where you can move items from one list to another and back. You've all seem them and a lot of you probably build them as well.

I just got started on the basic features and I already ran into some interesting snags on the way. I first started building the usercontrol with two listboxes, only to get reminded very quickly that they do not support multi select, which is a requirement for our control. After digging some more into the requirements I decided that the datagrid fits our needs better anyway, so I'm using two of those.

One requirement was that the control needs to be able to be used in two orientations, pretty much like the stackpanel. The two lists can be next to each other, with the buttons in between, or they can be above each other, with the buttons in between. I started building them side by side (or in horizontal orientation, if you will), using stackpanels as my container controls. I figured I could change the rotation of my stackpanels to rotate parts of my control. It worked great, except for the captions on the buttons. I would need to rotate these myself.
To do this I embedded a TextBlock element inside the buttons content and named it so I could access it from code. Then I created a RotateTransform object with a 90 degree angle and assigned it to the TextBlocks RenderTransform property, only to find out that my TextBlock would not be in the right place after this. It turns out that the RenderTransformOrigin property defaults to Point 0, 0, which is not right for our rotation. It should rotate around the center of the TextBlock, so it stays in the same place.
I figured that I should calculate a point that indicates the center of the TextBlock and so I set out to do so, only to find out it would completely mess up the location of the TextBlock. I couldn't figure out why, so I fired up Expression Blend to create the rotation in there and see what XAML would come of it. It turned out that the origin should be 0.5, 0.5, which indicates the center of the TextBlock, relative to it's size. Isn't Silverlight genius?

Unfortunately I can't post the full control (yet?), but here is the code for the rotation/orientation of the control:


private void ApplyOrientation()
{
layoutRootStackPanel.Orientation = Orientation;
if (Orientation == Orientation.Horizontal)
{
buttonsStackPanel.Orientation = Orientation.Vertical;
unselectItemsTextBlock.RenderTransform = null;
unselectAllItemsTextBlock.RenderTransform = null;
selectItemsTextBlock.RenderTransform = null;
selectAllItemsTextBlock.RenderTransform = null;
}
else
{
buttonsStackPanel.Orientation = Orientation.Horizontal;
RotateTransform rotateTransform = new RotateTransform();
rotateTransform.Angle = 90;
Point centerPoint = new Point(0.5, 0.5);
unselectItemsTextBlock.RenderTransformOrigin = centerPoint;
unselectItemsTextBlock.RenderTransform = rotateTransform;
unselectAllItemsTextBlock.RenderTransformOrigin = centerPoint;
unselectAllItemsTextBlock.RenderTransform = rotateTransform;
selectItemsTextBlock.RenderTransformOrigin = centerPoint;
selectItemsTextBlock.RenderTransform = rotateTransform;
selectAllItemsTextBlock.RenderTransformOrigin = centerPoint;
selectAllItemsTextBlock.RenderTransform = rotateTransform;
}
}


I hope this is helpful to you. Please leave me a comment (or a question if you like). I always enjoy them and I try to respond in a timely fashion.

Silverlight 2 Datagrids RowDetailsTemplate and databinding radiobuttons

Today something I've been testing with for future use. I've been building a small prove of concept for using the datagrid to edit data, not directly in the grid, but in a details form. It looks like this:

So you can click a row and the details form is displayed below the row. You can then edit the data and it is immediately shown in the grid.

In this article I'll assume you have some knowledge on databinding and the datagrid yourself. Also having some experience with Silverlight, XAML, Blend and Visual Studio would come in handy.

So how does this work? This uses the RowDetailsTemplate property of the datagrid.

The RowDetailsTemplate in Blend
I started building this in Blend and ended up in Visual Studio anyway. Blend does provide support for editing this template, trough the menu Object < Edit Other Templates < Edit RowDetailsTemplate. You can build up a template here, but it's visual designer is not really user friendly.

Then comes the databinding. The datagrid is easy. Just go to the Project panel and under data add a CLR object, in this case a collection and drag it onto the grid. You can then turn off AutoGenerateColumns and define your own columns trough the Columns collection.

For the RowDetailsTemplate this doesn't work that polished. You can go to a control, let's say a textbox, and databind to it's properties, in this case the text property. A nice Create Data Binding dialog comes up and I taught "ok, just bind to the collection and we're done". But clicking on the collections datasource created earlier only shows the count property. So I figured I'd add a datasource for the detailed class and bind to the property there. The dialog allows you to do this, but as soon as you close it errors start popping up telling you that a TextBox can't be converted into a DependencyObject (don't ask me why not) and the datasource you just created can't be resolved.

Checking the XAML shows that Blend did exactly what I asked, binding to the datasource I created, with the path I clicked on. But this is not what I want. I just want to bind to the actual datacontext, so at this point I fired up Visual Studio to edit this mess myself (as Blend doesn't support any IntelliSense, I prefer Visual Studio as a XAML editor). I simply changed the binding to {Binding propertyname} and it works like a charm.

So next up, I wanted to databind two RadioButtons to one field.

Databinding radiobuttons
In the process of building a small form to show how this could work in future applications, I wanted to bind a field (in this case a persons Gender field) to two radiobuttons (obviously Male and Female). I googled around a bit and found out that this is not as straight forward as one might think. Some people actually wrote a considerable amount of code to get it to work.
I pondered on this a bit and decided that I would come up with an approach using ValueConverters. You can build custom ValueConverters simply by creating a class that implements the IValueConverter interface. From there on it's actually not that hard.

I came up with using two value converters, one for the male and one for the female. Here is what the Female one looks like:

public class GenderFemaleConverter : IValueConverter
{
#region IValueConverter Members

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
bool result = false;
Gender actualValue = (Gender)value;
result = actualValue == Gender.Female;
return result;
}

public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
bool actualValue = (bool)value;
if (actualValue)
{
return Gender.Female;
}
else
{
return null;
}
}

#endregion
}


For the male version of this, all I changed where the Gender.Female references to Gender.Male. Then all you have to do is use these in your databinding. To do so, first you'll need to create resources for them at some point. In this case I put the resources in the UserControl. The XAML looks like this:

<UserControl.Resources>
<DataClasses:PersoonCollection x:Key="PersonCollectionDS" d:IsDataSource="True"/>
<local:GenderFemaleConverter x:Key="GenderFemaleConverter" />
<local:GenderMaleConverter x:Key="GenderMaleConverter" />


Next step is to include these resources as converters in your databinding:


<RadioButton Grid.Row="1" Grid.Column="3" Content="Male" IsChecked="{Binding Gender, Converter={StaticResource GenderMaleConverter}}"></RadioButton>
<RadioButton Grid.Row="1" Grid.Column="4" Content="Female" IsChecked="{Binding Gender, Converter={StaticResource GenderFemaleConverter}}"></RadioButton>


As you can see, I bind both RadioButtons to the same field, but I use the two different converters.
One could argue that this is not the most efficient way of doing things and I would agree. A better approach may be to build some sort of RadioGroup control that has a single converter and databinding happens to a property of that. For this prove of concept however, it does what is has to do.

I hope you enjoyed this article and found it helpful. Please let me know if there are any questions and also suggestions for subjects are still very welcome, although I might not be able to go into every single thing you throw at me.

Using the popup element in Silverlight

It's been a while, as I was realy busy with getting our latest project of the ground, but finally here we are again.

This time, I wanted to look into the use of the popup element, as I plan on using this in future applications to handle some basic use cases. One of those is displaying a message to the user, for example an error message.

I started out with a simple application containing a grid as this is what most of my applications look like. As I wanted my popup to center in the browser window I added a canvas to the top left cell of the grid (in my case that would be the top row). Then I spanned the canvas trough all the rows and columns, so I covers the entire window. My xaml looks like this:


<grid name="LayoutRoot" background="White">
<grid.rowdefinitions>
<rowdefinition height="100">
<rowdefinition height="*">
<rowdefinition height="100">
</Grid.RowDefinitions>
<textblock row="0" margin="10" fontsize="20">Errorbox demo</textblock>
<button row="1" content="Throw error!" margin="20" click="Button_Click">
<textblock row="2" margin="10" verticalalignment="Bottom">Click the button to see a Popup control in action</textblock>
<canvas name="rootCanvas" row="0" rowspan="3">
</canvas>
</grid>

Next step is to actually build the popup for displaying error messages. It's as simple as wrapping any xaml you want for your popup inside a popup element. If you use Blend, like I do, what you may notice is that it doesn't display the popup by default. To have it displayed, you have to select the popup in the Objects and Timeline window. It then shows you the popup and it's contents.

The xaml for the popup looks like this:


<Popup x:Name="errorPopup">
<Border Background="#FFFFFFFF" BorderBrush="#FF000000" Height="300" Width="400">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="15" />
<RowDefinition Height="*" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Border Grid.Row="0" CornerRadius="15,15,0,0">
<TextBlock x:Name="TitleTextBlock"></TextBlock>
</Border>
<TextBlock Grid.Row="1" x:Name="ErrorText"></TextBlock>
<Border Grid.Row="2" CornerRadius="0,0,15,15">
<Button x:Name="OkButton" Width="100" HorizontalAlignment="Right" Margin="5" Content="Ok" Click="OkButton_Click"></Button>
</Border>
</Grid>
</Border>
</Popup>

So now we can write some code to popup our message. One thing that got me googling was how to actually show the popup. You use the IsOpen property which is a boolean. My code for displaying the popup looks like this:


public static void PopupError(Exception error, Canvas parent)
{
ErrorBox errorBox = new ErrorBox();
errorBox.Error = error;
parent.Children.Add(errorBox);
Canvas.SetLeft(errorBox, (parent.ActualWidth / 2) - errorBox.Width / 2);
Canvas.SetTop(errorBox, (parent.ActualHeight / 2) - errorBox.Height / 2);

errorBox.errorPopup.IsOpen = true;
}


When you want your popup to close, simply set the IsOpen property to false again. Note the use of the ActualHeight and ActualWidth. These are important because these are the dimensions that where set after rendering instead of the Height and Width property that are set in design mode. Another thing that you may run into is that these are set to 0. in the Loaded event of the page AND also in the Loaded event of the Canvas. If you rely on these events some redesinging is required to get this to work.

You can now download the project here. It's not all polished up, but you'll get the picture.

By the way, please let me now what you think about my blog and if there are any topics you would like to read about.