Facing Blend

The last few days, there have been more visitors looking for answers as to how to make a design exception “go away” without having to run the project.

The solution to this is just simply to build your project (ctrl+shift+b).  If you’d prefer to do it via the menu strip, click on Project->Build Project.  You can also do a rebuild.

Now why would this occur?  You might have a custom control instantiated into another xaml file, or development which has been updated that changes the visual elements, and sometimes you’re like me, applying something, and its just not showing.  Heck, 2 days ago, I spent at least 5 hours banging my head up against a wall because I couldn’t get a custom control to actually show in the design view, there weren’t any exceptions either.  It just wasn’t there.

I got to the point where I decided that perhaps I’d forgotten a step, so I popped into MSDN and started going through “Try It” sections.

… I discovered that all I needed to do was to rebuild, everything else that I was doing was correct.  I rebuilt the project and vwalla – there it was. 

 Hopefuly I learned that lesson well enough to not encounter this particular “issue” again. 

I hope this helps others who encounter the exception issues as well!

Popularity: 1% [?]

In my hands has been this lovely package that I’ve hardly had any time to tinker with in the last month – the Microsoft Surface SDK – as in, creating something that could potentially run on the microsoft surface, seriously useful for being able to see how “Simon” looks and interacts in its MS Surface form.

Finally, this week, work has let up a bit and I’m able to spend some time playing around with the SDK and how things work in XAML and C# on a Surface app differently than with WPF and Silverlight.

Well I’m designing away on this cute little idea of an application and I decided to give it a whirl after adding a few objects and I’m discovering something that is not anticipated.  Some of my objects are stretching!  What the heck! 

Of course I was doing the usual, overthinking the issue - I start looking for some sort of “constrain proportions” or “stretch to screen” or something to that effect.

After scratching my head for at least 2 hours (and in the process, discovering a whole lot of other things I might tinker with in the future), I finally discovered the problem.

Height and width were set to something similar to the below:

 width: Auto (96.0230004)
height: Auto (96.024)

This is easy to resolve. Clicking where the dimensions are, the numbers in parenthesis display. Once the numbers are there, I scale them down to a less specific number (i.e. turning 96.0230004 to 96.023) and hitting enter.

Running the application shows my objects no longer stretching. Hurah!

Popularity: 1% [?]

I’ve been so caught up in what I’ve been working on that I’ve not really stopped to post much about my experiences with this newly released preview of the Expression Blend series.

Blend 3 has a whole lot of new shiny features.  From the ability to see where the gradient stops are right ON the object itself as well as the ability to move them actively on that object, to the 3-axis 2.5D manipulation of objects for Silveright 3 – this new release to Blend is definitely one that’ll set someone off balance for a while to get used to the newer product.

There are 2 new features that I’d like to dedicate this post to.  The ability to have blend directly consume Photoshop and Illustrator files.

I’ll start with photoshop and its importability.  In some cases, I’ll pop into Photoshop for its flexibility and quickly design an interface or graphic.  Blend still has a quirk where paths are being manipulated that drives me to having a litter of kittens, so I’ll sometimes do my pathing in photoshop or illustrator, depending on what else I’ll be doing with the comp.

Well I recently had a project where I did just that – for Something Spacial.  I created the comp in photoshop and decided to use the blend Import tool for Photoshop Documents (PSD) and though it was nice to get a head-start in laying everything out in blend – it still didn’t give enough of one.  I ended up needing to create many of my pathed elements new because they didn’t quite import retaining the integrety of the object into blend.  My gradients were missing, the paths were disjointed, and did I mention my gradients?

There was a lot of work put in and I think I would have spent less time had I just created it all from scratch.  I do like that they’ve added the feature, but I think that the story of most software releases with new features applies – the first release isn’t always the best release.  I’ll be optimistic and say that they’ve gotten quite a great feature started, and I can’t wait for the next itteration or two where the full features are realized and implemented as well as honed to near perfection.

The illustrator file import tool I haven’t had as much real-time experience with and part of it is that I’ve been reluctant.  I already have a really nice plugin created that can export my illustrator files, maintaining full integrety of the object, and directly porting it into xaml.  It works well, a little messy on the XAML side, so I’ve had to clean that up a bit, but otherwise, everything maintained full design integrity.  So why risk it by using the import tool?

Once I get the latest SDK pack for Silverlight 3 installed, I’ll blog about the illustrator import.

Popularity: 1% [?]

FacingBlend’s Silverlight page is LIVE!

Click here to view

Since yesterday, I’ve had several emails asking questions regarding this release, so I thought I’d share a bit.

Most websites that I’ve seen around which had displays of Silverlight use weren’t as artistic as I thought a site could be.  Expression Blend is a very powerful tool, and like most tools, if you really play with it, you can find that you can do almost anything if you just play with it long enough and tailor things to fit what you want, but… I’m not seeing that being done!

So I wanted to create a silverlight website that really pushed hard and heavy on the “pretty” side.  I wanted it to use my favorite color, green ( no relation to the current popularity with “going green” ), but still have a little “windows vista /7″ glassy watery look/ feel for the background.  The centerfocus on the site isn’t really the content, its on the background which is done entirely in XAML.

That’s right – the pretty thing that appears to be raster based, is 100% xaml.

Now, I wasn’t really going for a “portfolio” either – this is my personal website.  My play-thing over the web, so I stayed away from the typical “portfolio” feel.  I’m having fun here.  I feel like I’m playing when I’m working in Expression Blend, and I really wanted that to show in the design.  I think my absolute favorite part is a little geeky.  Even the icons are done in Xaml and I think there’s just something awesome about that.

The Toybox itself was what pulled back my timeline a bit.  What to put in there?  What to NOT put in there and how the heck do I want to organize it?

Well, I kept not having time to work on this and it sat on a back burner not  being worked on for months.  I seriously had this nearly done back in December of 08, but I got stuck working on a few other things and having a blast with my family and helping out with a logo for the company, Seovian (which you can find in my galleries here on my blog).

I then was pushed by 2 different projects that I’m working with to upgrade to Silverlight 3 and with that, I forced everything aside, brought Facing Blend in Silverlight back into the forefront and finished the entire Toybox in 3 days(in my spare time).

I still look at this stuff and have to remind myself that I actually did this, all on my own, that I’m not looking at someone else’s work.  I still can’t believe how much I’ve learned in such a short amount of time.  Maybe it’ll sink in a few years from now, but until then, I keep getting deeply involved in design work and when I come “out of it” and look at the whole picture, I am impressing even myself.  2 years ago, I wouldn’t have dreamed that I could do what I just released.  It just blows my mind.

Popularity: 1% [?]

I tweeted about this earlier this week, but I felt it warranted an actual blog.

This tool – I’ve completely overlooked for all of this time.  Usually, I can recreate a gradient fairly accurately if not dead-on the original.  But uhm… I don’t have to!  But I didn’t know that.  I was recreating a real flower’s color variations and on occasion I’d click the eyedropper to obtain a color from the original but it wouldn’t actually apply the color!  Well I finally got a bit frustrated with this and sat back for a moment and then I noticed it.  There were 2 droppers.

2?!

Hover mouse over each.  The first was what I expected.  A normal eye dropper.  The second… a what?  A “Gradient Dropper?!  Wait – does that mean what I think it means?!”

So I gave it a guess as to how to use it.  I clicked on one spot, held the mouse down, dragged my mouse over to another desgination and… OMG!  An automaticallyish gradient created!

This is awesome.  So for those of you who are trying to figure out what the heck I’m talking about – where oh where would this thing be located – look to the lovely screenshot to the side with all of the spiffy arrows.

Popularity: 1% [?]

You’d think that the creation of a project in either Blend or Visual Studio, that they would start the entire solution with the same files.

Unfortunately that is not the case, and this is bad, not good.

So I’m working on a project, it has a pretty reflection on it and a main background that doesn’t take away from the elements and the bad part is I started it in Blend.  So what happens when I run the silverlight application?

My SL Is in the contained box and the rest of my browser is WHITE.  I can modify this by going to the debug folder, but then I can only open build from visual studio, because blend wants to rewrite the debug html file every time it loads.

This means that when I want to center the object and make the rest of the background more cohesive… ugh!

————–

When creating a Silverlight project in Visual Studio, it not only creates the items a bit cleaner, it also creates a seperate set of folders – inside one of these folders is a beautiful basic HTML page (and an aspx page, to use HTML, you have to right-click and tell it to be the starter page) which houses the information and is editable… and the modifications stay regardless of the application that I’m using to test!

Eeeee!

I need a “tsk tsk” bird to come out of somewhere every time I forget to start a project in Visual Studio.

Popularity: 1% [?]

The most recent group meeting with the Seattle Developer / Designer Interaction group was great – I think one of the most fun that we’ve had so far.

One of those attending was development Evangelist, Mithun Dhar, who mentioned to us the 2 upcoming XamlFest training events occuring next month.

I can’t help myself – 2 days of uninturupted training and colaboration with others who are interested in development and design working in WPF and Silverlight?

My email has been sent in to RSVP a spot – especially w/ mention that there are only 50 seats available!

Ok, so if you’re visiting and interested as well, here are a few links with information:

http://blogs.msdn.com/usisvde/archive/2009/01/22/designers-developers-ramp-up-with-februrary-xamlfest-events-across-the-usa.aspx

http://blogs.msdn.com/MithunD/

The skinny that you’ll find there is this:

Redmond & Portland both are hosts to XamlFest in the Pacific Northwest.  There are other areas that have these events as well, but I’m just going to talk about the 2 which are close to my home.  The Redmond, Washington one is the 16th and 17th (Monday and Tuesday) of February, and Portland, Oregon one is on the 19th and the 20th (Thursday and Friday).

If you wish to join, RSVP asap – seating is limited and I mean quite limited. 

The email addresses are fairly obvious which is for which, so I’m going to just list them both below:

xamlfest-redmond@live.com

xamlfest-portland@live.com

All who attend will obtain a copy of Expression Studio and Visual Studio 2008 Pro.

Popularity: 1% [?]

I don’t know if its the lack of sleep, the non-stop pouring over this book, or the fact that I need coffee, but I just got to one of the last projects for chapter 10 (there are 3 or 4 of them) and I’m seeing the direction to name a Media Element the name of “ME”.

I saw that and started internally jumping up and down.

Why?

Because I’m crazy!! … and because I’ve seen that this was a major discrepancy that entirely breaks part of the application a few pages from now. The author, Victor Gaudioso (are you as used to reading the name as I am to typing it?), has in a page dedicated to book updates, the bold letters regarding this flaw.

Not sure why – but I feel as though I just “Dinged” in levels by reaching this point (for those of you who are not gamers, that’s a common phrase used among MMOers who increase in level of skill. Quite often, the game will let off a “DING!” coupled with particle effects and text in some form or another which tells you that you’ve increased in skill/level/whatever.).

Update: Now I’m a complete retard.  I was mistaking this naming for the other.  The other was a section which I had to skip to come back to as I couldn’t get it to behave in the way specified and instead of sitting there going back and forth like a mad person comparing over and over and over again until my eyescrossed, I decided to move on and hope that my abilities and proficiency has improved enough to be able to notice the error.

Convoluted explanation.  You could have just stopped at the sentence, “Now I’m a complete retard.” and you would have been good.

Popularity: 72% [?]

The media player which Victor’s book steps you through on chapter 6 is complete.  I customized it a bit and added a back button, which was coded essentially as an inverse of the next button.

As far as the user experience elements, the play button plays, stop button stops, and pause button pauses, however, the pause button was set up as a toggle, so if it is pressed while paused, it will resume play.

Cool part that I feel I should mention is that all of the visual elements are done in XAML. The buttons appear to have been done in photoshop or illustrator, but they’re not. They’re 100% XAML code.

The limitations which I’m seeing are as follows:

The logic behind the next and back buttons are limited.  If you hit next to get to the next video, that works, however, you hit it again, and it doesn’t toggle back to the original – it just replays the 2nd video.

The same goes for the back.  If its on the first video and its playing, and you hit the back button again, it restarts the first video.

The last bit which somewhat makes me internally twitch, is that at this point, these buttons are functional, but they don’t appear to interact with the user.  I know – we’ll likely get there further into the book, but at the very moment, I just have to take my knowledge that they do actually do something and pretend that the interaction with the buttons is there in a, “Perhaps I blinked?” sort of way.  We’re not far enough through the book to start making further interactions, but in the interest of my own sanity, I told all of my buttons to change the cursor to the “Hand” so as to make them somewhat appear as if they were more than pretty pictures on a gradient.

Below is the video:

Note: This is second published video which displays an example of what can be accomplished as you’re going through this book on Blend 2. To view the first video posted click here.

Popularity: 1% [?]

By the end of Chapter 5 of the book, I’ve discovered that yes, you can learn how to use this software without the assistance of a book, but had I been able to obtain this book a year ago when I started tinkering with Blend during my spare time, I would have greatly benefited from having this “in my back pocket” sort to speak.

The biggest confusion factor which I had when cutting myself off of Adobe products, cold turkey, to force myself to learn how to use Design and Blend, was the “when do I use the stackpanel over wrap panel?” or “Should I make this a canvas or a grid?”. Plus there was the creation of something primarily vector instead of part raster and part vector – that bit is something that illustrator gurus will likely not have any problems with, but most who design for the web tend to take preference to Photoshop – and only on occasion delve into primarily vector bases.

Now, the intent of this chapter was to get you familiar with the Layout elements and the unique attributes each layout element presents, however, there are underlying instructions which would assist a raster-based designer into being more comfortable with the ideas and ease when using vector shapes. They’re not that different to create and have the added scalability that raster(bitmap based) images just cannot do due to their innate nature.

In any event, the entire chapter is essentially “This is what X is, how about we apply this to give you hands-on experience with X”. We went over the following: Border, Canvas, DockPanel, Grid, Scroll Viewer, StackPanel, UniformGrid, ViewBox, and WrapPanel layout elements.

By the end of the chapter, the application is like a circus of vendors in graphical format. Victor is sure to mention in his book that he’s well aware of the lack of space towards the end.

Without further ado, I present my circus:

Click to view full sized image

Popularity: 1% [?]