Expression Blend, Silverlight

BALL Watch Silverlight Contest Winners Announced

The judging for the BALL Watch Silverlight Contest is now over and we are proud to announce the winners.  Entrants had 59 days to recreate one of the watches from BALL Watch USA with Silverlight using Microsoft Expression Blend 4 (no images, or video allowed - only XAML vector graphics). Once the entries were submitted, we had a panel of judges rate the watches on visual accuracy, functional accuracy, and the innovative usage of Silverlight.

See this announcement of the winners.

Judges

  • Jeffrey Hess – President BALL Watch USA
  • Gary Girdvainis – Editor in Chief, International Watch
  • Bill Buxton – Principal Researcher at Microsoft Corp.

US Contest Winners

image Jesse Chu won the Grand Prize with his entry, the Ball Trieste Chronograph - he will win the BALL Engineer Hydrocarbon TMT Watch, retail value $3,399.
image Brian Mutschuler won the First Prize with his entry, the Ball Conductor Chronograph - he will win the BALL Fireman II Watch, retail value $999.

We also held a similar contest for Microsoft employees in the United States and we are proud to announce the winners of that contest:

Microsoft Employee Contest Winners

image Jonathan Steed won the Grand Prize with his entry, the BALL Trainmaster Moonlight Special LE - he will win the BALL Trainmaster TMT Watch, retail value $2,999.
image Joe Milan won the First Prize with his entry, the BALL Fireman Storm Chaser - he will win the BALL Fireman II Watch, retail value $999.

Thank you to everyone who participated in the contest.  If you are interested in seeing the Silverlight 4 (and Windows Phone 7) custom control that these watches were based on, you can see my BALL Trainmaster Cannonball Watch and download the code here.

Related Posts:
Recording Available from LiveMeeting on Creating an Entry for the Ball Watch Silverlight Contest
Enter to Win a Ball Watch by Creating One in Silverlight
Virtual Event: Creating an Entry for the BALL Watch Silverlight Contest
Next San Francisco Silverlight User Group Meeting July 8
A Value Converter for the BALL Watch Silverlight Contest

Tips and Tricks

Tip 305: Silverlight with style

If you find a control in Expression Blend that fits your needs and supports templates, but doesn’t look the way that you want it to, modify the templates of the control to change its appearance.

Related Posts:
Liftoff and Linux!
Silverlight Reference
Silverlight Apple "Staff Pick"
SF Silverlight User Group
Four Great Online Resources for Learning Silverlight

Tips and Tricks

Tip 302: Made from scratch

If you want to design a reusable component that can be added to the artboard just like a system control, create a custom user control.

Related Posts:
Tip 225: See into the future of your encoded file.
Building Schools of the Future (BSF) WPF Demo
Signs of Change
My last Microsoft blog post
Updated Free Sketch Sheets!

Event, Innovation, UX, conference, innovate

What’s Next…

Stay Tuned Sketch

For months, I’ve buried myself in books, articles and miles of sketches, to create the content for this fall. I am very excited to see what you think. Here is a peek of the presentations and conversations that are on tap:

Stack Unconference, Omaha – I will have a few fun, collaborative ideas to toss on the wall. In true unconference form, attendees choose and direct topic content ‘on the fly’.

HDC, Omaha – I will be giving a 3 hour workshop on capturing innovation and developing great ideas. There are only 25 seats available, so if you’ll be around, grab your spot now.

On Thursday, I am giving a session on becoming a user experience designer in 45 minutes. Here we’ll focus on the key practices of experience design that will win you fans of your product or application.

AIGA Minnesota Design Camp – One of my favorite conferences of last year! I will be giving a workshop (scroll down to workshop #8) on bettering your design chops with creative play; not to be missed.

For SXSW 2011, I submitted a discussion entitled; Innovation Hunting in the Age of Prosthetic Apathy.
Check it out, leave me a comment and vote if you like it!

Related Posts:
- No related posts

Tips and Tricks

Tip 304: The original hotspots

Add a splash of interactivity to your Deep Zoom content with hotspots that you can use as clickable regions for navigation.

Related Posts:
Tip 254: When good transformations go bad
Tip 283: You can go home again
Web 2.0
Flash, HTML, Ajax: Which will win the Web app war?
Explore Design is Back! – Part II

Tips and Tricks

Tip 301: Hire the Capture Manager

In Expression Encoder 4 Screen Capture, all of your saved screen captures are assembled in the Capture Manager, from which you can delete or play back any of your captures, or open them in a Transcoding project.

Related Posts:
Tip 274: Fire up your own hotkey
Tip 270: Banish the cursor from your screen captures
The “Ignite Your Venture” Webcast Series
Idea Sketch Sheets
Did I mention I am writing a book?!

Tips and Tricks

Tip 300: Am I up-to-date?

Updates to the Publishing view in Expression Web help you spot at a glance whether the files for a site have been published to the web.

Related Posts:
A Value Converter for the BALL Watch Silverlight Contest
Azure camp SF & LA
Mind the Hand
What does Microsoft have to offer Digital Agencies? Microsoft Innovation Days
Pan Arab Web Awards

Tips and Tricks

Tip 299: EMF files are now invited!

In Expression Design 4, you can import Windows Metafile (WMF), Enhanced Metafile (EMF), and Enhanced Metafile Plus (EMF+) files into your Expression Design project.

Related Posts:
Videos are down
Tip 300: Am I up-to-date?
Windows 7 Tip: Creating A Help Toolbar
Tip 276: Breaking up is easy to do
Tip 228: Keep things interesting in the Silverlight template preview window.

Expresssion Blend, Silverlight, Visual Studio 2010

A Value Converter for the BALL Watch Silverlight Contest

A contestant in the BALL Watch Silverlight Contest was working on creating his entry (Due August 5, 2010) and sent me a question on data binding to the day of the week.  The watch that he is creating displays the day abbreviated and capitalized and he wanted to use data binding like I showed in this tutorial. Since the Chronograph control exposes a DateTime Date property, he could bind to that and use Date.DayOfWeek property, but that would return values like Monday and  Tuesday, not MON and TUE.  The solution in this case is to create a value converter and use that in the binding. 

A Value Converter Item Template

I create value converters so often in my Silverlight and WPF development, that I created a C# item template that I use over and over in Visual Studio.  I’ve posted the item template to the Visual Studio Gallery so you can use it too.  The Visual Studio Gallery is integrated with Visual Studio 2010, so you can install and start using the template right from Visual Studio:

  1. In your Silverlight project in Visual Studio 2010, select Project…Add New Item…
  2. Select Online Templates on the left and then the Silverlight group
  3. Select Value Converter, type a name for your converter at the bottom, and press Add
    image

If you want to create your own project or item templates for Visual Studio 2010 and share them like this on the Visual Studio Gallery, you should first download and install the Visual Studio SDK and then create a VSIX Project from Visual Studio with the item template .zip its contents.

The DayOfWeekConverter Class

  1. Add this DayOfWeekConverter.cs to your Silverlight project (code below and attached), changing the namespace as appropriate
  2. In Expression Blend 4, build the project
  3. If you haven’t done so already, add a TextBlock to the scene or control template, select it, and in the property editor for the Text property click on the white box to the right of the text and select Data Binding
  4. In the extended properties for the Data Binding, select Date as the Custom Path Expression and a DayOfWeekConverter for the Value Converterimage
  5. For Template Binding, you will need to do one more step – edit the XAML to specify the RelativeSource for the binding by adding a RelativeSource={RelativeSource TemplatedParent} parameter to the binding (line broken below to illustrate):
    <TextBlock 
        Text="{Binding Date, Converter={StaticResource DayOfWeekConverter1}, 
    RelativeSource={RelativeSource TemplatedParent}}"
    />

DayOfWeekConverter.cs

namespace SilverlightApplication6
{
    using System;
    using System.Windows;
    using System.Windows.Data;

    /// <summary>
    /// Value Converter for converting DateTime to 3-letter capitalized abbreviations
    /// </summary>
    public class DayOfWeekConverter : IValueConverter
    {
        #region IValueConverter Members
        
        /// <summary>
        /// Convert a DayOfWeek to a 3-letter capitalized abbreviation (MON, TUE, WED, THU, FRI, SAT, SUN)
        /// </summary>
        /// <param name="value">a DateTime</param>
        /// <param name="targetType">the target type to convert to</param>
        /// <param name="parameter">an unused parameter</param>
        /// <param name="culture">an unused culture</param>
        /// <returns>null or the 3-letter capitalized abbreviation</returns>
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (value == null)
            {
                return null;
            }

            var date = (DateTime)value;

            var dayOfWeek = date.DayOfWeek;

            var abbreviated = dayOfWeek.ToString().ToUpperInvariant().Substring(0, 3);

            return abbreviated;
        }

        /// <summary>
        /// Not Supported conversion
        /// </summary>
        /// <param name="value">the value to convert back</param>
        /// <param name="targetType">the target type</param>
        /// <param name="parameter">the parameter</param>
        /// <param name="culture">the culture</param>
        /// <returns> a <see cref="DependencyProperty.UnsetValue"/></returns>
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return DependencyProperty.UnsetValue;
        }

        #endregion
    }
}

Related Posts:
Recording Available from LiveMeeting on Creating an Entry for the Ball Watch Silverlight Contest
Enter to Win a Ball Watch by Creating One in Silverlight
BALL Watch Silverlight Contest Winners Announced
Virtual Event: Creating an Entry for the BALL Watch Silverlight Contest
Word to XAML Converter Updated

Phone

WP7 UI Guide and Design Templates

With the Windows Phone Developer Tools in beta and Windows Phone 7 in technical preview, now is the time to build Windows Phone 7 apps in earnest, and we have refreshed our Design Resources for developers and designers to help you build beautiful apps.

The UI Design and Interaction Guide for Windows Phone 7 v2.0 has been updated for beta. With additional information and a new layout we hope you will find more readable, this guide provides detailed information about UI elements and controls, UI system behaviors, and the interaction model for the touch interface based on the design system codenamed “Metro”. Designers and developers should read this guide to learn about the dos and don’ts of UI implementations for their Windows Phone applications.

The Design Templates for Windows Phone 7 are a collection of 28 layered Photoshop template files and system fonts that can be used to create pixel-perfect application layouts, to help guide UI development, or to pitch an idea. These design templates showcase many controls that are a part of the Windows Phone Developer Tools Beta. They also include examples of controls that are a part of Windows Phone, but are not available as a part of the Windows Phone Developer Tools.

Let us know what you think. If you have suggestions or feedback about these design resources, please email us at wp7des@microsoft.com.

Related Posts:
Tip 262: Go template shopping
Tip 305: Silverlight with style
Phone 7 Photoshop templates
A Value Converter for the BALL Watch Silverlight Contest
What’s in Store for Sharepoint 2010?