| Comments

I was helping a friend today doing some over-the-shoulder code review and suggestions for his Windows app he’s writing for the store.  In doing this I asked a question about how to perform a certain action.  He indicated that he put those functions in the AppBar and was it not obvious I was supposed to use them.  I looked at the AppBar again and found out why I wasn’t drawn to them.  First, the labels he used weren’t descriptive to me and relied too much on me looking at the actual icon.  Second, however, is that when I hovered over them I received no visual feedback I was expecting and immediately thought they were just disabled (the color was slightly gray as well which probably didn’t help this).

I mentioned these to him and noted he should use the AppBarButtonStyle base definition that comes in the Visual Studio templates as a guide and just set the appropriate content.  He proceeded to let me know that he received the vector data from Syncfusion’s Metro Studio product.  We then began to examine the vector data.  Metro Studio is doing probably too much than it needs to for AppBar button definitions.  To be fair, it serves a goal to get Windows UI style icons for the developers in XAML form.  This is great!  However, if my intention is to use them for AppBar buttons, then it is doing too much.  It led me down a path to see how easy it was to use vector data with the default AppBarButtonStyle definition.  Turns out it wasn’t as simple as I thought.  Let me first explain the core issue then walk through a step on how to do this with vector data.

Fill versus Foreground

The main culprit is Fill vs. Foreground.  The default AppBarButtonStyle has the different visual states for setting the correct default/inverted colors for your icon within the ellipse.  These visual states however set these colors based on changing the Foreground property of the ContentPresenter.  When your content is text – as is the case with the default styles that are commented out – this works fine.  However the Path element in XAML understands Fill and Foreground doesn’t really apply.  So while the vector data could be represented in the icon location, it wasn’t working on the different states because the Foreground value changing had no effect!

Let’s see how we can accomplish this…

Step 1: Get your vector data

I mentioned that we discovered this using Syncfusion’s Metro Studio, but this is one way where you can get vector-based artwork for XAML.  Another is http://xamlproject.com which is similar in how it does things.  Both will give you vector data based on a selected icon.

NOTE: The one thing I don’t like about The XAML Project site is the sizer doesn’t tell me what size I’m using.  Metro Studio gave me the option to set a specific size.

When we launch Metro Studio we can search for different items based on keywords.  Since the Segoe UI Symbol font includes a ton of these for us (all of which are represented in a commented-out style definition in StandardStyles.xaml you can just uncomment and use) I will pick an obscure one called “wash” from Metro Studio.  When I select to edit it I’m presented with a default UI to modify the data:

Metro Studio user interface

Now notice how it gives me options for background shapes, etc.?  For an AppBar button you do not these shapes so you can uncheck that option.  Secondarily the ideal size is 20px with no padding.  The colors (background color and icon color) don’t really matter here as we aren’t going to use them to get the default AppBar button style.  My final options look like this:

Metro Studio user interface

Notice I unchecked the Background Shapes option, chose Custom Size and entered 20 with 0 padding.

Now what I do is click the XAML button and am presented with the full definition.  You don’t need it all.  Just copy only the path Data to your clipboard or wherever you can get it later.

Metro Studio path data export

Now that we have our vector data we need to put it in our button.

Step 2: Creating the path button definition

Because of the Fill versus Foreground issue we can’t just simply use the AppBarButtonStyle as the button style and just set our vector data.  We will not receive the correct state visuals when it is used.  So we first need to re-define a base that we can use.  Since I may use other vector data in the future, I’ll encapsulate this in a new base style I’ll call PathBasedAppBarButtonStyle.  This will allow me to remap Foreground to my Fill property to achieve the desired outcome.  The resulting style is this:

   1: <Style x:Key="PathBasedAppBarButtonStyle" BasedOn="{StaticResource AppBarButtonStyle}" TargetType="ButtonBase">
   2:     <Setter Property="ContentTemplate">
   3:         <Setter.Value>
   4:             <DataTemplate>
   5:                 <Path Width="20" Height="20" 
   6:             Stretch="Uniform" 
   7:             Fill="{Binding Path=Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}" 
   8:             Data="{Binding Path=Content, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
   9:             </DataTemplate>
  10:         </Setter.Value>
  11:     </Setter>
  12: </Style>

Notice that for Fill and Data I’m using Binding with the RelativeSource being the TemplatedParent…the actual Button.  This allows me to essentially get at those properties that will be set and put them in my Path element that makes up the container for the vector data.

Step 3: Setting our custom vector data

Using the exported definition from my “wash” icon above, I can now use the style in my AppBar resulting in something like this:

   1: <Page.BottomAppBar>
   2:     <AppBar IsOpen="True">
   3:         <Button Style="{StaticResource PathBasedAppBarButtonStyle}" 
   4:                 AutomationProperties.Name="Wash" AutomationProperties.AutomationId="WashAppBarButton"
   5:                 Content="M9.6803506,4.8474294C10.209365 ... 3.5652149,0z" />
   6:     </AppBar>
   7: </Page.BottomAppBar>

Please note that I trimmed the Path data so as not to take up so much space for your reading.  I set my Button to use the base style, then set my label (via AutomationProperties.Name) and the Content is the exported vector data from the tool.

NOTE: AutomationProperties.Name is used here in the base AppBarButtonStyle to enable us to expose the Content property as the icon and still have a label.  By using this property you also get accessibility for free in using these styles for this particular instance.  Screen readers will read out the name you set when using this.

The resulting visual is correct in the AppBar UI guidelines:

Wash AppBar Icon displayed

Now when my users mouse-hover or press this button the correct visuals and state changes will happen.

Summary

The default AppBarButtonStyle base definition provided from the Visual Studio templates is optimized for the 150+ styles provided in StandardStyles.xaml and font-based vector data.  For most, this is likely more than enough to use the same icons that are used throughout the operating system to give a consistent feel.  If you find one in the 150+ styles provided you should use that.  However if there is something entirely custom or not available in those, you can use your own vector data to provide your AppBar icon.  Using fonts and vectors make it easy to scale up to the different resources without having to provide different images if you used that method.  Defining a new base for vector data isn’t difficult and provides us the flexibility when we need it!

Hope this helps!

| Comments

Inkscape.orgi had previously done a screencast where i talked about the tools i use to convert vector graphics in SVG format to XAML assets to be consumed in either WPF or Silverlight applicaitons.  one of the tools mentioned in the screencast is .  inkscape is an open source vector graphics editor, with capabilitis siilar to illustrator, freehand, etc and uses the SVG file format (mostly).  one of the cool things about inkscape is the extensibility already offered in the open source platform.  after having some colorful discussions with my local linux group on their discussion group, i met one of the inkscape contributors.  we 'chatted' (read: emailed) privately off the group for a while about vector formats, why not SVG, etc., etc. and ended up in an amicable place understanding the role of XAML.  through this, ted, helped contribute a checkin to the inkscape project that enables files being edited in inkscape to be exported directly to XAML format.

ted tells me the inkscape guys will have a booth at the southern california linux expo in february.  i think that they'll have a stable build of the xaml feature by then (crossing fingers).  if you are brave enough for daily builds it is already in there if you want to try it out.  if you are going to be in in southern california, you should stop by the expo and chat it up with the inkscape crew that will be manning the booth.  it's a great tool that has helped me in the past few months.  while the conference isn't free, well neither is the expo, the expo hall looks like a $10 ticket.

UPDATE: register with code MOF1 and you'll get 50% off the registration to SCALE!  thanks ilan!

UPDATE2: jon galloway demonstrates his tests of inkscape

| Comments

yo, check it.  expression design has released a service pack

what!?  i know how can that be?  a service pack < 8 months after its release?  i say awesome.  i've been wanting microsoft teams to continue to become more and more agile especially with regards to very helpful features or great improvements of existing features based on user feedback.

one such point of feedback that is implemented in is that of xaml generation of the layers and/or complete surface.  you didn't know design can generate xaml?  shame on you.  i did a podcast (you should really subscribe to the podcast feed on the left of my blog or just use this link) talking about using vector images (svg) and importing into expression design and getting xaml that you could use in your applications. 

there are essentially two ways of doing this in expression design:

    1. if you only want pieces of your design file to be xaml (i.e., you want to xaml-ize a fragment of the design), you can select the layer(s) in your design file and go to the edit menu and choose 'Copy as XAML' and bam, you now have xaml for those selected fragments in your clipboard.  go forth and develop.
    2. if you want the entire design surface to be a xaml representation, you would use the file menu and choose export.  from there you'll be presented with what looks like a typical 'save as' dialog box.  change the file type to xaml and after choosing location/name click ok.  you'll now be presented with a much improved options window (in service pack 1):

in previous versions the options weren't exactly clear.  for instance the xaml type you wanted (either WPF or ) was in a different tab).  i really like this improved export user interface.  i especially like the option of converting text to paths.  this really helps when you don't want to (or can't) redistribute any type faces.  upon export, you will get all the xaml plus (if you chose that option) path data for your text areas.  very cool.

so if you have design files or vector files that you would want to use in silverlight, this is the perfect tool and function to create the xaml representation of that data.  so go get service pack 1 for expression design and you'll be happy.

| Comments

i recently started to embark on a little 3 part series involving taking a pdf document of a baseball field and doing some and love with it.  it led me along a path of creating some intense xaml design elements actually and i thought i'd share (in simpler form) the process i used.

is a graphic tool that enables creating vector art that can then be exported to xaml (either WPF or silverlight).  it is a great tool that i'm starting to be more and more familiar with.  design understands various import and export format but sometimes your existing assets might not be directly importable.  have no fear there is a simple process (hopefully someone will automate this in one of their tools).  i just added a podcast (feeds listed on the left of this site) demonstrating the steps i used to convert an .svg file to readable in expression design, then export to silverlight xaml for an application.  it's only 8 minutes and might help if you are running into similar challenges.  you'll see that pdf documents with graphics also might give you some love.

| Comments

you can tell when a new fiscal year has started (or at least the month after a new fiscal year).  people are back from vacations, meetings are more frequent, last-minute trips are planned, you get the picture.  all of this has been counterproductive to me being able to really sit down and do some fun things with .  not to feat though, some great things have been going on.

after i had helped "bcl man" :-) upload some videos of ironruby, i decided it did not do him justice to use one of the vanilla templates and altered it a bit to match the current style of his site.  it took all of 10 minutes to do it.  how?  well, i'm working on a screencast to demonstrate just how easy it is to cheat :-).  in the meantime, scott did notice that one of the minimalist templates was removed missing from the expression media encoder update.  what is great is that the team listened to the feedback (wait, aren't they listening to a fellow employee now?) and put it back in.  very cool.  although i'm not a huge fan of 'clean' i think it represents a good start for using silverlight to render media in a custom player.  to use 'clean' simply extract it into your <installdir>\Microsoft Expression\Media Encoder 1.0\Templates\en\ folder and it will show up in the output options.

which brings me to my next thoughts...there is a lot of options to learn silverlight out there.  i've been trying to provide some quick hits myself.  in doing so i think there have been a lot of assumptions made to our users/developers.  if you troll the forums, you'll notice people are struggling at times with simply getting started.  i've been asked a few times and helped a few of 'what do i need' to do silverlight.  well, here's my toolbox (in install order).

    • windows vista ultimate (hey, i'm a windows guy...and it has ultimate in the title...c'mon tell me you don't want that over premium :-))
    • expression design -- not using too much, but that's because i'm working in simple art now.
    • blend 2 august preview -- note that you can install this on top of blend v1 rtm and they run side-by-side if needed.  when you install blend2 you'll notice that there is only one silverlight project type (javascript)...standby and keep installing...
    • visual studio 2008 beta 2 -- why beta 2?  well, up until beta 2 dropped, i'd been using visual studio 2005 to do silverlight...which is perfectly fine actually (some subtle nuances, but okay if you don't want to install beta), but then with the beta 2 drop i noticed that it is now my single ide.  why?  multi-targeting baby.  i can start a new project and tell the ide what fx version to use...wicked, wicked cool -- this has been needed for some time!
    • silverlight 1.1 alpha refresh -- now why not just v1?  well, here's the deal...installing v1.1 alpha refresh *gives you 1.0 already* -- i've seen people install both...you don't need to.  installing 1.1 gives you both my friend.  now, the plugin for 1.1 doesn't auto update right now so you'll have to update yourself, but for me as a developer, i recommend using v1.1 to get your chops going.
    • silverlight tools for alpha -- this gives you the orcas project templates, intellisense, project linking, etc.  when you are in vs2008, these help.

that's it -- when you have that, you have a great environment to develop silverlight apps.  now there are a few other things you can put on (like media encoder), but i'm just talking basics here that make me productive.  now when you launch blend2 you'll see the 1.1 project templates as well.

now, here's my workflow when doing a silverlight app.

      1. i start in blend.  why?  it really is a fun tool to work in.  for what i've been doing it makes sense to start there.  honestly i don't want to do xaml by hand...forgive me.  blend is an intuitive tool even for non-professional interactive folks like myself.  i make sure the xaml i need is there, tight, etc.  i create my xaml controls, etc.  if i'm using javascript for v1, sometimes i just stay in there and use notepad for javascript.
      2. once i've gotten it to a certain point (and assuming i'm doing 1.1 development) i right click on the project in blend and say "edit in visual studio" -- boom vs2008 launches and i can get to some geek code.
      3. at this point it is iterative for me.  i'll inevitably find something that wasn't right in my thoughts in deisgn and move back and forth -- i keep both tools open at this point.

one note i've found is that when you "F5" your project (that's keyboard-shortcut-lingo for 'run') in vs2008 it launches it as a file system.  this could be frustrating for some if you are using downloader objects as the RC doesn't allow the file:/// protocol anymore (which by default launching as a file system project it would be using).  if i know i'll be doing this, i simply open the blend project as a web site (file, open web site) and then it runs under cassini, problem solved.

so that's my quick and dirty on my environment and my workflow.  simple enough i think.

off to samples.  so here's my plan on what i'd like to create and stuff i'm working on:

    • cheating at building a custom media player
    • consuming web services in silverlight
    • writing a custom control for silverlight: part 1 and part 2 
    • end-to-end using silverlight streaming
    • part 1: getting vector art for a starting point (using expression design and files you find on the internet)
    • part 2: leveraging the vector art in silverlight in combination with asp.net ajax for a compliementary interaction
    • part 3: using asp.net ajax to create a silverlight control and create some dynamic interaction with both (for this series, my comrade is coming to the rescue to demonstrate a pattern on doing this).
    • integrating windows live services with silverlight
    • integrating 3rd party api's (yelp, facebook) with silverlight

i noticed that laurence also is working on some good things and sees the need as well for some back-to-basics starting points.

so what do you think?  what would you like to see from all of us?  seriously, please comment and suggest.  i really want to make people more productive in their use of our tools and frameworks...give some thought and make some suggestions on what you'd like to see or what from the above would be lame (i might do it anyway, but just want a pre-opinion i guess).