The MossyBlog Times Archives 2007 - 2009 : Expression Studio

I hate it when a designer touches XAML..

scbarnes — Sun, 25 Jan 2009 10:42:10 GMT

I’ve meet with a few die-hard Silverlight developers in my time and some feedback I get at times is how designers produce bad XAML.

“..I hate it when a designer touches XAML..” – oh? why?

My first thought was, “bad XAML?” how on earth can a designer produce bad XAML. *confused look*

After digging I find out that one of the pet hates is that the designer doesn’t name their controls properly or that they’ll use a rectangle instead of a grid/canvas etc to visually represent the UI.

I then hold up my hand and say “stop”.

Here’s the lesson folks.

Expression Studio and Visual Studio allow you to collaborate with designers and developers. We’ve made it so you majority of the time never need to look at how the tools generate XAML as it just works. That all being said, it ENABLES you to work together, you still need to WORK together.

Meaning, setup rules of engagement with one another. Tell your designer that you need certain User Controls for certain contexts. You expect a clear naming convention and so on. Let the designer execute their creative vision and don’t impose too many rules on them as you could starve the process of creative flow but agree on how the pipeline will work UPFRONT.

Don’t expect the tools to automate your communication between developer and designer, as to do that would be a one neat trick.

Word for today: Communication.

How to: Make Innerglows with Expression Blend.

scbarnes — Sun, 14 Sep 2008 22:25:04 GMT

I'm knee deep in a WPF project i'm writing for my team. I had the need today to have an innerglow, and noticed that we seem to have forgotten this little BitmapEffect of goodness (which I'll be promptly hassling Jon tomorrow for in the next revision).

That being said, as stubborn as I am I decided to try my hand at producing my own InnerGlow effect. It was actually very simple procedure to replicate inside Expression Blend.

Step 1.

Define your shape. In this case I went with a rounded Rectangle, but you can use any shape you see fit and firstly you need to figure out your base shape.

Note:
Now it's important here to note, that you need to think of this as being "Pancakes" in terms of the design composition.

Don't worry to much about pixel perfect precision inside Vector either. A illustrator friend of mine once gave me a basic rule to live with when it comes to Vector art:

You can hide a lot of imperfections, as given you can zoom endlessly you get to the point were the naked eye can't see it and move on..

Couldn't agree more.

Step 2.

Simply copy the shape (CTRL+C) and hit Paste keys (CTRL+V). It should paste exactly on top of the previous shape and retain the exact x/y co-ordinates.

Rename your layer to something suites you, I myself called it IcnInnerGlow

Step 3.

Selecting the layer you just copied, you now want to add a BitmapEffect called "Outerglow". This can be found via your Properties area, under the group called Appearance. You will need to click on the expander for this group in order to see the below.

You should see something like this:

Not really inspiring is it?

Step 4.

You now need to knockout the Fill and bump up the Border. So in this case, go to your Fill and click on the No Brush Tab.

You will also need to ensure the Border's Brush is set to a color or setting that you feel comfortable with. In this case, I chose a solid color and ensured the Opacity was 53%.

The results should now look like this.

Step 5

Now comes the real magic. You select your layer, and again hit CTRL+C and CTRL+V (duplicating your layer basically).

With this new layer (it should increase the glow effect, make a note of that!) you now want to make this a clipping path. In that everything inside this shape is what you only want to make visible. The rest is something we want to discard.

To do this, right-click on the newly duplicated layer, Choose Path, then Make Clipping Path.

A new Modal window will now appear, asking which path you want to attach this clipping path to (think masking in Flash). Choose your "InnerGlow" shape, and you should now have the following result:

Notice no bleeding beyond the shape's actual borders? Now you have a uniform InnerGlow that matches your shape. It's now up to you what you want to do from here on out, but overall this is a quick and fairly friction free way of achieving an InnerGlow using the basic BitmapEffects in place.

I personally, adjusted the color to white, added another BitmapEffect (Blur) and tweaked the settings in a way that I ended up with the following visual effect.

Doesn't look like much does it? well keep in mind I'm Zoomed In here, when I zoom back out to 100%, this is the visual look I pulled off.

Now to add some Gloss to the buttons..as we all know, there isn't enough "Gloss" online today :)

Summary.

Expression Blend isn't meant to be a Adobe Photoshop replacement, it's meant to essentially act as a bridge between the Designer Tools and Developer Tools. That being said, it has a fair amount of hidden power under the hood (when dealing with WPF). I've found that I can achieve a lot of the visual effects I've commonly used in Photoshop via Expression Blend (yes its weird I know). It requires more hand-crafting but overall visually once I've put it into place, I can re-use across a lot of controls throughout my WPF application.

I think at times the Vector UI's look absolutely crap and its dying of gradient brush overkill, so I'm hoping to show folks a few tricks here and there to produce visually appealing art.

Here's the best part of all. If you like the above, then cut and paste this XAML code into your application, and you're off to the races.

Yet another upside to using XAML, sharing art is as easy as pasting XML.

                        	<Rectangle Stroke="#87757575" StrokeDashCap="Square" StrokeEndLineCap="Flat" StrokeLineJoin="Miter" StrokeThickness="0.5" RadiusX="3" RadiusY="3" x:Name="icnBase" Margin="2,2,2,0" HorizontalAlignment="Stretch" Width="32" Height="32" Grid.Column="0" Grid.ColumnSpan="1">
                        		<Rectangle.BitmapEffect>
                        			<DropShadowBitmapEffect Opacity="0.835" ShadowDepth="1" Softness="0.305"/>
                        		</Rectangle.BitmapEffect>
                        		<Rectangle.Fill>
                        			<LinearGradientBrush StartPoint="0.538462,0.98077" EndPoint="0.538462,-0.576924">
                        				<GradientStop Color="#FF232323" Offset="0"/>
                        				<GradientStop Color="#FF5D5B5B" Offset="1"/>
                        			</LinearGradientBrush>
                        		</Rectangle.Fill>
                        	</Rectangle>
                        	<Rectangle Stroke="#87757575" StrokeDashCap="Square" StrokeEndLineCap="Flat" StrokeLineJoin="Miter" StrokeThickness="0.5" RadiusX="3" RadiusY="3" x:Name="icnBase_Copy" Margin="2,2,2,0" HorizontalAlignment="Stretch" Width="32" Height="32" Fill="{x:Null}" Clip="M0.25,3.25 C0.25,1.5931458 1.5931458,0.25 3.25,0.25 L28.75,0.25 C30.406854,0.25 31.75,1.5931458 31.75,3.25 L31.75,28.75 C31.75,30.406854 30.406854,31.75 28.75,31.75 L3.25,31.75 C1.5931458,31.75 0.25,30.406854 0.25,28.75 z" d:IsHidden="True">
                        		<Rectangle.BitmapEffect>
                        			<OuterGlowBitmapEffect GlowSize="2" GlowColor="#FFF9F9F9" Opacity="0.415"/>
                        		</Rectangle.BitmapEffect>
                        	</Rectangle>
                        	<Rectangle Stroke="#87757575" StrokeDashCap="Square" StrokeEndLineCap="Flat" StrokeLineJoin="Miter" StrokeThickness="0.5" RadiusX="3" RadiusY="3" x:Name="icnBase_Copy1" Margin="2,2,2,0" HorizontalAlignment="Stretch" Width="32" Height="32" Fill="{x:Null}" Clip="M0.25,3.25 C0.25,1.5931458 1.5931458,0.25 3.25,0.25 L28.75,0.25 C30.406854,0.25 31.75,1.5931458 31.75,3.25 L31.75,28.75 C31.75,30.406854 30.406854,31.75 28.75,31.75 L3.25,31.75 C1.5931458,31.75 0.25,30.406854 0.25,28.75 z">
                        		<Rectangle.BitmapEffect>
                        			<BitmapEffectGroup>
                        				
										<OuterGlowBitmapEffect GlowSize="2" GlowColor="#FFF9F9F9" Opacity="0.5"/>
                        				
                        			</BitmapEffectGroup>
                        		</Rectangle.BitmapEffect>
                        	</Rectangle>

How to Submit a Bug/Feature Request for Silverlight.

scbarnes — Tue, 26 Aug 2008 03:24:09 GMT

Stephen Price sent me a piece of email asking how the heck does one submit a bug to Silverlight Team?

I replied "connect.microsoft.com" thinking it was self-explanatory from there and off you go. I then actually clicked on it and I'm embarrassed to say that not only is it not visible as to how, but the way I found out was to Live.com Search it and got the answer from a blog.

The answer is to go to:

https://connect.microsoft.com/VisualStudio

You'll see the following:

Now, please click on the "Browse Existing Product Feedback" and do a quick scan / check to see if your bug etc exists here.

Given that it doesn't appear to be obvious here for folks to find, I'm guessing there is not a lot there (in which case, get the word out for me while I work internally to get this amplified more, and you in turn can help turn the tide).

Once you're ready to submit a bug / feature, please click on either one. Now via this link you can submit a bug to either Visual Studio or Silverlight, Keep in mind you'll need a live.com ID to do so.

This is found under the Version pulldown:

Enter the various information and then keep track of your this issue and how we're tracking in terms of any work around's.

I'll be looking internally here on how we can go about adjusting this to being more simplified as I think we can do better with the above and I'm extremely keen to see your feedback (positive, neutral or negative) around our entire UX Platform + Tools and want to ensure there is minimal entry barrier here to getting it from you.

Please bare with us for a little while longer while we fix this and ensure it's simplified and amplified.

Thanks Stephen for pointing this out!

WebDesign 2008 - Going from Wireframe Zero to UX Hero

scbarnes — Fri, 20 Jun 2008 00:02:32 GMT

July 21st Seattle - I'll be speaking at the WebDesign 2008 conference here in Seattle on "Going from Wireframe Zero to UX Hero".

The session is basically going to cover the "How" I guess on what's next after you've made the leap of deciding to adopt our technology (Silverlight or WPF). I'll be showcasing a project that I and co-team member David Pugmire, been working on the past 2 weeks called RCIA.

The description I gave (I always hate doing these as how do you fit 45mins of ideas into a paragraph! hehe) is the following:

The blank canvas can be a daunting and scary thing at times, even more so when you’ve just taken the leap to learn Microsoft technology. Don’t stress, as Scott will show you some tips, tricks and insights into how to go from Wireframe Zero, to UX Hero using the latest versions of both Silverlight and Expression Studio.

If folks like the presentation, I'll look into how to re-do it over the web post the conference for those whom aren't able to attend.

That's all.

http://webdesignworld.com/2008/seattle/sessions.aspx

Get behind the Expression Community Site.

scbarnes — Wed, 26 Mar 2008 08:33:37 GMT

I will admit one thing, we at Microsoft at times have a lot of online brands to cater to the Silverlight, WPF and Expression Studio ecosystem. There are a lot of moving parts to our UX Platform with events, communities etc all having niche requirements.

That being said, there is one that will bring balance back to the force, the new Expression Community Site.

This site is the rally point for all things related to Expression Studio, and if you're not a member yet, become one.

The future plans for this site are big and the team behind the site are working very hard to grow it further and make it into the "MSDN" for designers.

http://expression.microsoft.com/en-us/default.aspx

Flip4Mac supports Silverlight.

scbarnes — Fri, 28 Dec 2007 13:36:26 GMT

Well hot off the wire, Flip4Mac apparently enables folks to export into Silverlight for the web.

What is Flip4Mac?

Flip4Mac WMV enables Macintosh users to play, import and export Windows Media Video and Audio files in native QuickTime applications.

What does this mean?

Nothing, everything. Whilst there is a fair few folks wanting to see Expression Encoder on the Mac, this is still a good alternative (even if should we decide to head down that path). I use Flip4Mac to play a lot of WMV assets I have from work and it's actually quite a seamless experience.

Won't this conflict with the whole Expression Studio story?

Probably, but in my own opinion if we had 50 more Flip4Mac pieces of software floating around on the net that allow end users to encode into Silverlight, I'm all for it (fingers in all barrels I say).

It's also good to see the folks behind Flip4Mac supporting Silverlight and acknowledge that it's a technology worth investing through their direct support. This overall is a positive sign in the Silverlight story as with more and more ISV's out there making adjustments to their own product roadmap's to cater towards our new UX Platform it's positive signs for all whom adopt.

So because of that, I'll give them a free plug via my blog:

learn more

When will Expression Encoder be supported for the Mac?

No comment. That being said, the Product Teams are aware of the Macintosh and the demographic whom use such products. I'll let them decide that fate and information around it.

http://blogs.msdn.com/expression/