Designer Silverlight

I haven’t posted in a while due to my schedule. But I have also clearly lost my mind as evidenced by the fact that I managed to write and perform half of a rap battle without once thinking to myself, “This is clearly an insane idea.”

Jason Alderman and I wrote and performed a rap battle for an Ignite presentation at Ignite Salt Lake. Jason took the side that developing web applications for mobile phones is the best way to go and I took the side that native applications are more appropriate for mobile development. The slides can be found here.

Geeky? In the extreme. But I enjoyed it.

And if you don’t like to hear people laughing over the laughable lyrics:

Continue reading ‘Twitter Weekly Updates for 2010-03-07’ »

Continue reading ‘Twitter Weekly Updates for 2010-02-28’ »

Thanks to Joe McBride and Jason Alderman, who discovered this technique in some of Microsoft’s theme packs.

I’m trying something a little new… I’m going to post all future Silverlight tutorials on CodeRun, an online IDE. Basically, just follow the link below and click “Run” and you’ll see this in action. You can change the XAML at CodeRun to test it out, which I find exceptionally cool. Let me know if you a) like this or b) hate this.

Open this project on CodeRun.

This is just a little trick to get a nice flexible striped gradient in Silverlight or WPF. Our end product will look like this

Zoomed in:

Just adds some nice texture to the app.

First, go to the element you want to apply the gradient to and go to the (you guessed it!) gradient section in the background.

This will pull up the default black-to-white gradient that we all know and love. Give it two more gradient stops as close to the center as you can by clicking on the gradient twice. Make the two left stops the color of your stripe. For this example, I’m using a nice blue gradient with some transparency. I think it fits nice with the background. Also make the two right stops fully transparent. Should look something like this:

Dandy. Now click on the arrow to expand our options (seen at the bottom of the image above) and a new set of options open up for us to futz with. Let’s go ahead and set the following options:

• StartPoint = 0,0
• EndPoint = 1.5, 1.5
• MappingMode = Absolute
• SpreadMethod = Repeat

And that’s it! We can change the visible color to get something a little more appropriate to our background or we can change the EndPoint to make the stripes wider or at a different angle. But that’s all we need.

Here’s the XAML for reference.

<LinearGradientBrush
EndPoint=”1.5,1.5″
MappingMode=”Absolute”
SpreadMethod=”Repeat”
StartPoint=”0,0″>
<GradientStop Color=”#BF125881″/>
<GradientStop Color=”#BE6C9AE0″ Offset=”0.526″/>
<GradientStop Color=”Transparent” Offset=”0.544″/>
<GradientStop Color=”Transparent” Offset=”1″/>
</LinearGradientBrush>

I was digging through all the sessions submitted for the MIX10 Open Call last week and I decided that there had to be a better way to browse through the data to find sessions that might be interesting. So I spent the weekend hacking together this Silverlight visualization of the MIX10 Open Call sessions.

If you think this is an engaging way to look at the Open Call sessions, I ask that you include my session “Creating Effective Info Viz in Silverlight” on your ballot.

If you have any problems with this project, please let me know! I’ve already had one person point out a parsing error that was depriving him of a properly attributed session.

This visualization is basically a set of word clouds for the titles, abstracts and speakers of the submitted proposals. Clicking on the words or names brings up a list of related sessions with links so that users can either go to the session or directly vote for it (although you’d still need to click  “Submit Your Ballot” in order to make the vote count).

So, now I’d like to talk about problems with this project.

There’s a weird problem with the animation when the panels flip from front (the word cloud) to back (the detail view). I think this is because I’m building the detail view dynamically, which makes it mostly a performance issue. I spent a couple hours fighting with this problem and tried several possible solutions. Ultimately, I couldn’t fix it, so I decided not to let the perfect be the enemy of the good.

I decided to use a wrapping ListBox for displaying all the words and names rather than try to squish them onto a single screen for a couple reasons.

1. Dumping all the sized items into a ListBox was WAY easier that constructing a beautiful Wordle type word cloud and gave me most of the value. Since there was a very short window in which this project would be valuable, I decided in favor of the faster method.
2. If the user is trying to play around with this and doesn’t want their browser to fill the screen, they can still see everything. Allowing scrolling means that the user doesn’t have to feel like I DEMAND their full attention. The application becomes a casual application rather than a consuming one.
3. People love to see their names in lights. Over on the “Speaker” section, I wanted the names to be big enough so that every person who submitted a session could see their name in the “Speaker” panel. That was probably the most important part of this project to me (hey, I do user design… it’s all about the people), so that’s what I did.

Given more time, I probably would have worked a little more on the visual design and the motion design (animations and what not). I probably also would have sped up the application by taking some of the processing procedures out of the application and turned them into static data files. The fact of the matter was that this project evolved from testing to prototype to final project very quickly because of the time constraints.

But, hey, that’s life.

Sorry for my prolonged absence. My world has been taken over somewhat due to my recent moonlighting as an information visualization guy. Take note that I’m not by any means an “expert”… I’m more of an “enthusiast”, but that was apparently enough to get me on CNN.

I’ll post more videos as I create them for CNN. I’m also working on a chapter for an O’Reilly book called “Beautiful Visualization” that will be out next year.

All of this to say that I’m trying to get back into the WPF/Silverlight blogging as soon as I can, but I need to clear my plate a little first.

I’ve been a busy blogger over at Veracity Blogs the last couple weeks. Here’s a list of my new posts:

• Florida Crime Rate Visualization – My attempts to use Silverlight for information visualizations are going pretty well. In this post, I visualize the Florida crime rate by county over almost 20 years. There are project files availalbe for anyone who wants to dig into how I did it a little more.
• Adobe Illustrator to XAML Conversion Options – This post walks through the pros and cons of two methods for taking an SVG file (or Adobe Illustrator) file and pulling it into Blend as a XAML file. It also has a XAML copy of a vector map of the US by county for download.
• Create A Snapping Slider In Blend Using Behaviors – This provides a downloadable behavior for getting a slider to snap to integers (or an integer multiple based on certain settings). I’ve provided project files as well as a tutorial for how to do it.
• How To Create a PART in Your Silverlight Custom Control – Because there are about a dozen tutorials on building a custom control, but I keep forgetting exactly how to do this part of it.
• How To Animate a Changing Property in a Custom Control in Silverlight – Have you ever wanted your property to animation automatically when it changes in your Silverlight Custom Control. I say, “Who hasn’t!?” at which point my wife forces me out into the fresh air and sunshine (or, as I call it, the Blinding Day Star). After I scurry back inside, I wrote this blog post.
• How To Build a Storyboard Animation for Silverlight in C# – Because sometimes you want to enjoy the benefits of the Silverlight animation engine but you really need to build the animation in the code instead of the XAML.

I finally cleaned out my Google Reader list and picked out the stuff I like.

• Carsonified » 5 Advanced Photoshop Techniques for Web Designers
• Carsonified » Advanced Photoshop Techniques for Web Designers – Part 2
• Source code for “WPF Control Development Unleashed” – From Pavan Podila, control development in WPF is pretty powerful… might be a good idea to check out his book.
• A SilverLight TreeMap control – I can’t believe I missed this for so long. I need to dig into this a little more, but if this really works the way it looks, everyone should be worshiping Pavan Podila over at Pixel in Gene. This is an info vis dream come true.
• Implicit Styles, Templates, Controls and FrameworkElements – From the Windows Presentation Foundation SDK team, Carole Snyder has a post on implicit styles… definately an under-appreciated topic in WPF
• Expression Studio Tutorials Starter Kit – Jaime Rodriguez continues to be awesome
• Mastering CSS, Part 2: Advanced Techniques and Tools – From Smashing Magazine and includes a section on iPhone CSS techniques
• How to Create Your First iPhone Application – Yet another “Make an iPhone app” guide
• How To Effectively Communicate With Developers – The graphic is hilarious.
• Typographic Design Patterns and Best Practices – Good for people who want to start digging into the typographic world
• 50 Useful New jQuery Techniques and Tutorials – 50 is kind of a lot, but this is from Smashing Magazine, whose motto is “The most compelling link dumps in the design community”

I’ve started a series of posts on Silverlight and other topics over at the Veracity Solutions Blog.

Veracity Solutions is the software consulting firm where I work and we’ve decided that it would be a good idea to do some sponsored posting there.

Blog posts up so far are:

• Styling a ComboBox in Silverlight 3
• How To Wrap Text In a Silverlight 3 ComboBox
• How To Get a Silverlight 3 AutoCompleteBox to Show Sample Data In Blend 3
• How To Create A ListBox with CheckBoxes (or RadioButtons) In Silverlight 3

More are coming, including tutorials on behaviors and paths.

UPDATED 05/22/09

In the comments, someone mentioned that the project wasn’t working properly for keyed scrolling. I’ve updated the project with:

• Key scrolling (left, right, up, down, page up, page down)
• CanKeyboardScroll property on the AnimatedScrollViewer so that keyboard scrolling can be turned off
• ScrollToSelectedItem property on the AnimatedListBox so that the user can have it automatically scroll to a ListBoxItem

That last one is a little hacky… I use the ListBox ItemContainerGenerator to get the heights of all the items up to the one you want and then scroll it that. I’m almost positive there is a better way and if anyone knows what it is, I’d love to hear it.

First things first, here are the project files.

Animated ScrollViewer and ListBox Project Files (Updated 5/22/09) – Contains the AnimatedScrollViewer control library with AnimatedScrollViewer and AnimatedListBox

Animated ScrollViewer and ListBox DLL (Updated 5/22/09) – For those of you who don’t care how it works and just want it to work

OK… this is going to be something of a whirlwind since I’ve never written a post this in-depth before… it will strain the limits of my ADD.

Problem:

The Listbox/ScrollViewer not only doesn’t animate, but it seems impossible to tweak it so that it animates.

The Reason:

The reason has everything to do with the ScrollViewer. Basically, the ScrollContainer and the ScrollBars are very tightly intertwined. There is a lot of code that does all the scrolling calculations and that code needs to apply to the scrolled content as well as the UI for the ScrollBars. If you dig deep enough, you’ll see the reasons. Reasons which I assume for the moment you don’t care about… you’re probably in more of a “make the @#&($ thing work!” mood. I know I was.

The Solution:

My solution was basically to completely bypass the built-in ScrollBars and put in new ScrollBars with new logic. They look and act just like normal ScrollBars, so you should be able to style them just you would any normal ScrollViewer.

OK… how I did it. (I’m going to use both Blend 2 and Visual Studio 2008)

First, create a new custom control for WPF. This can be done by going into Visual Studio and creating a new Project. Select “WPF Custom Control Library”

In Blend:

Add a WPF application to the project too so you have something to test. In the WPF application, get Blend to generate the default template for a normal ScrollViewer, accessible (in Blend) by putting a ScrollViewer into the project and right-clicking on it and selecting “Edit Control Parts (Template) –> Edit a Copy…”

Once have the default ScrollViewer template, select the “PART_VerticalScrollBar” and the “PART_HorizontalScrollBar” and copy and paste them. Rename your new ScrollBars something you like… I used “PART_AniVerticalScrollBar” and “PART"_AniHorizontalScrollBar”. Now, set the Visibility of the original ScrollBars to “Collapsed”. (We can’t get rid of them, because the ScrollViewer will be looking for them and will throw a conniption if it can’t find them.)

Also, change the Value of your new ScrollBars to 0. You’ll probably have to click on the orange box next to Value and select “Reset”.

In Visual Studio, right-click on your WPF Custom Control project and go to “Add –> New Item…” . Then select “Custom Control (WPF)” and name it something you like (mine is named AnimatedScrollViewer). This should add a class to your project as well as a basic template to your Generic.xaml file.

Copy the ScrollViewer template that we just made and paste it into the Generic.xaml. The only change we need to make is to change:

TargetType="{x:Type ScrollViewer}"

to

TargetType="{x:Type local:AnimatedScrollViewer}"

in the Style and the ControlTemplate.

OK… that’s pretty much it with the XAML. Now we get to move into the code.

Right now, our class inherits from Control, but we want it to inherit from ScrollViewer like so:

public class AnimatedScrollViewer : ScrollViewer

Next get some containers for our new spiffy ScrollBars so that we can access them from the custom control code. Type the following before the class:

[TemplatePart(Name = "PART_AniVerticalScrollBar", Type = typeof(ScrollBar))]
[TemplatePart(Name = "PART_AniHorizontalScrollBar", Type = typeof(ScrollBar))]

and the following just inside the class:

ScrollBar _aniVerticalScrollBar;
ScrollBar _aniHorizontalScrollBar;

Now, we’ll override the OnApplyTemplate and make the connection between the template scrollBars and our class ScrollBars:

public override voidOnApplyTemplate()
{
    base.OnApplyTemplate();

    ScrollBar aniVScroll = base.GetTemplateChild("PART_AniVerticalScrollBar") asScrollBar;
    if(aniVScroll != null)
    {
        _aniVerticalScrollBar = aniVScroll;
    }
    _aniVerticalScrollBar.ValueChanged += newRoutedPropertyChangedEventHandler<double>(_aniVerticalScrollBar_ValueChanged);

    ScrollBar aniHScroll = base.GetTemplateChild("PART_AniHorizontalScrollBar") asScrollBar;
    if(aniHScroll != null)
    {
        _aniHorizontalScrollBar = aniHScroll;
    }
    _aniHorizontalScrollBar.ValueChanged += newRoutedPropertyChangedEventHandler<double>(_aniHorizontalScrollBar_ValueChanged);

    this.PreviewMouseWheel += newMouseWheelEventHandler(AnimatedScrollViewer_PreviewMouseWheel);
}

Before we address the three event handlers we added, we need to create the Dependency Properties with which they will be futzing.

(We’re going start going a little bit faster. Please download the code for the excruciating detail.) We need to add the following Dependency Properties. I’m using a “PropertyName (type)”.

Dependency Properties

ScrollingTime (TimeSpan) – This will be an easy way to change the speed of the scrolling. I created mine to default at half a second, but if you changed it to 0 seconds, it would act just like any normal ScrollViewer.

ScrollingSpline (KeySpline) – This property along with the ScrollingTime property is meant to give designers and developers the easiest control possible over the animation. This property describes the spline along which the scrolling will animate. If you don’t know what this means, just leave it alone, you’ll be fine.

TargetVerticalOffset (double) and TargetHorizontalOffset (double) – These are properties that tell the ScrollViewer where it will be animating to. In the PropertyChangedCallback, they kick off a method that starts the animation.

VerticalScrollOffset (double) and HorizontalScrollOffset (double) – For some reason the normal VerticalOffset and HorizontalOffset properties in a ScrollViewer are not capable of animation. So I wrote these properties that can be animated using standard storyboard procedures. If you use them to animate, make sure you also change the TargetVerticalOffset and TargetHorizontalOffset stuff as well… otherwise there will be a disconnect between the two.

Event Handlers

CustomPreviewMouseWheel event handler – This grabs any mouse wheel spinning and uses it to change the TargetVerticalOffset so that the ScrollViewer will still animate the scrolling when the mouse wheel spins.

VScrollBar_ValueChanged and HScrollBar_ValueChanged event handlers – These are called whenever the the ScrollBars are interacted with. There was a really weird problem with some of the interaction (the arrow keys and fast-scrolling buttons weren’t working properly), so these handlers hold logic to try to translate the weirdness into something viable. They then set the Target_Offset properties appropriately.

Methods

animateScroller – This method builds the animation programmatically based off of the appropriate properties and runs it.

And that’s really about it. Once you have the AnimatedScrollViewer working, you can just add use it inside your ListBox templates and it should work. (For those who are averse to doing such a thing, I’ve added extremely simple AnimatedListBox.)