| Comments

I previously wrote about a known issue with Silverlight Streaming services and videos encoded with Encoder 2.  The quick recap is that a video already encoded to VC-1 using Encoder 2 will not process when using the Manage Videos feature of Silverlight Streaming services.  I provided 3 work around options (#3 being the easiest of those 3) to get you past the issue and get the video uploaded.

The SLS team recently just added another option into the actual process and enables you to use the Manage Videos feature rather than act like uploading an application or renaming files.  When you log into your account (you get 10GB free by the way), click on the Manage Videos option and then choose to upload a video.  You’ll be presented with this screen:

Notice the new option of The video is WMV / VC1-compliant. (It should actually read VC-1 to be picky, but I digress.)  Here’s what you do if your video is already VC-1.  This only applies to this situation…if you still want to use the transcode service, feel free with your AVIs, etc.

First, click that checkbox first.  Do this before you browse the file to set the flag that you will be bypassing the transcode.  Then browse to your file, give it a title and upload.

I hope this helps get around this issue the team identified.  Thanks to the SLS team for implementing a better work around in a short time after the problem was identified.

| Comments

Well, I have about 3 hours until I leave this little city called Mexico City.  Sarcasm of course, did you know there are roughly 25 million people in Mexico City.  I didn’t.  It is amazing.  Traffic, however, is something to be desired.  I’m told that a 3 mile trip at times could take 1hr, 30 minutes.  Maybe I should stop complaining about my commute when I do it?  No, it still sucks.

Anyway, on to business.  Yesterday I attended and spoke at the MIX Essentials Mexico conference.  These events are happening worldwide and if there is one coming up in your area, you should definitely check it out.  I was fortunate enough to kick off the day with the keynote session talking about building RIAs in Silverlight 2 and demonstrating some of the new capabilities that have been talked about for beta 2.  My second session was on accessing data within Silverlight 2 using web services, RSS/Atom, REST, etc.  I had a great time and hope that the attendees for the day enjoyed the discussions as well.  For myself it was quite interesting as myself and 3 others were the only ones who presented in English.  We had translators (I forgot to tell them thank you as they did a great job) who were doing their best to translate our American and English (UK) slang and language flaws.  Part of me felt a bit disconnected from the audience and it really motivated me to learn Spanish.  I live in Arizona so I’m near the border and we holiday there quite a bit…there is no excuse for me not to start understanding a bit more than “Donde esta el bano?”

I made the mistake of trying to look like I knew what I was doing when in the ride from the airport to the hotel (8 miles, 1hr).  I didn’t know how long it would be and asked the driver “Cuanto tiempo?” which roughly translates to “How long?” and he answered to me about 30 minutes (in Spanish of course, numbers I understand).  I must have had a really good accent, because later he received a phone call, paused, turned around and started saying things I had no idea what he was saying :-) -- we chuckled.

After the keynote, Una Walsh of Conchango did a wonderful presentation talking about *what* user experience is and how it is all around us, not just in technology.  She really knows here stuff and is one of the individuals directing the user experience group at her organization.  Her presentation showed some interesting things that Virgin American has been doing to advertise differently as well as create a unique flight experience that is driving loyalty and enthusiasm.  That’s right, loyalty and enthusiasm in an airline.  They are doing some really unique things to differentiate themselves and at the same time building excitement in a brand in their industry almost to the same level of ‘fanboy’ status.

Rich and FelixNext up was two others from Conchango, Rich Griffin and Felix Corke.  Rich is a developer and Felix a designer.  Together they presented ‘Beauty and the Geek’ discussing the workflow between a developer and a designer.  Both of these guys are really talented and have been working with XAML for a while.  We had some great discussions on what needs to be done to help bridge the gaps further.  I think they were also excited to see some of the things I showed them that is coming.  Rich also talked more in-depth later about XAML.

Una and AlexFresh off a 10 hour plane ride from Argentina, Alex Souza talked about creating web experiences with Expression Studio 2.  This was the first Spanish speaking session.  I sat in for most of this one and Alex really engaged the crowd and although I have no idea what he was saying, I saw a lot of nodding heads.  Alex really knows his stuff and was really confident about the platform.  He demonstrated building an experience using the various tools available to web designers and developers.

Also fresh from Argentina, Gabriel Corvera Ortiz from the Windows Live team, talked about the Windows Live platform.  He said this was the second time he’s been able to do this, but it didn’t show.  This guy is very confident and was able to answer some of the hard questions posed by the attendees.  He’s really smart and I was glad to have met him this weekend.

Arturo Vazquez wrapped up the final session talking about becoming a partner with Microsoft.  I stepped into this one late and although it was in Spanish I could tell there were a lot of questions around what organizations should be doing to get the various levels of partnerships.

It was a really great day and I received a lot of good questions and met some great people.  I had a chance to talk with Alfredo Ceballos and Christian Strevel which were both good conversations about doing fun and interesting things and hopefully soon with Silverlight 2!

For my sessions if you are interested in more, I recommend checking out the Learn section of the Silverlight community site.  Most of what I covered is also available in videos and downloadable code for you to work with.  We’ll be updating this site with examples and content for beta 2 once released so be sure to subscribe to my blog and keep your eyes on the Silverlight site for the best resources!

The event was over and we could all relax a bit.  There were a lot of pictures taken so if you have any be sure to tag them with mixessentialsmx or something like that so we can all see or leave a comment here to the URLs.  You can view my photos on Flickr.

Esamoles

Our gracious hosts for the event (in addition to the agency who helped put everything together…their staff was AWESOME—thank you Rossana and others!) were Eduardo Nava Malagon and Mauricio Angulo.  These guys were the most gracious hosts we could have had.  After the event they took us to Paxia, which was incredible.  The service and food was amazing.  I had a filet with chorizo that was oh so good.  The highlight of the night however was learning all about tequila.  While I don’t drink…the table sure did ;-).  There were many La Loteria being ordered (which essentially is a sampler of 4 fine tequilas).  Felix had to ask about worms, to then the mezcal started coming out.  Mauricio was very much enjoying himself and was so kind to us the entire night.  That was until he decided to let us try some ‘local’ cuisine.  After an exchange with the restaurant host, a plate of guacamole and something else came out (that’s a picture of it here).  Escamoles.  Click the link, then come back.  That’s right…we ate those.  I’ve told myself I’ll try anything once, and I did.  There will probably be no more esacmoles in my future.  You can see a brief video of Felix and Una prepping their tortillas here.

About 15 or 20 la loterias later, we ended dinner and great conversation about culture, language and other things.  I really enjoyed myself in Mexico City (the hotel I was at as well was phenominal, extremely comfortable and would every hotel should be) and am grateful to have been invited.  I hope the attendees to MIX Essentials had fun, learned a little and are excited to create the next great experiences on the web.

Muchas gracias a mis nuevos amigos en la oficina de Microsoft en Mexico City.

| Comments

Um.  Whoa.

Okay, DevExpress rocks.  I think this will be very well received by the community and you’ll have to watch their page for when it is available and to get your license.

From their site:

As the release of Silverlight draws near, DevExpress has invested the engineering resources needed to deliver a feature-rich grid control for Silverlight. Not just a "preview" of what is possible with Silverlight, the AgDataGrid Suite was developed to fully exploit the power and flexibility of the platform…

It looks like it will support pretty much everything you’d expect in a DataGrid and more…wicked cool.  Congratulations and thank you to DevExpress!!!

| Comments

Silverlight 2 brings a suite of controls for designers and developers to leverage within their applications.  With the Expression tools helping us to be able to skin these controls, also comes some new controls you may not have used yet as well as a new one introduced with the latest release of Silverlight 2.

Introducing TabControl.

UPDATE: Video walk-through is now live.

The TabControl is implemented in the System.Windows.Controls.Extended class library and not in the Silverlight core.  To use it make a reference to the Extended assembly and it will be available to you.  In Expression Blend you’ll see TabControl in the Custom Controls section of the Asset Library:

You’ll notice there is actually a TabControl and TabItem controls…to implement you’ll need them both.  In Blend, you’ll have to drag a TabControl onto the design surface.  Once you have it, double-click on the TabControl in the Objects and Timeline explorer so that it has a yellow ring around it:

Having the yellow border indicates that it is the actively selected element.  Now if you go back to the asset library, change to a TabItem and double-click the TabItem, it will be added as a child of the TabControl.  Do this several times to add as many TabItems you need:

The resulting XAML looks like this:

<ex:TabControl TabStripPlacement="Bottom" VerticalAlignment="Top" 
               Width="231.148" Height="156.611" HorizontalAlignment="Left" 
               x:Name="tabstrip1">
    <ex:TabItem Width="75" Height="20">
    </ex:TabItem>
    <ex:TabItem Width="75" Height="20" Header="Second">
    </ex:TabItem>
    <ex:TabItem Width="75" Height="20" Header="Third">
    </ex:TabItem>
</ex:TabControl>

You’ll notice the “ex” namespace with the TabControl.  Yours may be different and likely “System_Windows_Controls“ if you followed the steps above.  This is added automatically when you drag a control onto the surface from the asset library.  The namespace is actually directed in the root node of the XAML and you can change it to whatever you’d like.

The TabControl has properties you can set on it just like any other control, but one that you might find important would be the TabStripPlacement property.  This enables you to direct where the TabItems (tabs) actually get displayed: Top, Left, Right, or Bottom.  This can be set in XAML and also controlled during runtime using the Dock enumeration.

Each TabItem also has two properties to set content: Header and Content.  Header is where you would put the content for the tab itself and content direct the actual content within the TabItem.  This can be set to literal string values, but they can also be set to other content.  For example, if you want to set the content within the TabItem, you could do something like:

<ex:TabItem Width="75" Height="20" Header="Third">
    <StackPanel Orientation="Vertical">
        <TextBox x:Name="yourname" />
        <Button Content="Click me" Click="Button_Click" />
        <TextBlock x:Name="resulttext" />
    </StackPanel>
</ex:TabItem>

If you wanted to set alternate content as the Header you could likewise do that as well noting the TabItem.Header:

<ex:TabItem Width="75" Height="20">
    <ex:TabItem.Header>
        <Button Content="foo" />
    </ex:TabItem.Header>
    <Button Content="Click Me" Click="Button_Click_1"/>
</ex:TabItem>

Let us all welcome TabControl to the family.  A simple yet probably widely used control is now available for you to think of marvelous uses :-).  Remember, that TabControl (as well as the calendar and date picker controls) is located in the Extended control assembly and not the core.  Here’s an example of a TabControl using some of the methods described above:

For a video demonstration of using TabControl, visit the Silverlight community learning section and stay updated as the video will be there shortly as well as other great videos on using Silverlight 2.

Hope this helps!

| Comments

If you’ve heard the news about Silverlight 2 Beta 2 and Expression Blend 2.5 (June 2008 preview), you will notice something else in addition to being able to skin your controls easier.  Remember how you may have had to create different states for your element using “MouseOver State" and then create storyboards to transition to states?  There’s now a better way.

Enter VisualStateManager.

Let’s take a look and see if we can simplify this down a bit a basic understanding.  Let’s use something that most everyone should be able to relate to with states: Button.  A button has MouseOver, MouseOut, MouseDown, etc. states that you can see.  Using VisualStateManager and the new UI ability to customize templates, we can make our lives easier.

Start in Expression Blend and drop a button on the default design surface.  I’ve created mine larger just for context, but whatever you want is fine.  You should have something like this:

Now, using the method in one of my previous posts about skinning the controls, right-click on the button and choose to edit the template.  I’d choose Edit a Copy for now to make things easier for now…keep it a document resource as well.  After you’ve done that, take a look in the upper left pallette (assuming default and you haven’t moved your palettes around…in which case you probably already know about VSM and are smarter than me anyway):

The various states of this control are represented in this particular template.  Some other controls might have a blank palette here until some are added, but Button has some default states.  As a designer now you can simply concentrate on what the final look of the element (in our case a Button) in each state.  Just define the state and what the element should look like in that state.  The State palette shows a few things.  You’ll notice “Base” as well as two other named containers, “CommonStates” and “FocusStates” which are what are called state groups and containers for different states.

Beneath that you can select a state and see it’s final state.  Want to change the MouseOver state, select it in the state palette and start customizing the template.  Let’s change the MouseOver state, select it and let’s change some properties.  By default it looks like this:

You’ll also notice a few things changed.  Basically the design surface goes into Timeline recording mode and a subtle new feature in the objects palette indicating the property being animated/changed…in this case the BackgroundGradient:

I’m selecting the BackgroundGradient element and then changing the color within the Properties palette.  Let’s change it to red.  There is no need for me to pay attention to any timeline stop points or anything, just concentrate on what I want the final Button to look like, position, etc. in this state:

That’s it.  MouseOver will now represent my new state.  I didn’t have to create any new StoryBoard elements or anything.  This is in part where VSM does some magic.  You see, the VSM engine bascially knows the beginning end states between any given transition (i.e., Normal –> MouseOver).  The VSM engine automatically handles the transition for us.  Think of it as creating a dynamic StoryBoard on the fly and executing it.  If we run the application and mouse over the Button, it changes to our state.

Notice the time in the state palette for a given state:

This controls the duration of the transition TO that final state.

The VSM model also enables you to move between states via code.  VisualStateManager.GoToState() is a static method that enables you to move between states and optionally use the transition or just get to the state.  For example if we had our Button named "foo" and had some other event we could do this:

VisualStateManager.GoToState(foo, "MouseOver", true);

The last parameter is to use the transition or not.  True would do the transition based on the duration set in that state.  False just gets to that state.

The theory is that VisualStateManager now makes it easy for us with our skinning, etc., but also separates more from the developer/designer so that the designer can concentrate on the final look and experience of the final states rather than having to code something up.

A Button used above is a simple example and I hope it helps demonstrate the VSM class available.  There could be other uses than the simple Button of course :-) and I hope to see some creative uses.  As a for instance, I've seen a lot of applications with slide-out control panel implementations.  You could use VisualStateManager and set the "collapsed" and "open" states for a control panel and just concentrate on the final stages of each and let VSM handle the transitions, etc. 

For some further designer-driven tutorials on this model, head on over to Nibbles where Celso will have some tutorials on what VSM means to designers in more depth.  Also be sure to check out Christian’s blog for more information on VisualStateManager.

Hope this helps!