Bytes and Bites of Internet
Posts tagged Expression Blend
Prototyping using Expression Blend, Sketchflow – Part I
Jun 15th
Prototyping in terms of software development can be seen as a process of modeling concept of a software with some interaction. In some cases it could be totally different than final product but in general it is really helpful process because it gives developers / product owners better idea about what to expect from product and what can be improved. There is another term commonly used among web developers called Wireframing. It is same as software prototyping but it is specifically used for web sites.
As both of these things are very visual they give better idea about product and they are usually worked/reworked to improve final product. There are many many tools available for out of which Axure, Balsamiq and Expression Blend (which is part of Expression Studio Visual Studio 2012) are my favorite.
While back I was involved in a project where I was required to prepare initial concept of application design … it was very early stage of application designing and application itself was more of an idea than actual product. So I was required to create something very basic which gives an idea to developers and product owner how application could look like and how it will be interacted etc … as I had played with Expression Blend before so I ended up using it for my sample prototyping project.
So in this post I probably give basic introduction to the tool of trade and in another post I will actually show to we can use Expression Blend addin Sketchflow to prepare prototype applications in Silverlight or WPF. I am using expression blend show the tool but it has met end of lifecycle and MSFT has integrated it into Visual Studio 2012 but usability vise you probably will not see any difference at all. I personally still prefer to use Expression Blend over Visual Studio because it loads faster and is less resource hungry 
. If you look at screenshots below you will notice that both Blend for VS 2012 and Expression Blend 4 looks almost same.
 |
 |
Blinking Light Animation in Silverlight using Expression Blend
Jul 31st
Before even anyone of you look at my animation, let me clarify again that I DON’T HAVE DESIGNER’S EYE 
… which basically means if you are looking for some really cool UI then you are at wrong place. With that info. noted I also would like to let you know that though I am not a good designer, I am still a developer and just like any developer, me too can design UI (no matter how terrible it is) …
In this post, I displaying a very simple Blinking Light Silverlight animation created using only Expression Blend 4. I have created all drawings and animation using Expression Blend in just 20 mins for this post, and I must say that I am really impressed with this tool. If I wanted to do the same thing with good ol’ Visual Studio 2010, then it would have taken me at least couple of hours or more. (Or may be less if you are very good at reading XAML). Honestly, I’ve not even used core feature of Blend (which is Storyboard), instead I wrote very simple code to do the job.
As first step, I created two circle like drawings and placed them inside of Grid
Styles in Silverlight – Part 1
Jul 8th
Honestly, I don’t have so called “designer’s eye”. So I am really bad with designing. I think this is the curse that every developer bares … or may be it is a good thing, who knows. So the demo I am showing here is not so eye catching, but this solves the purpose so I am not going crazy with designing.
Just like HTML, Silverlight too has a concept of “Styling”, but it is bit different that what we do in HTML. Just like HTML here in Silverlight also we have different method of styling like inline styles or creating resource or use separate file that contains only styles. But this post is to show only basic concept of styling so I will just show inline code for styles, later on I will post more about other methods of styling.
In Silverlight each object can be styled individually as well as in group (just like HTML). And each style can be highly customized. For example, gradient in button. Or two different object can be used to create some new style, for example textbox with rounded corners.
Installing Silverlight Themes for Expression Blend 4
Jun 7th
If you are working with Silverlight and don’t have good “designer’s eye”, or planning to begin new project or simply want to play around with Silverlight then you might want to try these Silverlight navigation themes from Microsoft. Currently there are four standard themes are available for download from MSFT Site JetPack, Accent Color, Windows 7 and Cosmopolitan, they are highly customizable and free for any use. Basically they have all styles defined for all standard controls and Silverlight Toolkit (which is a must requirement for these themes to work)
Installing these themes to VS 2010 is way too easy. All you need to do is just execute VSIX files included in the package and you are all set. But if you want to use these themes in Blend 4, then it is a bit tricky process. First you need to extract those themes and then copy them to %ProgramFiles%\Microsoft Expression\Blend 4\ProjectTemplates\en\CSharp\Silverlight folder. But if you are using x64 bit OS then this path will be %ProgramFiles (x86)%\Microsoft Expression\Blend 4\ProjectTemplates\en\CSharp\Silverlight for you !!! And wait there is more (
, yes me too watch late night TV commercials … ) apparently all of these files have same structure and same template file names so you can’t just copy all of these themes into one single location, since it will overwrite each other and in the end you will be left with only once theme that you copied last !! And there is no explanation of this in official read me document or any where on the net.