Sean Gerety

Expression Add-in

I know that there is an Add-in contest going on for visual studio, however where I would really like to see one is in the Expression Suite.  I’d like to see a storyboard add-in for both Expression Graphic designer and Expression Interactive Designer.  The storyboard feature could be used to storyboard out the interaction of your applications.  Mock-ups could be created in EGD and then sent to EID for further work.  You would need a view that would show interaction paths (in both products) and allow you to also show an atomic state view (think button behavior onmouseover, etc).  To further the value of this feature you could integrate with Cider and VSTS (what I like to call Visual Studio Team Slayer).  Just think, adding UX into the Software design process.  Huh?  I’m talking about slide 155 from Simon Guest’s TechEd 2006 presentation.  And these storyboard layouts could later be used for documentation, training and requirements (and goals). 

Think of this as a way to paper prototype.  I know that people use everything from Photoshop to PowerPoint to Visio, why not use the Expression tools and create artifacts that you can keep and use? 

Until then you could do this now (somewhat) by creating a new XAML window for each state (or page) and paste them up on a whiteboard.  Have fun.

Tags: WPF | XAML | net3

WPF Coffee Talk (at a brewery)

I'd like to introduce a way for people to talk about and learn about improving User Experience (UX).  We'll be using Expression Interactive Designer (Sparkle), Visual Studio 2005(Cider) and Windows Presentation Foundation (WPF, aka Avalon).  The idea is to have a small group of people discussing technology, tools, challenges and process over coffee.  I want to keep the group small so that we all can talk to each other instead of having someone talk 'at' you for an hour.  The reason for this is unless you're Don Box or Pamela Anderson people usually aren't going to pay attention to you for that long.  
 
We'll be discussing some high level introductory points initially and then as these go on well get more technical complete with ongoing projects.  I've got a project in which I show how I used the various tools.  And here's some of the questions that we'll discuss at the first Coffee Talk.
 
What's the payoff of UX?
How do I use these tools?
Which tool and when do I use it?
What's WPF?  Why should I care?  Why should my boss care?
How does UX fit in my development methodology?

Who should come?  Anyone that's interested, from a student to a CIO. 
Where is it going to be?  At the 5 Seasons Brewery. 
When?  7:00pm on 20 Feb 2006

See you there.

Sean

How to install the January CTP

Go to Tim Sneath's Blog to get the links to pull down the January CTP bits.

1. Run uninstall tool - vs_uninst_winfx.exe
2. Run the Winfx setup - winfxsetup.exe
3. Uninstall the Dec SDK
4. Uninstall the Micorosoft Command Shell
5. Install the SDK using a tool like  vcdControlTool.exe (just select your .img file)
6. Reboot - this helped me for some reason.  You could skip it.
7. Run vsextwfx.msi

8. Read the WinFXReadme.htm where you'll find lovely tidbits like this one below.

IntelliSense in XAML (inside the XML editor):

The Windows Presentation Foundation and XAML schemas provided with the WinFX SDK are not flawless. Today, many things can compile that the schema may not approve of. We also have things that the schema will approve that will not compile.

The schema will complain about attribute values that are not properly cased. Although type converters are generally not case sensitive, XML schema has limitations. We've chosen to put the matching case with the object model in the schema.
DockPanel.Dock="fill"
will compile, but the schema would prefer this form:
DockPanel.Dock="Fill"
ColumnDefinitions and RowDefinitions as direct children inside a Grid will compile and execute fine, but we'd prefer if you use the following syntax today:
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition ... />
        ...
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition ... />
        ...
    </Grid.RowDefinitions>
    ...
</Grid>
Unfortunately, the schema in this release will complain about both ways. In the future, it will not complain if you use the preferred syntax.
Some elements will complain with the "content model is empty" warning. Many times, however, the compiler will be able to handle it.
If you build a custom element (often a custom control), IntelliSense in the XML editor will not work unless you hand build a .xsd for that control and put that .xsd in %programfiles%\microsoft visual studio 8\xml\schemas\

Happy XAMLing,

Sean

January CTP available

There's a new CTP of WinFX bits available, however there's nothing new for WPF (Avalon).  But if you are working in WCF (Indigo) or WF (WWF) have at it. 

It would have been nice to have a little more functionality in Cider, but considering everything, I'm sure that we'll see some more interesting bits in a couple of months.   And speaking of interesting, how long till we start to hear about WPF/E?  I'd love to see Live gadgets using WPF or WPF/E.

UPDATE! - There are updated Cider bits!  From the mouth of Tim Sneath

WPF Category needed in NewsGator

I was reading some blogs on my web edition of NewsGator last night and started to look around for some other people blogging about XAML, WPF and WPF tools (Cider, Sparkle).  And I started to "Browse by Category".  And I figured it was under Technology, and after looking under "Technology : Operating Systems : Windows/PC" and under "Technology : Other" I didn't find anything. 

So I'm lobbying for a category for "WPF" in the Newsgator categories for like minded XAML and WPF geeks.  Let me know if you want this category and I'll pass on your info to NewsGator.

Sean

Atlanta Geek Dinner

Next week is the Atlanta Geek Dinner at Five Season's Brewery.  The Geek's will start mulling about at 6 on Thursday 19 Jan of 2006.  I'll be there and if you want to talk about Avalon, Cider, XAML or UX.  Just look for me I'll be the one with the beer.  If you're going please RSVP to the ADOGuy by email.

Sean

XMLDataProvider in Cider

After working on my treeview sample using Cider,
I started to wonder what's up with the XMLDataProvider?
I dropped in my node, the x:Key and the source property,
But something was funny!

I could not get it to build,
I was not very thrilled.

The Error List said all objects added to an IDictionary
must have a key.
Something was missing to me.

So I searched the help file,
and it took me a while,
to notice all the samples were done in the same style.
Their samples do not reference an external file!

Something is amiss with the XmlNamespaceManager,
Hmmm, I must find someone to badger.

I even found this sample,
but it made me woeful.
The XmlDataNamespaceManager node was unknown to the schema,
which made me feel like I was dealing with FEMA.  

Maybe my friend DonXML,
and the other MVP's of XML,
can get me out of this hell.

Cider (WPF VS.NET designer) Forum

There are a couple of forums available to XAML geeks out there that you should check out. 

The "Cider" forum - The designer for WPF and XAML in Visual Studio.

The "Avalon" forum - A place to discuss and learn about Windows Presentation Foundation (aka "Avalon").

Sean

Rounded Edges in XAML

DonXML and I were chatting recently and he was talking about a upcoming post about creating rounded edges with out tables.  One of the nice things about XAML is that this is really easy to do.  Below is a picture of a sample that I'm working on for the TreeView control.  Here I've used two methods to create rounded edges.  One's a hack and one is the correct way to do it.

In the hack I use a Rectangle element and a TextBlock together. 

Stroke="Honeydew"  

StrokeThickness="3"

RadiusX="20"

RadiusY="20"

Fill="CadetBlue"

Height="Auto"

Width="Auto"

HorizontalAlignment="Stretch"

VerticalAlignment="Stretch"

Grid.Column="2"

Grid.Row="1"

Margin="3,3,3,3">

Grid.Column="2"

Grid.Row="1"

Foreground="Honeydew"

FontSize="20"

FontFamily="Segoe UI"

HorizontalAlignment="Center"

VerticalAlignment="Center"

>Treeview w/ DataTemplate

You can create rounded corners with this model by using the RadiusX and RadiusY properties but, you'll have to watch out and mind your margins and padding .  For example here in the TreeView element, this is necessary to make sure the edges of the TreeView control don't overlap on the Rectangle control.

…

The problem with the above method is that your content in the TextBlock example is overlaid (remember that XAML is like SVG in that it renders the elements in order).  When you resize your window the text will not honor the "boundary" of the rectangle.  And you'll get out of bounds text, as demonstrated below.

 

Here's the method of voodoo that you'll really want to use. 

First, grab a chicken and swing it over your head three times.  Just kidding. Don't do that, it'll make the chickens dizzy.

Instead enter the handy dandy Border element.  Just slap that around your controls and add the CornerRadius property for magic rounded edges and you're off and running.  Please notice that the TextBlock here is a child of the Border element and not a sibling. And another footnote here is that there is a Grid element wrapping all of this.

Background="Honeydew"

BorderBrush="CadetBlue"

BorderThickness="3"

CornerRadius="10"

Grid.Row="1"

Grid.Column="1"

Margin="3,3,3,3">

Grid.Column="1"

Grid.Row="1"

Foreground="CadetBlue"

FontSize="20"

FontFamily="Segoe UI"

HorizontalAlignment="Center"

VerticalAlignment="Center"

>Treeview w/ XPath

 

So there you have it.  Rounded sexy corners in your apps with one easy tag.

 

Enjoy.

Mix06

I was just checking out the Mix06 conference site and while it sounds very Web 2.0'ish I'd love to go.  Why?

Look at this line located in "The Facts".

The latest on IE7, Windows Vista, Windows Media Center & Xbox 360, InfoCard, Windows Presentation Foundation, the Atlas AJAX framework and Windows Live!

Why is this interesting to me?  Because they'll be talking about Windows Presentation Foundation (WPF, aka Avalon!).  WPF will eclipse the AJAX experience, IMO.  Will they be talking about WPF/E (E == Everywhere)?  Maybe, I don't think that it's baked to golden brown yet, so this one will probably stay in the wings for a while.

However, why WPF is not a discussion bullet is beyond me.  (Actually I'm sure they'll be discussion, I just think it should be on the front page!) 

So here are two bullet points for WPF for "The Discussion". 

• How can I provide a superior experience from the web, to the living room and on my computer using WPF?

• Sparkle or Cider - Who's going to use which? 

Mind your typing when playing with XAML in Cider

If you get the following error "Unknown build error, 'Input string was not in a correct format. Line 60 Position 120.'"  Make sure that you are closing your {} on Binding statements.  This line will give you an error:  <HierarchicalDataTemplate x:Key="itemTag" ItemsSource ="{Binding Path=ChildNodes" /> 

I've highlighted the ItemsSource in red because that's the offending bit of code, and I just want to save everyone a little bit of time.  Possibly this could be a feature request to the Cider team to keep me from "fat fingering" code.  Maybe that's what I get for typing in straight XAML.