a cool post on stuff that makes my head hurt in Silverlight no less :)
http://channel9.msdn.com/continuum/tutorials/Trigonometry/
check it out.
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.
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.
One of the cool things that enhances UX (User Experience) with an application is to make it pleasing to look at and use. Many times people do searches and expect recordsets. Frequently these recordsets are placed in data grids of some kind. Though Silverlight does in fact support a data grid control we might also consider using a custom panel that lays out elements visually and to make it more excited we can animate children into position depending on the current state. Writing this so it animates nicely programmatically can be a lot of work not to mention a huge pain and not very reusable. But alas you are more than welcome to do all this extra work just to discover you should have used a dispatch timer and not use Silverlight animations altogether and then waste more time figuring out how to make that work. OR you can use the animating panel base that has the dispatch timer infrastructure written tested and built in. Robi wrote this control and gave it to Mike H were they both demo’d it at MIX08 in their respective presentations. Lets re do our WrapPanel to use animating Panel Base and see how cool we can make it.
If we start with the lame wrap panel from earlier we first need to change its base class so the first line should now look like this (you can download the source from the panel factory project on HackingSilverlight.net):
public class WrapPanel : AnimatingPanelBase
Now we have the dispatch timer magic infrastructure. Next we need to add a property and method to our class like this listing that gives us a completed event for animations.
private bool MyFirstTime = true;
void WrapPanel_AnimationCompleted(object sender, RoutedEventArgs e)
{
MyFirstTime = true;
}
Next we need to actually wire this event up in the object constructor. This way the event handler gets called when the first animation is complete. The code we add to a class constructor is:
AnimationCompleted += new RoutedEventHandler(WrapPanel_AnimationCompleted);
Now once complete we are done with ‘additional’ members but we still need to change the ArrangeOverride method. First where we were calling element.arrange we need to replace that code with this block:
The key tool for building out MultiScaleImages we will use in Silverlight is Expression DeepZoom. DeepZoom is a Simple tool like Encoder for example that allows you to import images and produce the multi-layer image collections and tile structure used by DeepZoom (MultiScaleImages) in Silverlight to produce the coolness we are looking for.
DeepZoom (talk about double entendre) then creates a DeepZoom Project lets you import all the high resolution images you want to use. Then you can compose your collection of images and then it will export and build all of your multilayer image collections, tiles and other bits as configured. With that then we can embed these into Silverlight work with multilayered images.
We learn how to use the application by opening Expression DeepZoom and getting familiar with the user interface.
Currently the interface is pretty simple. We have our splash screen that pops up. That shows existing projects or lets you open new ones etc. We also can see the tabs which are basically the 3 steps to building a Multi layered image collection and getting it ready for Silverlight. From the top file menu we can open the project dialog.
Once we give our project a name and select the type (Seadragon Project) we then can start adding images to our multi-layered image collection. On the import tab in the UI we can see we have a view area and then a scrolllist of our images. At first this will be blank and at the bottom we have a button called 'Add Image.' If you click the 'Add Image' button you can use the standard windows API file dialog to find a cool high resolution image that you want to multi layer. If you add several you will see them on the design surface.
Now that we have added some images we can start arranging them in our collection. Start by click on the tab '2. Compose' at the top of the interface. Then you can drag the images from the right on to our design surface.
Let us take a look at the interface. At the top of the UI we can see a tool bar at the top and there are 5 tools which by default will have the first one selected. The first three icons represent the cursor state on the compose view of the application. The default is for dragging our icons onto the surface. Selecting second icon you can drag the design surface.
You can see how the map in the lower left of the composition surface has moved showing what the pan functionality looks like and this map shows you where on the surface that you are. The third icon on the compose tool bar is for zooming. This allows you to drill into any given location on the composition surface.
Looking closely we can see the drop down menus for the last two icons on the composition tool bar. You can see the second icon from the right is alignment items (i.e. left, right, top, bottom etc). if you select one then all your images get laid out in the collection accordingly. The menu for the last button that distributes images horizontally or vertically.
Once we get all our images on our composition surface we are ready to export our collection. There are a number of settings but for DeepZoom in Silverlight we are good with just having a location and exporting. We do this by clicking the export button.
DeepZoom then builds our Silver Dragon (SDI) file and builds out all over tiled images. If we are just going to use it for Silverlight and are using one image we can just grab its corresponding structure including the .bin, xml and the tile jpg's. Now we are ready to actually do Seadragon, er I mean SilverDragon, er I mean DeepZoom(MultiScaleImages).
