Friday, December 3, 2010
What I tell Designers to give me... Integrating and Digital Zen
Your response probably depends alot on your background. If you a ms zeolot you might think, why the heck not? if your a designer you might think 'dah' and there is a spectrum in between but as it turns out the biggest reason that its not cost effective is that there is a way... a straight and narrow path to a User Experience 'Zen' like team that works much like the above w/o using all microsoft coolaide (*gasp).
shhh... don't tell the ms ninjas...
As it turns out Microsoft did a bang up job with expression blend and probably the key thing is that blend does a wonderful job of importing adobe assets so well in fact that with a little bit of communication and learning to work together we still are able to achieve that zen state of designers, developers, IA's and the like working together at the same time on design and implmenetation. But there is a bit of a list I like to give my designers :) (don't worry there is another list for dev's;) for work on digital experiences
item 1. a pdf of everything they send me showing what they see looking at the assets (wiresframes, comps, redlines etc) native format is awesome too.
item 2. all typography with any font of any element that could maybe ever be dynamic as part of a digital experience I want a PSD typographic red line.
item 3. TTF's for all the special fonts that didn't come over in the PSD typographic red line.
item 4. all the UI elements are in AI (Adobe Illustrator). why? because it comes into blend almost as native XAML as its all vector based.
item 5. make sure all the elements are grouped in illustrator and named with something meaningful to humans... :)
item 6. illustrator elements must be inside the illustrator canvas or they don't work at all.
item 7. communication, communication, communication. talk about it. lets design together, walk me through the vision.
item 8. be nice to developers, not all of them understand the difference between Verdana and Helvitica nor do many of them appreciate the difference between padding=5 and padding=5.56793845. they are handicapped that way frequently.
now we can build some hot and sexy ui which is the only way I like my ui. if I don't have an emotional experience when I look at the ui the first time its not good enough.
From a business standpoint its not cost effective to re-train and re-purpose when we can do the same thing and still keep people in the tools they enjoy.
note: there is also a rumor aobut FXG files but I haven't tried yet but promises to be better the AI files.
Monday, November 22, 2010
Using the Visual State Manager
This States tab, and moreover the entire Visual State Manager infrastructure, was built as part of Expression Blend but has been added to the underlying framework as of Silverlight 4. You can tweak the code in Visual Studio, but the VSM was designed for use in Expression Blend or specifically to make it easier for designers to work with visual states of objects. Here, you will use the VSM to create a custom skin or template and then use the VSM to help build or change the default animations and transitions between states.
Start by creating your custom control template.
Creating a Control Template(s)
Since control templates are baked-in, sometimes creating a control template can be very difficult to extrapolate independently without Expression Blend. In Expression Blend it's really simple.
1. Start by selecting the control. At the top of the design surface, you see a breadcrumb that shows the control in question as the root item. If you select the breadcrumb, you will get a drop-down menu that lets you select either Edit Template or Edit Additional Template.
2. Normally you select Edit Template, which displays an additional menu consisting of Edit Current, which will be disabled; Add Resource, which will also be disabled; as well as Edit a Copy or Create Empty. You will also generally want to select Edit a Copy, at least until you understand the templates enough to build them from scratch and know what "states" are available. For most people, it is easier to just edit a copy of the default template.
3. When you select Edit a Copy, the Control Template dialog appears. Because a control template is a style resource, a box comes up so you can give the resource a proper name. All the correct settings are there by default. You do have the option to have the new control template put into the application or you can also create a new resource dictionary and have the control template go there.
4. Once you select the settings you want, click the OK button. All of the underlying code required to support this new custom template (that is a copy of the one baked in) is added to your project; in addition, the control is bound to this new custom template. Now you click the States tab.
All the states and transitions to each state are divided into what is a tree. When you select any of these, that state is applied visually in the design surface. In addition, the state properties show in the Properties pane so that they can be customized as needed visually without going into code. However, you can open the project in Visual Studio and edit the template if you want to. You will also note that the Visual Tree shows all the elements of the template for you to select as well, and you can remove any element you do not need to complete your custom control template.
Note: The Visual Tree is a representation of your UI and how it is rendered visually and how the underlying engine renders elements to the screen. Some things might not be in the Visual Tree because they are in a collapsed state. In other words, Visibility='Collapsed' rather than Opacity='0' where the Opacity='0' is considered to still be in the Visual Tree.
Customizing Visual States
When customizing elements of your control template, you generally are going to use the VSM States tab and the Visual Tree in the Objects and Timeline viewer, as well as the design surface and Properties pane. (You can also edit it in the raw XAML if you are comfortable with that but, keep in mind that some default templates can be very complex.) Often when you are customizing the control, the entire look and feel needs to change. When you select your control, you can go to the Visual Tree and delete anything you do not want or entirely replace it by pasting in whatever it is you want or editing it on the design surface.
To change the state, select the correct state in the VSM State tab, which turns on the State Recorder, and change the control however you like. For example, if you select the state of a button, that state is shown on the control on the design surface. You then can select the element of the control in the object tree of the control that you want customized and edit it - say, change the color or add a transform.
There is also in the VSM tab on each element, a Transitions drop-down that you can select to add specific transitions to one state or the other as needed. Right on the transition, you can set the timing of the transition as well; however, the transition details are edited elsewhere. The last important element of working with transitions that you will need to know is that when you select a transition, you get the Timeline view next to the object tree. This allows you to do custom key frame animations.
note: this article is an edited version of a a section of a chapter I wrote for the WROX title: Silverlight 4 Professional, check it out on: http://www.wrox.com/WileyCDA/WroxTitle/Professional-Silverlight-4.productCd-0470650923.html )
Monday, November 15, 2010
Building and Using Expression Blend Behaviors
Implementing Behaviors
Implementing a Behavior is straightforward and can be as complicated or as simple as you like. To start with, you will need Expression Blend installed so you can test your behavior in Expression Blend. If you are already in Expression Blend, right-click the project and click "Open in Visual Studio," which this implies correctly that you need both Expression Blend AND Visual Studio installed to create and test a Behavior. Once the project is opened in Visual Studio, right-click and select "Add New." Then in the "Add New" dialog, select Class. Give the class a name, and then you need to get the Expression Blend Library into your project. To get the base class (and the associated name space), you must add a reference to the System.Windows.Interactivity name space that comes with the Silverlight 4 framework. Right click on references and select "Add Reference.” Once the namespace is included, you are ready to build out the class you created into a Behavior. You need to start by adding the namespace at the top like this:
using System.Windows.Interactivity;
This gets the base library (namespace) you need so you can inherit from the behavior base class. Next, of course, you need to set up your class to inherit from TargetedTriggerAction and make your class look in effect like this:
public class SomeBehavior : TargetedTriggerAction
{
}
TargetedTriggerAction is our base class, where you will be able to apply it to a class of type FrameworkElement. For the purposes of this example, the Behavior will also be targeted specifically at Shape objects. The next step is to implement Invoke, which is what is fired when the Behavior is applied to the target. Invoke needs to look like this block of code:
protected override void Invoke(object parameter)
{
}
From this point, you need to get a reference to the object that your behavior targets and do to the object whatever is necessary to make the object do what you want it to do (the ‘behavior’). In this case, you typically would add a member event handler to the targeted object event to the associated object, and you start be creating a location for the reference to the target object:
Shape TargetElementItem1;
Now when Invoke is called, you would get your reference, cast it to a Shape and place it into the member reference:
TargetElementItem1 = (Shape)(this.AssociatedObject);
This code then needs to be in the Invoke member. At this point, the implementation for each Behavior will be increasingly different for each Behavior that you build. This example changes the color back and forth between two colors when a user clicks on the shape. Next, you need to add these members to the Behavior class like this:
Brush Color1;
Brush Color2 = new SolidColorBrush(Color.FromArgb(0,0,0,0));
This gives you a color to switch to and the reference to the base color of the class. To populate Color1 with the base or start color of the object, add this second line to the Invoke method:
Color1 = (Brush)(TargetElementItem1.Fill);
Now that the Behavior has a reference to the colors and the Shape is typed and referenced, you can then add your behavior logic. In this example, add two event bindings to the Shape reference like this:
TargetElementItem1.MouseLeftButtonDown += new
MouseButtonEventHandler(TargetElementItem1_MouseLeftButtonDown);
TargetElementItem1.MouseLeftButtonUp += new
MouseButtonEventHandler(TargetElementItem1_MouseLeftButtonUp);
These lines won’t actually work until you add the two methods, which should look like this:
void TargetElementItem1_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
TargetElementItem1.Fill = Color1;
}
void TargetElementItem1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
TargetElementItem1.Fill = Color2;
}
This completes the Behavior. You should now be able to use it in Expression Blend.
Consuming Behaviors
Besides visual behaviors, you can also add non-visual functionality as you might in a command. Therefore, if you are familiar with commanding, a good way to look at Behaviors is as "commands for designers in Expression Blend." To be able to use Expression Blend to work visually on an element, you need to be able to see the element that you want a Behavior to be applied to. For example, in the last section, you built out a simple behavior. Now you need a Shape to apply the Behavior to. You can start by dragging a Rectangle from the toolbar onto the design surface in Blend. Then you need to set the fill to a solid color brush using the Properties pane. The XAML code might look like this:
<rectangle fill="Green" />
Now you should open the Asset Explorer from the toolbar. On the left side of the Asset Explorer, select Behavior and you will see that your behavior is one of the Behaviors listed as well as others that are built in to Expression Blend. Select the Behavior you want and drag it onto the object, in this case Rectangle, and you are finished. The XAML code will appear something like this:
<rectangle fill="Green">
<i:interaction.triggers>
<i:eventtrigger&g;
<local:SomeBehavior />
</i:eventtrigger&g;
</interaction:triggers>
</rectangle>
If you look at this closely, you will note that there is a couple namespaces referenced here. You will find these referenced at the top of the XAML document that were inserted by Expression Blend dynamically. A designer or creative is not going to care, but as a developer, it is important for you to realize this. Behaviors, as you can see, are a way to provide rich functionality that is bound to controls in XAML that also, and more importantly, is easy for designers and developers to use in building, maintaining, and customizing the UX/Design of views in Silverlight applications.
(note: this article is an edited version of a a section of a chapter I wrote for the WROX title: Silverlight 4 Professional, check it out on: http://www.wrox.com/WileyCDA/WroxTitle/Professional-Silverlight-4.productCd-0470650923.html )
Monday, September 21, 2009
Blend/Catalyst Smack Down?
Is it a myth? Marketing lingo? Or could it be real with the help of powerful tools?
Listen in as Ryan Stewart from Adobe and Adam Kinney from Microsoft discuss the workflow concept from their respective point of views. Ryan will demonstrate how Flash Catalyst works within the Flash Platform development cycle. Adam will show how Expression Blend fits into the Silverlight development workflow.
Come join the fun with two of the best speakers in the world on Adobe/Blend at Interact
http://www.seattled2ig.org/?p=257
Saturday, August 1, 2009
Silverlight Firestarter - Seattle Sept 17th
on facebook at
http://www.facebook.com/pages/Silverlight-Firestarter/112128391599
more to come shortly but stay tuned and keep your calenders clear.
Tuesday, June 30, 2009
Simon a case study part 1 - designer developer work flow
John doe wants to play a game like Simon says. John sees link on a web page that says 'Simon says.' John clicks link and he doesn't have Silverlight installed so he gets a 'install me' link with a faded image of Simon. John can see from the faded image that Simon is what he is looking for and decided to install Silverlight. John then go to the Simon link and Simon comes up. John can click the new button to start a game and play a traditional game of Simon says buy following the sound and light patterns and clicking the appropriate game pads. John is able to use the high score button to see his high score. John has fun with and easy to use game and spends to much time playing the game.
with this as our user story, Ariel (the designer, names changed to protect the innocent or not) put together a wonderful bit of Xaml. Ariel being familiar with working with dev's took into account that things needed to be groups, and names reasonable or I would have a hard time working with the asset. For me the first thing I did was load the project and start to wire it up. One would think that Simon shouldn't be too complicated and at first it wasn't. A few events, and a game timer using a story board and we are good. Being the retentive dev that I am, I've had to learn to let go of that when it comes to Xaml as this tends to hamper or slow down the design to the point of just not being worth the time invested.
That all being the case we soon had a working game. Part of learning to work together and further learning to work on the same code at the same time that Silverlight and by extension WPF (actually that might be the other way around) is having the designer and dev work from source control. I know allot of dev's will have a cow about letting designer touch source control but its really not that hard. check out file, check in file... really even a designer can get the hang of it when their tool (Blend 3) supports it now. So we put this in source control (http://Simon.codeplex.com/). the one little detail we had to over come though was Silverlight 2 vs Silverlight 3 and we both were on opposite sides of the fence. This probably was our biggest issue we had to work out where we disagreed. And any time there is a designer and developer on the same project you tend to have at least one disagreement. We ended up eventually on Silverlight 3 as it supports more, the tools are better and it is being released next week. But generally deciding on any issue should be done based on the requirements and when the requirements don't provide enough bases then other reasons should come into play. The key then is to communicate. granted we hear that in everything from time immemorial but really how much do we have to tell people before the get it. 'TALK' things through and normally logic will dictate the best solution.
moving on...
Once in source and having the app running we would start building the application out. Ariel can muck with the design in more detail and focus on the finer points of the design to it was pixel perfect and I could play with game logic and function and we both could do it at the same time. Truly a zen moment for designer developer relations.
Thursday, May 28, 2009
Expression Blend
http://www.facingblend.com/index.html
Wednesday, December 17, 2008
Xaml Guidelines, Part 1
http://channel9.msdn.com/shows/Continuum/XAML-Guidelines-Part-1/Default.aspx?wa=wsignin1.0
Wednesday, December 10, 2008
Silverlight 2 Performance Best Practices
Here is some more 'content' summary info from my Architectural Best Practices presentation at DevTeach.
As to performance best practices… use the following as a good starting place:
· Don’t stretch things including Images, videos, or paths. Stretching things is going to cause more processing. Create assets at the size that they will be used and life will be much easier.
· Don’t use ECMA Script or the Anti-Pattern Silverlight 1.0.
· Don’t use windowless mode.
· Remove event handlers and set them to null before removing the element from the visual tree.
· Set MediaElement sources to null before removing them from the tree.
· Don’t use opacity if you just need to make things disappear, instead use the visibility property.
· Do use ‘IsHitTest’ and set it to false when doing drag and drop do hit testing only happens on the elements that are drag targets. This also allows you to keep visual elements from interfering with role over related events such as Mouse Enter and Mouse Exit events.
· Don’t have 1000 thousand elements in the same Visual Tree…
· If something is going to take a while tell the user or show the user that we are waiting.
· Don’t use ‘findName’ if you don’t have too as this causes a walk through the visual tree.
At least following these rules for Architecture and Performance your application won’t fall on its face.
Tuesday, December 9, 2008
Architectural Best Practices for Silverlight 2.0
Underlying Silverlight architecture helps us abstracted UI from logic and we need to take into account this toolability story that Silverlight enables as this can provide more ROI and shorter time to market for application development if designers and developers can work at the same time without the whole ‘through it over the fence’ approach. From a design pattern standpoint I recommend pMVP or Proxy Model View Presenter as the ‘better’ design patterns I know of require more upfront development as Silverlight doesn’t support the underlying infrastructure for these patterns. pMVP keeps it simple and the simplest solution is usually the best.
For Architectural best practices lets bullet out our best practices:
· Design Pattern pMVP (Proxy Model View Presenter) which is a clean, simple design pattern to implement that gives better abstraction.
· Make use of designer developer workflow enabled by Xaml UI separation.
· Don’t impose artificial Xaml coding conventions on designers or yourself as this slows productivity. Just let Blend go with it.
· Agree on Naming conventions, coding conventions (maybe standard WPF conventions might be a good place to start) and the like as you like but be consistent so that it is easier to support and pick up again later. This improves readability and helps the whole designer developer interaction.
· For the most part doing event bindings in Xaml, the more in Xaml the better however use common sense. If the designers are using Photoshop and converting the Xaml maybe just do the bindings in code so that you can have the designer just do a new conversion to generate new Xaml if they might make changes.
· Build at lest the Presenter logic in a separate Silverlight library.
· Build generic custom controls in a library.
· Consider putting the presenter code in a separate library or at least its own folder.
· Build Views with Blendablity in mind. Break up complex user controls that build the View into its component parts so that the elements can be more easily worked with in Blend.
· Use Gobal Styles and Templates and other resources in the App.xaml only when they are truly global in the application. Don’t clutter up the global resources with elements that are not really global.
· Use best practices with other connected technologies such as WCF or SQL or IIS/ASP.NET. Best practices in Silverlight wont’ do you much good if everything else is a mess.
· IF you build controls that rely on the DOM bridge encapsulate the ECMA related resources either in a Xap or right into the control so the ‘user’ as the simplest method to use the control.
· Consider the install experience to encourage users to install Silverlight so they can use your Silverlight application. Just using the default badge is boring.
· Consider Search Engine Optimization if it is a public site, such as control element names and the HTML on the Silverlight page etc. event the names of Xaml elements as a lot of this will be in the Xap that will at some point be parsed by search engine spiders.
That gives us a nice list of best architectural best practices. Following these simple rules lets you approach Silverlight architecture and application design with ease. Now we didn’t go into a lot of the application ‘Design’ aspects of ‘Designing’ applications such as UML etc but the focus here is strictly on Silverlight.
Tuesday, September 30, 2008
Kuler Colerful Expression Blend Add-in
'Colorful Expression is an add-in for Expression Blend and Expression Design that brings you the Adobe Kuler community directly into your toolbox. It adds a new palette to your design environment, making it easy to leverage the community to find the perfect color theme for your application or design. The add-in also available as a standalone application, making it useful for web developers working in Visual Studio or Expression Web to select colors for your CSS style sheets.' ~www.codeplex.com/colorful (30 SEP 08)
http://jonas.follesoe.no/AnnouncingColorfulExpressionStudioAddIn.aspx
and of course the codeplex project is:
http://www.codeplex.com/colorful
very cool stuff
Tuesday, August 19, 2008
IntelliSense for Expression Blend
http://blogs.telerik.com/StefanDobrev/Posts/08-08-04/IntelliSense_for_Expression_Blend.aspx
alittle bit of Kaxaml and mix in some Addin and ICodeEditor goes a long way :)
Crossfader Demo at TechEd
http://msstudios.vo.llnwd.net/o21/presspass/zune/Silverlight_2_Zune.wmv
Tuesday, August 12, 2008
IntelliSense for Expression Blend
http://blogs.telerik.com/StefanDobrev/Posts/08-08-04/IntelliSense_for_Expression_Blend.aspx
Wednesday, July 23, 2008
Hacking Expression Blend
Adding Features and Plug-ins to Blend
To start with you will need to make sure Expression Blend is installed and we get a copy of the ‘Microsoft.Expression.Framework.dll’ which will be installed in the Microsoft Expression directory under program files or other location depending on how you installed. If you can’t find this directory you can do a global search on ‘Microsoft.Expression.Framework.dll’ and you will find it.
Now that you have the DLL we can now open Visual Studio and start a new project. For really hacking into Expression Blend so that our application or whatever it is you want to do in Blend we should use the WPF Custom Control Library project type found under the language of your choice (C# or VB.NET) and then under windows. Once the project is created drag a copy of the dll into the solution explorer and into the project. This DLL contains all the base class types used to wiring things into the Expression Blend infrastructure. Granted much of the stuff in Blend is sealed or closed there is enough available to us to be able to hack. You might ask since at the time of writing this the info was not publicly available or even privately available and since I’m not a Microsoftee how did I find this out…? Wel I want to thank a friend named Karim Hernandez with a little too much time on his hands and a nifty tool called ‘Reflector’ for finding this stuff out.
.NET Reflection and Probing the guts of .NET Binaries
A bit of topic but a critical skill to really pushing the limits to .NET programming in general is the albity to look into DLL’s and see what is there even if you are not provided documentation about what is in a binary. With .NET we have a built in technology for reading binary .NET content called reflection and through tools like ‘Reflector’ you can probe into the guts of things even if your not supposed to and using reflection or just referencing the DLL’s you can create instances of class’s you might not supposed to have. Case in point is sinsce Blend is a WPF application its DLL’s and binaries can be ‘probed’ and explored as it were and since this infrastructure is or will be probably available to control vendors at some point for extending blend we can go ahead and use it. However that being the case they could change and since we all know about .NET Reflection we can work it out.
Back to hacking Blend…
Now we need to create a reference to Blends Framework DLL so we can start implementing things we might want. Right click on our controls project and select ‘Add Reference’. You will need to select the Browse tab from the Reference dialog and then find the DLL we added to our project. Select it and click ‘OK’ which will not allow us to include references in the specific class’s. Start by renaming our ‘CustomControl1’ class to OurFirstBlendHack more for our own entertainment value. Visual Studio will ask about renaming all the references and you want to select yes so that the name change is clean and won’t break anything. Then at the top of the source fille add this line at the top:
using Microsoft.Expression.Framework.AddIn;
using Microsoft.Expression.Framework;
Now we have the ablity to start using the DLL content in our OWN classes how ever we want. We will start by making our Class a Blend Adding and in heriting from IaddIn which is the base class for Blends Framwork if you want to extend the functionality or add your own stuff into blend or whatever cool Silverlight tools you can think of. A real live use might be to integrate group Xaml/Silverlight editing tools like KaXaml or adding your own code formating or even a custom Silverlight control library. But first we need to make our first class definition look like this:
public class OurFirstBlendHack : IAddIn
And then add the detail meta data for Blend right before this first line like this:
[AddInDescription("OurFirstBlendHack", AddInCategory.Tool)]
With that we need to add a several methods to start mucking around with to deal with the StartUp event, Intialization, Dispose and the ShuttingDown event in Blend. The three events actually look like this:
public void Initialize(IApplicationService applicationService) { }
public void StartupComplete() { }
public void ShuttingDown() { }
public void Dispose() { }
Before we compile we also need also to remove the constructor or at least remove the line of code for setting the defaultKeySetter which will normally be added ‘for’ you as Visual Studio assumed this was inheriting from Control by default. Once the constructor is dealt with we then compile. Do this to make sure you have not made any errors but currently the class is valid but is not going todo anything. Our next step is to add some code and run it from Blend to see if we can make our ‘Addin’ work. Add the following line to our method StartupComplete.
MessageBox.Show("Blend is Hacked!");
Again this is not going todo anything until we run it from blend but if it is done then we should get a default windows dialog poping up with the label from our code. Todo this we need to make sure our code is compiled and then we need to open a command prompt test our code. Copy the DLL into the Blend directory and use the following at the command prompt:
Blend.exe /addin:HackingBlend.dll
This will start blend and blend will run the class we created and you will get the popup dialog ‘Blend is Hacked!’. If you really want to-do something as part of blend though, we might want to start with a menu. A custom menu in Blend is straight forward enough, but first let us build out what the menu will do. We can start this by making a command class. First create a new class in our project called HackCmd. Add the following includes at the top:
using Microsoft.Expression.Framework.AddIn;
using Microsoft.Expression.Framework;
using Microsoft.Expression.Framework.Commands;
Then we need to make the class inherit from the base command object like this:
internal class HackCmd : Command
To make the object actually do something we still need to add internal code to the class as well as the required API needs implemented to support usage. The main thing we want to implement then is the method Execute and our constructor. In this case this should look like the following Listing:
private IApplicationService _ApplicationService;
public HackCmd(IApplicationService ApplicationService)
{
_ ApplicationService = ApplicationService;
}
public override void Execute() { }
Now that we can Hack Blend lets close out the chapter summarizing what we learned. Next for testing lets add a line to Execute to actually do something like this:
MessageBox.Show("Blend is Hacked even more!");
This gives us something to call from our menu and from here we can open additional dialogs or WPF windows etc to perform whatever task we want to do. Remember then if you want a window for example to open you put it into the execute method of your command objects. To really make the menu work we still need one other class and that is a command target that receives menu events and routes them to the command class. Add a new class to your project called HackCmdTarget and add the additional using statements to top that you added to the HackCmd class. Then make sure we have our inheritance correct by making the class declaration look like:
internal class HackCmdTarget : CommandTarget
Now we need to fill out the guts of the class. In the case of the Target we are only adding a constructor and the references to the HackCmd class that we add to Blends command collection. The internal code then for our HackCmdTarget should be like the following listing:
internal static string HackCmdCommandName = "HackCmd_Command";
public HackCmdTarget(IApplicationService ApplicationService)
{
base.AddCommand(HackCmdTarget.HackCmdCommandName, new HackCmd(ApplicationService));
}
Now we can go back to the first class we created called OurFirstBlendHack and build out our Blend menu structure. Add the following line to add our command to blend when our class is loaded on Initialize to our class’s Initialize method:
ApplicationService.CommandService.AddTarget(new HackCmdTarget(ApplicationService));
Now Blend can see the target command and we can add a menu to call it. To create an instance of Blends menu we need to add a using statement to the top like this:
using Microsoft.Expression.Framework.UserInterface;
Then we can create an instance of the menu bar in blend and can add elements to the menu. Add the following line of code to the Initialization menu to create an instance of the menu like this:
ICommandBarMenu menu = ApplicationService.CommandBarService.CommandBars[0].Items.AddMenu("HackBlend", "HackBlend");
Now to add elements to our new menu we can call methods on our menu instance. In this case we can use ‘AddButton’ and ‘AddSeparator’ to build a little menu. Use these lines of code to add our elements and route our commands:
menu.Items.AddButton(HackCmdTarget.HackCmdCommandName, "alert us");
menu.Items.AddSeparator();
menu.Items.AddButton(HackCmdTarget.HackCmdCommandName, "another alert");
Now we can compile and then copy our DLL to the blend folder and run from the console the following line:
Blend.exe /addin:HackingBlend.dll
This will run Blend and run our little class in the context of Blend including our menu. If you try this you can see we have ‘hacked’ Blend or at least used its plug in framework to allow us to ‘extend’ Blend to do new and better stuff with our Silverlight Xaml. Now let us summarize what we have learned.
Tuesday, April 1, 2008
New Look and Feel
Tuesday, March 25, 2008
Foundation Blend 2 - Building Applications
http://windowspresentationfoundation.com/index.html
Tuesday, January 8, 2008
Tools and the Silverlight Tool-ability Story
I have built some cool things in tools like flash, and by all means this is cool stuff. One of my favorite things about flash in particular is that it runs anywhere on any reasonable browser even my current old fashion PPC phone or my friends Mac or my other friends Linux box. It’s just cool what you can do. But have done my share of action script it really reminds me of a comparison between ‘classic’ ASP and ASP.NET. It is a fundamental shift. Take the Emmy site we did at IdentityMine, this web app had to mix and match video, allow users to play producer suck up numerous feeds running off of Linux box’s using Perl scripts to build out UI elements in Xaml and do drag and drop different kinds of video scrubbing depending on the state of the application and the mode it was in and really provide a rich Web 2.0 experience and by all means there are some things that flash does that Silverlight doesn’t but building this complicated system in 8 days would have been just impossible at least for any dev team I have dealt with in Flash. The tools just are not there.
Granted I probably would not even considered doing it and it really was laughable when first presented to me but hey the money was in line with what it would take to give up 8 days of my life and we had a reputation for doing the impossible so what the heck we would try to do it. And 8 agonizing days later I’ve changed religions as it were and now I’m writing a book and live a breath Silverlight.
Getting back to this tool ability story around Silverlight when I first went to collage I studied photography and computer science for a year and a half. In high school I loved computers but having been music and art I loved beautiful things. I would spend hours rearranging this at my apartment to the point that they would look out of a magazine and I would make my own deco to get the right look and would obsess of design. Photography as opposed to other art allowed me to get to the level or precision in my art that I loved. I’m not Michelangelo so hand drawings and the like I could never get to the level of perfection that my OCD (obsessive compulsive disorder) needed to not send me into some kind of break down.
So in photography I found a home, I loved the idea of lines of composition and building form and contrast and the like but when it came to deciding I felt that my best path was to focus on one, namely computer science and programming in particular. In this case my code became my art but I kept this obsession for perfection in design and when my designer friends got me hooked on using Expression blend on one side and Visual Studio on the other… I was hooked. Truly Zen has been achieved in a superior design tool and Visual Studio at the same time. What more could I want from a toolability story.
Monday, January 7, 2008
Expression Blend in 5 minutes or less
On the very left hand side is our drawing toolbar for manipulating or creating design in Xaml. When you select an item it will open with a drop-down like menu that you select and then you can do something with it or, like the two arrows at the top, you just select it and go. If you hover over the tool a tool tip word bubble will tell you what it is. Also note for most things, the key board short cuts are the same in Blend as other popular designer environments. You also can select the ‘properties’ tab on the right hand side and you can then see exactly what you can do with Expression Blend. Blend also does a lot of cool stuff that we will talk about later.
And thats pretty much it. :) Oh you can also do animations too but that will be another post.