Animating a Silverlight Object's Embed Size Using jQuery or MooTools

One of the projects I'm working on right now requires having a Silverlight object on a page grow to be larger and shrink to be smaller as its containing <div> area's size is changed using javascript. Below is the Silverlight embed code, and the relative javascript for using either jQuery or MooTools. All the javascript functions take action on a div section named 'resizableControlHost' which I added to wrap the normal 'silverlightControlHost' div section.

Basic HTML of Silverlight object embed (wrapped in a 'resizableControlHost' div):

<div id="resizableControlHost">
    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," 
                width="100%" height="100%">
        <!-- details removed -->

Resizing the 'resizableControlHost' div with jQuery:

function gotoSmallSize() {
        width: "200px",
        height: "100px",
    }, 500);

(click 'read more' to keep reading..)

Quick Tip: Windows Phone 7 Preprocessor Directive

If you're sharing common code between Windows Phone 7 and other platforms in either Silverlight or XNA, then you may run into a need to fork some code based on the platform. This is normally done with a preprocessor directive, which for Windows Phone 7 is WINDOWS_PHONE.

A Simple Twitter Panel in Silverlight

While sitting on the couch last weekend, I had the idea for putting up a Twitter panel on my site - you should see it off to the right. I figured since this is a Silverlight site, that it might be nice to actually have some Silverlight on it. I got the Twitter panel mostly done in 2-3 hours, and ended up using a few Silverlight features I haven't blogged about yet on the site - hence this blog post.

This post contains:

  • Binaries for the Twitter panel so you can use it on your own site
  • Passing in startup parameters from the object embed code
  • A simple reusable Twitter assembly for Silverlight
  • Source code for the Twitter panel
  • Using Fluid UI to animate items added to the ListBox

(click 'read more' to keep reading..)

Thinking Outside the Box - Using Programatic Animations in Silverlight

At the Atlanta Silverlight Firestarter a few months ago myself and Mason Brown did a talk 'Lighting Up the UI'. At the end of the talk I ranted a bit trying to encourage developers to think outside of the box when approaching UI's in Silverlight - to be open to creative ways in tackling new UI challenges. (You can find more on this talk in these posts on SilverlightAtlanta.net).

The example I went over in my example was a simple example of how to move an item from one ListBox to another. Most developers would look at this task the same way - they would remove the item being moved from the 'from' ListBox, and they would add the item to the 'to' ListBox. It would probably look something like this:

// get a handle on the item we are moving
ListBoxItem lbi = fromList.SelectedItem as ListBoxItem;
if (lbi == null)
fromList.Items.Remove(lbi); // remove it from the 'from' list
toList.Items.Add(lbi); // add it to the 'to' list

When you work with designers and usability engineers you'll often get challenged to do something which requires you to think outside the box. In this example the request is to get rid of the 'popping' between lists. The intent is to actually move the item, and show it moving from one list to the other - this is the sort of detail that can distinguish a standard app from a real user experience.

Here is a sample Silverlight application which shows off moving an item between lists both through the standard add/remove method, and our 'thinking outside the box' method we'll cover after the break:

Get Microsoft Silverlight

(use the radio buttons to see the two ways of moving an item between ListBoxes)

(continue reading ...)

A Decent WPF StatusBar Example

A simple, but hopefully decent, StatusBar example in WPF/XAML

Searching for information on new(er) technology can be pretty interesting. Sometimes you can find all the information you need, and other times you can't find anything. For whatever reason finding information on the StatusBar in WPF was one of those things where the articles written on the subject were slim pickings. Luckily it is really easy to reinvent the wheel in XAML if necessary once you know the basics.

It is pretty easy to create a StatusBar, it's just as you might imagine it would be in XAML:

<StatusBar> <TextBlock>Field 1</TextBlock> <Separator/> <TextBlock>Field 2</TextBlock> </StatusBar>

The problem is that typically you need something a little more advanced in your StatusBar. You'll probably want regions which can expand/contract, a tooltip to read the truncated text, some columns which are fixed width, and you probably don't want your items to go off the edge of the screen if the window is too small or the text too large either. Keep in mind that the StatusBar container behaves like a DockPanel when your trying to make use of it.

Attached is a XAML file of the StatusBar example shown above. The basic premise is that the StatusBar contains a Grid which defines the areas on the StatusBar, and some of the fields are allowed to be as large as they need while others will be truncated if they are too long to fit.

You can make any TextBlock show the Ellipses(...) by using the TextTrimming and TextWrapping properties, or in a Style definition like this:

<Style TargetType="TextBlock" x:Key="StatusBarTextBlock"> <Setter Property="TextWrapping" Value="NoWrap" /> <Setter Property="TextTrimming" Value="CharacterEllipsis" /> </Style>

.. just keep in mind that a TextBlock inside a StackPanel, or some other container allowed to grow horizontally indefinitely, will never show the ellipses because it will never actually be forcefully constrained - even if it is cut off and the full text isn't visible.

We also want to add the drag handle in the lower right corner of the Window, which can be done with the ResizeMode Window property like so:


Be sure to check out the XAML file attached and provide any suggestions you might have, or ask any questions, etc. Hopefully the keywords in this post will be good enough to help someone else down the line when trying to create a decent WPF StatusBar.

A Fancy Diamond Pattern Tiled Background in WPF

So I am working on a little side project - which hopefully I'll present in the coming month - and I wanted to make my window fill something more fancy than a solid color or a gradient - particularly I wanted to have a diamond pattern fill for the background. So, here are the steps I took and what I ended up with, download the XAML files and open them with Kaxaml if you want to check them out.

For my first try I did a few brief web searches and came across a few good articles to get me started - particularly Painting with Images, Drawings, and Visuals, DrawingBrush Class, and PathGeometry Class. Using these references I created my first try at a diamond fill (attached as diamond_stretchfill.xaml), which ended up something like this:

My next step was to get the diamond fill to not just be one big diamond, but a tiled diamond pattern. I did this with a minor change, specifically adding the Viewport property on the DrawingBrush (attached as diamond_tilefill.xaml), which ended up like this:

So I got the tiling working, but with one obvious problem - the diamonds stretch based on the size and aspect ratio of the window. Another quick search of the interwebs netted me an article on the TileBrush.ViewportUnits Property which lets you specify whether your units in the Viewport are either Relative or Absolute - in my case I wanted the sizing to be absolute, and not based on the window size.

I also wanted to my diamonds to have one gradient, and the window fill behind it to be another gradient across the full window. To do this I got rid of the black fill in the pattern and left that part transparent and I use one grid with the diamond tile background over another grid with my new gradient background (attached as diamond_tilefill_final.xaml). I also made the diamond tiling a bit transparent itself, and it turned out something like this:

I know this writeup wasn't all too exciting, but honestly I think the flair which will come from WPF apps won't be the over-the-top stylings, but the minor tweaks which make the UI pop a bit more than an old Windows Forms app. Also, I didn't find a diamond pattern fill example on my first search of the interwebs, so maybe this will help someone else out down the road.

PDC2008 is in less than a week - I can't wait.


Recreating Simple Windows Forms in WPF and XAML (Part 2)

One of the more obvious issues with the initial post of the dialog XAML code last night was all the hardcoded colors, so this post will be a quick example of how to use defined colors and gradients instead so that when you want to change the colors you don't have to go looking through all the XAML to find where the colors are to modify.

Here is a snippet of the original XAML, specifically the blue gradient header across the top of the dialog and the white text on it:

    <!-- Top Panel (icon, description, help, etc.) -->
    <StackPanel Orientation="Horizontal" Width="500" DockPanel.Dock="Top">
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
          <GradientStop Color="Navy" Offset="0" />
          <GradientStop Color="MidnightBlue" Offset="1" />
      <TextBlock Width="358" VerticalAlignment="Stretch" Padding="4,4,4,0" 
                 TextWrapping="Wrap" Foreground="White">

The easiest thing to do right off the bat is to just take the LinearGradientBrush definition and move it up to a Resources section you create for the Page (or Window, etc.) - since we are working with a Page we will create a Page.Resources section right under the main Page definition:

    <!-- header panel styles -->
    <LinearGradientBrush x:Key="headerPanelFillBrush" StartPoint="0,0" EndPoint="0,1">
      <GradientStop Color="Navy" Offset="0" />
      <GradientStop Color="MidnightBlue" Offset="1" />
    <SolidColorBrush x:Key="headerTextColor" Color="White" />

There are two brushes defined in that snippet - the 'headerPanelFillBrush' which is the blue gradient fill in the header, and the 'headerTextColor' which is the white color used for the text - these brushes will be referenced by the value we set for their 'x:Key' tag.

(click 'read more' to read the full article..)

Recreating Simple Windows Forms in WPF and XAML (Part 1)

So after two or three weeks of playing around with WPF/XAML I figured the best place to go next was to try and do some dialogs like I might do today in Windows Forms. I wrote these by hand using the Kaxaml tool mentioned on the recent Scott Hanselman podcast, and if you have that installed you should be able to make use of the .xaml files attached to this post pretty easily.

Keep in mind that this XAML is by hand (with Kaxaml's intellisense), not created via Blend or VS2008, and the XAML is probably atrocious to XAML experts - that's sort of the point. I'll be referring back to this project as I improve it - this post is just the initial post.

A simple dialog

(click 'read more' to read the full article..)