public static readonly RyansBlogProperty

MIX09 Brain Dump, Part 2: Prototyping and Designing with Expression Blend 3

This is my second post in a two-part series about MIX09. The link to Part 1 in this series can be found here.

Expression Blend 3

Another highlight of the MIX 09 keynote (as well as a majority of the sessions) came from Expression Blend 3 and all of its exciting new features. Without a doubt, it stole the show throughout a great deal of the convention, and I have found that I’ve spent the most time post-MIX talking about the new features that it touts.

To me, most of the appeal for Blend 3 came with Microsoft’s strong statements about the importance of developers and designers working together to create exciting and engaging user experiences. I truly believe that we are now able to do that better and more efficiently than ever before. There were a couple quotes that I felt stood out in the opening keynote with Bill Buxton, and I couldn’t agree more with them. He stated that, “You do not aspire to buy a ‘thing’, but rather an experience.” Following this logic, according to Bill, the reason you buy a mountain bike is so that you can go screaming into a river with a smile on your face. I assume that another reason you buy a mountain bike is to flip over the handlebars and leave your blood on the mountain, as I have, but I digress. Later on in his keynote, he mentioned, “If you don't have as much detail in the transition as you do in the state, you're doing it wrong.” Yes and yes. I’m glad that someone so high up in Microsoft actually gets it in this sense.

 
Doc Brown is back from the future, and he brings great news!

Finally, what is an Expression Blend 3 blog post without the mention of full IntelliSense support for XAML and CS/VB code files, as well as integration with TFS! I also recall hearing support for Subversion and other open-source code repository solutions. Now, developers and designers don’t have to switch back and forth between Visual Studio and Expression Blend nearly as much as they used to, which is a huge advantage in my book. However, I don’t see Blend replacing Visual Studio any time in the near future, which isn’t the point of the tool anyway. Believe it or not, I did hear a fair amount of “Why do I even need Visual Studio anymore” conversations going on. I have also become a huge fan of Blend 3’s support for custom workspaces and the ability to dock any panel anywhere you like.

Expression Blend 3 XAML IntelliSense

Those of you that know me know that I had a hard time being sold on Expression Blend 2. I felt that there were too many features missing, and the XAML that it spit out was sub-par in my opinion. I always leaned on outside tools such as Kaxaml and then brushed shoulders with Blend 2 as we passed each other in the hall. However, after playing with Expression Blend 3 Preview, I feel like I may have finally be a full-on Blend convert. I may even be ready to spend 75-90% of my time using Blend 3 as my primary XAML styling tool. I just don’t know if I will ever be able to let go of my Split View.

SketchFlow and Application Flow Editor

Another one of the key features that were added to Blend 3 is the ability to produce quick and easy prototypes with a couple new features called SketchFlow and the Application Flow Editor. Some of the most exciting conversations that I partook in with MIX attendees came from discussions over the endless applications of these two features. I’m extremely pleased that the Expression Blend team is giving designers the ability to rapidly create interactive prototypes, especially because it is in a medium that allows for easy client feedback. The great part is that the prototypes that you build are actual WPF and Silverlight applications, only with grayscale “squiggly” styles applied to them. The idea behind the “squiggly” styles is that you want the client to focus more on the ideas presented, rather than superficialities such as color or font. Theoretically, when you are done prototyping, you could ideally just throw out the squiggly styles and start styling away.

 
Prototype Created in Expression Blend 3 w/ SketchFlow (courtesy of Microsoft Presspass)

Next, the Application Flow Editor is a docked panel in Blend that allows you to define the Flow, Navigation, and Composition of your application, with every “screen” having any number of different states. Basically, each screen that you define is like a whiteboard, with sticky notes and drawings if you choose to add them. Now, I am still a bit confused about the Application Flow Editor in that I’m not sure if it is exclusive to SketchFlow, but it is still a brilliant feature that I want to use immediately.

Application Flow Editor (courtesy of Microsoft Presspass)

Regardless, one feature that my friends loved was that Blend 3 also gives you the ability to automatically create documentation in Microsoft Word based on SketchFlow and the Application Flow Editor. The documentation includes sections for each of the screens in your app, as well as every single state of that screen, along with screenshots. This could provide a very

However, creating quick prototypes wouldn’t be useful if you couldn’t utilize professional-grade design tools to take your prototype to the next step. In a huge step forward for Microsoft embracing industry standards, Expression Blend 3 has support for importing Adobe Photoshop and Illustrator files. Layers and naming conventions are preserved, images are saved as PNGs, and any vector-based path is converted to XAML. Not only is the idea behind this tool exciting, the tool itself is very nice; it allows you to choose which layers you want to import, as well as giving you a nice preview (see screenshot). I am super pumped to use this feature on my next project.

Adobe Photoshop/Illustrator Import Tool

Finally, one feature that I am definitely going to be putting to use a lot in Blend 3 is a feature called SampleData, which allows designers to quickly generate… well, sample data! It gives you options for random names, addresses, phone numbers, plain lorem ipsum text, etc. The problem that Blend is trying to solve is that, while authoring prototypes, the designer probably don’t know the structure of data or have data source at all. This feature allows the designer to no longer rely on a developer hooking up mock data just to produce nicely-formatted fake names or fake addresses. This is a huge improvement over Expression Blend 2’s sample data generator, which I hardly ever used because it basically only supported lists of fruit names. I don’t know about you, but fruit names and person names are worlds apart in terms of layout, and it just wasn’t useful. I don’t know if I really have to explain why SampleData is an extremely useful feature, but I will say that I plan to use this all the time.

Conclusion

There were a large number of other great features announced, but I have to say that I was far too enthralled by Silverlight 3 and Expression blend 3 that these features paled in comparison. Be that as it may, I might as well mention some of the other announcements that caught my eye. Things like: built-in distributed caching support in ASP.NET 4, Web Platform Installer and Web App Gallery, SharePoint authoring support in Visual Studio 2010 (finally), support for different web.config files in VS2010 for each web application lifestyle stage you are in, Microsoft Bizspark, and new features in WPF4 (such as built-in touch manipulation, inertia, and Surface ScatterView support).

However, in my drive home, I realized that trying to summarize the announcements from MIX is pretty much useless without being able to plan ahead and imagine how myself or my company can utilize these tools to create the best user experiences possible. Whether it’s on the web, on the desktop, or on a Surface, it’s good to know that Microsoft’s direction is leaning more toward strong visual interfaces and compelling end-user experiences.

MIX09 Brain Dump, Part 1: The Future of Web Development and Silverlight 3

For those of you that aren’t aware, I spent the majority of last week in Las Vegas, Nevada for Microsoft’s yearly Web, Design, and Media event called MIX. Honestly, this was my first conference experience and I enjoyed every minute of it, but I also thought that it was important for me to come back and share what I took away from the whole thing. Between attending sessions, meeting inspiring and brilliant people from the industry, and just exchanging ideas with random developers and designers, I felt that a switch had gone off somewhere in my brain and suddenly my perspective had changed. The future of development with .NET had presented itself to me, and I was impressed. Therefore, I decided that a brain dump was in order and I found myself sitting in front of a blank Word document and 5 pages of notes side-by-side.

Upfront, let me apologize for the lateness in this post, as MIX wrapped up nearly seven days ago, which is an eternity in internet time. I feel, however, that writing something like this was absolutely necessary for me to wrap my head around what has been called by many as the best MIX yet. To make this post a bit more readable, I am breaking it up into two parts: The Future of Web Development and Silverlight 3, and Prototyping and Designing with Expression Blend 3.

All along my windy four-and-a-half hour drive home from Las Vegas, I had a lot of time to think about the exciting things that I had seen and experienced at MIX. After filling up on gas and drinking a couple Red Bulls, I called a friend and had a great (albeit long) conversation about the future of development with the .NET Framework. We both agreed that Silverlight 3 changed the game in a lot of ways, and I gushed a great deal about how much Expression Blend 3 is going to help my company improve our designer/developer workflow. One thing that I noticed during this conversation was that with every new topic that came up, I began repeating the same thing after describing each feature: “And one of the most exciting things about that is…” This very same phrase has made its way into almost every single conversation I’ve had post-MIX, and it will probably make an appearance throughout this series of posts.

Finally, if you haven’t already, you should definitely watch some of the MIX Videos on their website. I highly recommend Scott Hanselman’s talk, as well as this RIA session, and this session on Expression Blend 3 and SketchFlow.

SuperPreview

Almost all of the work that I have done in the web development space recently has been with Silverlight, but I have to say that Microsoft’s new Expression Web feature, SuperPreview, actually makes me wish that I did more work with HTML and CSS. I know this is disgusting to a lot of web developers, but during the keynote, I found myself itching to find the difference in element pixel positioning for any website I’ve ever had my hands on. The fact that I can now ensure that any website that I work with is cross-browser compatible without installing every browser ever made is incredible to me, especially if it’s integrated into an Expression tool. Throw in support for DOM highlighting, as well as side-by-side and overlay comparisons between renderings of IE6/7/8 on the same machine, and you have a tool that any web developer can utilize.

Microsoft Expression Web SuperPreview (March Preview)

From what I recall, the future release version of SuperPreview will also have support for Firefox, Safari, Opera, and pretty much every other browser on the planet. By utilizing Microsoft cloud services, SuperPreview is able to generate accurate representations of your website in all of these browsers along with the full DOM. With SuperPreview, web developers can ensure that your website delivers the exact same layout for your entire user base, even spanning multiple operating systems. While Microsoft’s web design applications have not been so popular in the past, the new version of Expression Web looks very promising.

Silverlight 3

While SuperPreview reaches out to developers dealing with raw HTML and CSS, everyone at a Microsoft web conference wants to know about new features in Silverlight. This year, Silverlight 3 was given star treatment, with its new features spanning across all 3 of Scott Guthrie’s keynote categories (Web, Media, and RIA). Some interesting facts about Silverlight that were mentioned during the keynote: 350,000,000 installations of Silverlight, 300,000+ developers, and tens of thousands of apps being made globally. Frankly, I’m impressed.

Some of the announcements during the keynote about new features in Silverlight 3 that caught my eye were: support for H.264/AAC/MPEG-4 video codecs, GPU Hardware Acceleration and Hardware Compositing, Perspective 3D, a solid Bitmap/Pixel API, Pixel Shader Effects, WPF-style Theming, Animation Easing Functions, Deep Linking and Navigation URI Routing, Text Quality Improvements, Multi-Touch, ElementName Binding, Validation Error Templates, Full-Duplex WCF Web Services, and Cross-Plugin Communication (multiple SL3 apps communicating to other SL3 apps across multiple tabs and/or browsers).

Typing all that out made me truly realize… that really is a lot of features. Also, this is particularly impressive given that, during the keynote, it was announced that Silverlight 3 is actually 40 kilobytes smaller than Silverlight 2. It’s incredible to think that with all these new features, along with code optimization and compression, they were actually able to shrink the runtime that much. I really want to know the tricks that Microsoft used to add all those features without adding a single byte.

One thing that I want to focus on is Microsoft’s announcement of support for running Silverlight 3 Out-Of-Browser (OOB, or the slightly more hilarious acronym, SLOOB). This is very similar to the functionality that Google Chrome introduced by giving its browser the ability to add web apps such as Gmail and Google Reader to the desktop. This makes a great deal of sense because RIAs should perform in almost the same manner as web-driven desktop applications do. However, Silverlight 3 gives developers extra space in Isolated Storage (and the option to ask users if they’d like to scale that storage) as well as access to out-of-the-box asynchronous/full-duplex WCF services. This could potentially allow a Silverlight OOB to sit in Windows 7’s taskbar, and when run, notify the user when an update is received. And because this is a Silverlight OOB, it’s still run with partial-trust inside the sandbox while also being managed C# or VB with the power of WPF. I am very excited to see the Silverlight 3 OOB solutions that people come up with down the road, and you should be too. Also, please visit Tim Heuer’s blog for a more comprehensive explanation of Silverlight 3’s Out-of-Browser Update Model.

Mike Harsh’s Silverlight 3 demo, Slidentity, running out-of-browser

We will have to wait, however, to see if Silverlight 3 gives developers the power to do some more advanced features, such as customizing the chrome of the Silverlight OOB, which seems to be a popular request. Also, it seems that Silverlight now can compete with not only Google Chrome/Gears, but also with Adobe AIR (especially with native support for full-duplex asynchronous WCF). Hopefully this newfound battle of the Desktop RIAs will inspire innovation within all companies involved, which is ultimately good for both end-users and RIA developers in the long run. Be on the lookout for more posts from me in the future about Multi-touch with Silverlight 3, as well as Silverlight Out-of-Browser.

MIX 2009 Reflections

Alright... wow... I can say without hesitation that I cannot possibly spend a single blog post describing the things that I learned at MIX09; nor can I spend one introducing the sheer number of people I met at MIX09; nor can I spend one on the number of things from MIX09 that made me excited as a developer. The only thing I can think of writing about right now is that I can imagine, one hundred percent, what my reaction would be to each one of these things had I not physically been in Las Vegas, Nevada, for MIX09. I would be sitting at my desk, watching search.twitter.com for #mix09, cursing the people that were able to spend the better half of their week at this awesome conference.

Anyway, i can promise that, by the end of this weekend, I will write a comprehensive post mirroring all my notes from MIX. Although, I have to let any readers know that I have about 4 full pages of notes. Admittedly, they cover every topic from new features in Silverlight 3 to Expression Blend 3 to SuperPreview to Designer/Developer Workflow to Not Winning at a RockBand 2 tournament to WCF in Silverlight 3. I just need to find some time this weekend to condense these notes into an interesting blog post that even attendees from MIX09 will be interested in reading. By the way, if you are impatient for my final post, or if you just don't care and want information now, then please head on over to my colleague's blog, John Bowen, to read his initial thoughts on Expression Blend 3.

Otherwise, please stand by for my complete analysis of the announcements from MIX 09, including my fail-proof strategy to win a custom MIX09 Guitar (NOTE: I did not participate in this band... however, my band did manage to score above 92% on The Middle by Jimmy Eat World, yet failed to win). Also, I will selfishly list a full recollection of all the people I met at MIX who are either Microsoft high-ups or otherwise well-known in the community. Stay tuned!

MIX 2009 Preview

Offline Silverlight Applications with Google Gears

A good friend of mine from Neumont University, Kevin Kubasik, recently blogged about Making Silverlight Applications Available Offline, which I thought was extremely interesting. Given Silverlight's nature of being very connection-heavy (i.e. communicating with the server, using web services, etc), it opens up some new doors when you start thinking about how you could utilize Silverlight offline.

For example, let's say you have some compelling Silverlight RIA that manages a user's photo albums online. If your Silverlight app took advantage of offline access with Google Gears, the client could "upload" photos to their photo album using your Silverlight interface, even if that user doesn't have an active internet connection. Then, when a connection becomes available, the Silverlight app could seamlessly sync back up with the server, uploading the photos that were added while the application was offline. This allows for much greater flexibility for the types of applications you can create with Silverlight, especially in the age of the netbook, where a user relies heavily on using internet applications, online and offline.

How to Reset ListBox.SelectedValue In XAML

In my previous post, I talked about being frustrated trying to set the SelectedItem or SelectedIndex of a WPF ListBox via a DataTrigger. My workaround at the time was to just drop to code-behind in order to accomplish what I wanted, but thanks to a comment my coworker Dan Hanan, I was able to figure out a more elegant solution than the simply dropping to code-behind. After all, our goal is to take advantage of DataBinding as much as we can.

If you take a look at MSDN’s handy Dependency Property Setting Precedence List, you’ll notice that “Animations” sit one level above “Local Value”, which we can use to our advantage in this case. Instead of trying to set the SelectedIndex property via a setter, we are going to instead use an ObjectAnimationUsingKeyframes to accomplish the same thing via the SelectedValue property. Here is the workaround code:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Page.Resources>
    <Style TargetType="{x:Type ListBox}">
      <Style.Resources>
        <Storyboard x:Key="resetStoryboard">
          <ObjectAnimationUsingKeyFrames Duration="00:00:00" 
               Storyboard.TargetProperty="SelectedValue" 
               FillBehavior="HoldEnd">
            <DiscreteObjectKeyFrame Value="{x:Null}" KeyTime="00:00:00"/>
          </ObjectAnimationUsingKeyFrames>
        </Storyboard>
      </Style.Resources>
      <Style.Triggers>
        <DataTrigger Binding="{Binding IsChecked, ElementName=CheckBox1}" Value="True">
          <DataTrigger.EnterActions>
            <BeginStoryboard Storyboard="{StaticResource resetStoryboard}" />
          </DataTrigger.EnterActions>
        </DataTrigger>
      </Style.Triggers>
      <Setter Property="SelectedIndex" Value="3"/>
      <Setter Property="HorizontalAlignment" Value="Center"/>
      <Setter Property="VerticalAlignment" Value="Center"/>
      <Setter Property="Width" Value="100"/>
    </Style>
    <Style TargetType="{x:Type CheckBox}">
      <Setter Property="HorizontalAlignment" Value="Center"/>
      <Setter Property="Margin" Value="5"/>
    </Style>
  </Page.Resources>
  <Grid>
    <StackPanel>
      <ListBox>
        <ListBoxItem Content="Item 0"/>
        <ListBoxItem Content="Item 1"/>
        <ListBoxItem Content="Item 2"/>
        <ListBoxItem Content="Item 3"/>
        <ListBoxItem Content="Item 4"/>
      </ListBox>
      <CheckBox x:Name="CheckBox1" Content="Check me!"/>
    </StackPanel>
  </Grid>
</Page>

WPF ListBox Gotcha

On my most recent project, I ran into a frustrating problem that had me banging my head against the desk for a couple hours. I was trying to set the SelectedItem or SelectedIndex property of a WPF ListBox through XAML. Specifically, I was trying to set it from inside a DataTrigger. For example, when a user logs in, a ListBox in the window would be enabled. Easy enough. However, when a user logs out, that ListBox would have to be disabled and then have its selected item set to null (or its selected index set to –1). This is where my DataTrigger came in, and I could not figure out why either property was never getting set.

At first, all signs pointed toward my bindings being the culprit, but after spending some time with a much more simplified version of my XAML, I realized something very important about the WPF ListBox:

After a user has made a selection, the ListBox ignores any XAML that sets its SelectedItem or SelectedIndex. The only way to update either of those properties (say, as the result of an event), is through code-behind.

This required a small change to my ViewModel, but ultimately it was not a big deal to handle it in the code-behind. However, I still wonder if there is any way to get around this limitation in XAML.

To demonstrate this, I put together a quick example of this taking place. If you don’t already have a XAML-viewing application, there are some free ones available such as XAMLPad (which comes with the Windows SDK) and Kaxaml.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Page.Resources>
    <Style TargetType="{x:Type ListBox}">
      <Style.Triggers>
        <DataTrigger Binding="{Binding IsChecked, ElementName=CheckBox1}" Value="True">
          <Setter Property="SelectedIndex" Value="-1"/>
        </DataTrigger>
      </Style.Triggers>
      <Setter Property="SelectedIndex" Value="3"/>
      <Setter Property="HorizontalAlignment" Value="Center"/>
      <Setter Property="VerticalAlignment" Value="Center"/>
      <Setter Property="Width" Value="100"/>
    </Style>
    <Style TargetType="{x:Type CheckBox}">
      <Setter Property="HorizontalAlignment" Value="Center"/>
      <Setter Property="Margin" Value="5"/>
    </Style>
  </Page.Resources>
  <Grid>
    <StackPanel>
      <ListBox>
        <ListBoxItem Content="Item 0"/>
        <ListBoxItem Content="Item 1"/>
        <ListBoxItem Content="Item 2"/>
        <ListBoxItem Content="Item 3"/>
        <ListBoxItem Content="Item 4"/>
      </ListBox>
      <CheckBox x:Name="CheckBox1" Content="Check me!"/>
    </StackPanel>
  </Grid>
</Page>

Taking a quick glance at this XAML will tell you that initially, I want the SelectedIndex of the ListBox to be 3, and when the user checks the CheckBox, the SelectedIndex should change to –1, which means that nothing is selected. Originally, I tried setting SelectedItem to {x:Null} but that doesn’t seem to work at all.

If you run this example, you will see that initially, if you check the checkbox, the trigger does indeed work. However, once you actually select an item on your own, the DataTrigger no longer gets applied. If anyone knows anything more about why the ListBox has this behavior, please leave a comment!

Building a Silverlight-Enabled WCF Web Service

This past Saturday, my coworker Scott Varcoe and I drove up to Fullerton to present at the SoCal Rock & Roll Code Camp. Our topic was "How to Build a Silverlight-Enabled WCF Web Service," which involved building a simple WCF web service as well as a Full Duplex service to push data to the client. It was our first Code Camp presentation, and we felt like it went very well! Thanks to everyone who came!

I've uploaded the source code from our presentation as well as our PowerPoint slides for anyone that is interested in taking a closer look at the code. Have fun!