Silverlayout – Simple Actionscript layout library

UPDATE 3: Created a Google Code project here.  Let me know if you’re interested in contributing.

UPDATE 2: zproxy has an interesting project here that can convert / translate .NET to Actionscript and Javascript.  Check it out! 🙂

UPDATE: You can try out a sample SWF here (try resizing the window to see effect).  It doesn’t include any embedded fonts, so if you don’t have Arial available you might not see much!

Here’s a simple library that gives you Silverlight / WPF -like layout controls in Actionscript 3.  A few notes:

• Some of the classes you’ll find are Grid, StackPanel, Image, Border.  I’ve broken the typical [lower] camel-case naming convention for consistency with WPF / Silverlight.
• If the size of the final SWF isn’t important to you (150 kb+), just use Flex instead 🙂  Obviously it’s way more powerful and better suited.  This library is good for simple layouts and if you prefer very small SWFs.
• Don’t expect too much from it and let me know which bugs you find (and fix).  Some of the “stretch” behavior may differ slightly from Silverlight’s defaults (again, let me know any improvements you make).
• The Grid class supports ColumnDefinitions and RowDefinitions; currently each definition item only supports the Width / Height (adding MinWidth, MinHeight etc would be fairly trivial though).  Values can be “Auto”, a size (in pixels) or nothing (defaulting to “stretch” behavior).
• ContentControl is intended to wrap regular Flash controls and resize them appropriately (Image derives from ContentControl).
• TextBlock and TextBox have TextFormat and EmbedFonts properties (they use embedded=true by default).
• Border supports multiple child elements.  I know it shouldn’t; so just pretend it doesn’t 🙂
• Let me know if it’s useful enough to share on CodePlex or wherever.

For documentation, the best bet is use FlashDevelop and let its intellisense help out.  For more detail take a look at the source; most public properties are defined at the bottom / end of each class.  Most ‘set’ properties that affect layout call the base FrameworkElement’s Invalidate() method.

Here’s the link again.  The zip includes a basic test project for FlashDevelop to get you started 🙂

Hope it’s useful! (it was to me) 🙂

Interactive YouCube Source Code

You can get the source code for YouCube 2.0 here.  It’s lightly commented, mainly to draw attention to the dirty hacks 🙂

See my earlier post for a brief description of what’s going on and note the following:

• The main class of interest is CjcWebBrowser.  It starts a worker thread to take snapshots of the browser control and updates the WriteableBitmap through Dispatcher.Invoke.
• There’s some obsolete code in there (mainly in the NativeMethods folder).  It could use some refactoring 🙂
• It’s tempting to revert to using the Windows Forms WebBrowser control (instead of the WPF/3.5 one).  It already has a ‘DownloadProgress’ event and seemed to perform a bit better (but I could be wrong on that).  Let me know if you get chance to try it…

YouCube 2.0 – Interactive!

UPDATE 2: YouCube 3 (based on Google Chromium) available here!

UPDATE: Source code now available!  See this post.

My YouCube demo is now interactive! :)  Based on code and ideas from Jeremiah Morrill’s excellent Win32Renderer – the main difference is [techie bit coming; skip if bored] this demo acts as an IAdviseSink for the IViewObject exposed by the HTMLDocument…  The upshot of this is it only refreshes the page when something changes, rather than regularly updating with a timer.

To obtain the actual page snapshot, IViewObject.Draw is used.  The image is copied to a WriteableBitmap and rendered as a Viewport2DVisual3D (both new in .NET 3.5).

For the interactivity, things become a little hairy…  Like Jeremiah’s Win32Renderer, moving the mouse over the page also moves a hidden WebBrowser control, ensuring the relevant part of the page is under the mouse.  This is nasty, but mostly grants us full browser functionality; you can hover, click links, type and select text.  Dragging scrollbars doesn’t currently have the desired effect, but you can still click them or use the keyboard (if you’re willing to take a crack at fixing this, let me know) 🙂

You’ll find some pages behave better than others.  For example Google Maps is pretty heavy on refreshes (you might get the browser pausing occasionally and the ‘hidden’ window appearing for a time) while Live Search Maps is actually pretty manageable (even dragging round Birds Eye View).  YouTube and Next2Friends work surprisingly well (as they’re using Flash video, not all updates make it through IViewObject / IAdviseSink… the videos will stop after a while, unless you move the mouse).

The "loading" (progress) indicator has temporarily gone.  Previously it was using the DownloadProgress event exposed by the System.Windows.Forms.WebBrowser.  It’s now using the .NET 3.5 WebBrowser, but unfortunately that doesn’t seem to offer a progress event.  I’ll post an update here if / when I look for an alternative 🙂

To take it for a spin (!) you can click the image above or right here for the ClickOnce application.  If you’re still running pre-RTM 3.5 SP1 be sure to upgrade first.  Also note it can potentially run very slowly on older machines..

Dead ringer #2

Oh oh…

Interestingly this 360 [Elite] was a replacement (rather than a repair of my original console) but was manufactured late 2007.  I want a brand new one this time! 🙂

Obviously I’m pleased it’s a free repair 🙂

Demos – ClickOnce deployment

Here are ClickOnce deployments for some WPF demos and apps I’ve done:

• WPF 2D Physics – One of my first demos (the NewtonDynamics-based one with the car) [blog post].
• WPF Photo Print – Simple WPF photo preparation (straighten, crop) & printing utility [blog post].
• WPF Web Browser – Renders WebBrowser content to a WriteableBitmap (be sure to check out Jeremiah Morrill’s WPF Win32 Renderer here) [blog post].

YouCube (3D web browser)

UPDATE 3: YouCube 3.0 (based on Google Chromium) right here.

UPDATE 2: Now interactive!  See here for details.

UPDATE: Added a directional light, specular highlight and trackball / mouse control…  Just because I could 🙂

As you know, .NET 3.5 SP1 includes a WebBrowser control.  The current implementation is just a wrapper around the MSHTML ActiveX control, which unfortunately prevents you from doing crazy things to it through WPF.

The ActiveX control itself can be queried for the IViewObject interface and have its Draw method called.  The WPF WebBrowser doesn’t expose this directly, but fortunately the Windows Forms WebBrowser does (alternatively you could host MSHTML directly).

All that remains is to get the image into a WriteableBitmap…  Then the fun can begin 🙂 :

You can try the result here (ClickOnce application).  The source code is available here.  Note the browser isn’t interactive [yet] 🙂 …