"Start with the free download, review your website, and make changes fast. The SEO Toolkit with its detailed analysis and search engine friendly suggestions helps improve the relevance of your website in search results right away"

 Joshua Allen writes: Included ... are our sample video and audio widgets, which come with the Gestalt Widgets pack.  By adding a <script> tag to the top of your HTML file, you can automatically enable use of HTML5-compatible video and audio tag syntax:

<html>  
  <head>    
    <script type="text/javascript" 
      src="https://mschnlnine.vo.llnwd.net/d1/dlr-20091120.js"></script>    
    <script type="text/javascript" 
      src="https://mschnlnine.vo.llnwd.net/dlr/dlrmedia.js"></script>  
  </head>  
  <body>    
    <audio autoplay="false">
        <source src="foo.mp3" type="audio/mp3"></source>
    </audio>  
  </body>
</html>

"Microformats are about enhancing the web, representing data in HTML and moving that data around. Oomph: A Microformats Toolkit is for web developers, designers and users, making it easier to create, consume, and style Microformats. Oomph makes consuming and producing content for the web just a little easier, more efficient, more fun. Now featuring Oomph2!"

To solve the problem, set the compiler to explicitly compile the app to x86, and it becomes a non-issue. The downside is that the app can no longer take advantage of x64 capabilities, but for many cases this is probably fine.

Incidentally here is the code that I used:

private string embedded = "<html style=\"margin:0 0 0 0; background-color:Black; overflow:hidden\">" +
"<script event=onload for=window>document.body.scroll=\"no\"</script>"+ "<object width=\"425\" height=\"344\">" +
"<param name=\"movie\" value=\"https://www.youtube.com/v/{0}&hl=en&fs=1\"></param>" +
"<param name=\"allowFullScreen\" value=\"true\"></param>" + "<param name=\"allowscriptaccess\" value=\"always\"></param>" +
"<embed src=\"https://www.youtube.com/v/{0}&hl=en&fs=1\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"425\" height=\"344\"></embed>" +
"</object></html>";

WebBrowser wb = new WebBrowser();
wb.Width = 425;
wb.Height = 344;
wb.NavigateToString(string.Format(embeded, passInPathToVideo));

<myType:TreeMapPanelItem

x:Class="MIXOnline.Descry.Controls.CustomTreeMapItem"

xmlns=https://schemas.microsoft.com/winfx/2006/xaml/presentation

xmlns:x=https://schemas.microsoft.com/winfx/2006/xaml

xmlns:myType="clr-namespace:MIXOnline.Descry;assembly=Inaugural" >

<TextBlock Text="Hello" />

</myType:TreeMapPanelItem>

This allows replacing of custom elements programmatically as was done in the CPP Custom Treemap sample in Descry which needed to inherit from a base TreeMapPanelItem class to pick up some of its default properties and methods. This could not have been done with a standard Silverlight class since they cannot inherit from custom classes. See the CPP TreeMap sample in Descry for an example and look to the CustomTreeMapItem class for an example of an implementation. Note the assignment of the PanelItemType property in the Page.xaml.cs file which lets the TreeMapItem know which class to use for rendering.

Regular Expression search is not on by default. To turn it on you need to expand the options section in the Find and Replace dialog. RegEx search cannot be on by default since certain RegEx characters have completely different meaning that the literal characters and so would cause conflict if both were enabled.

The Complete Character List is conveniently linked off the menu shown when clicking the arrows to the right of the find and replace Textboxes. I tend to learn much more quickly by example, and this page does provide *some* examples, so while useful, it doesn’t contain as many as I’d like. So here are two more for now:

\<xdate\>(.*)

Finds and selects the following node to the end of the line: <xdate>11/14/2008</xdate>

This is handy if you need to remove or modify an XML node. Note that the angle brackets are escaped with backslashes. The parentheses' group the period which allows any character and the asterisk which signifies zero or more characters before the carriage return.

\n~((.+)\n)

Finds and selects carriage returns that have empty lines following them. This is handy if you want to compact empty vertical space. Essentially the logic is: Find a carriage return, but only one that precedes a line with a blank carriage return. This search will not find a line if it has spaces contained in the empty line, so you would need to modify it.

I only provided two examples, but if you know of any good RegEx resources please provide a link in the comment, or you can tweet me on twitter.

For MIX09, our team decided to create a new look for Flotzam that was to be shown prior to the keynotes. We’d thought about possibly creating a Vegas slot machine version, but we ended up choosing Tetris, since it was very much in line with the #MIX09 theme. It sounded like an exciting project, so I jumped on it! Tim Aidlin designed the user experience and the look and feel, and Karsten Januszewski modified the data object model to support binding a single data template type to any one of the available Flotzam data sources collected from the various feeds: Twitter, Flickr, RSS, etc.

We brainstormed about what we wanted it to do, and settled on creating a somewhat simplified version of Tetris that avoided rotating the blocks. Flotzam Tetris needed to specifically target the 16x9 format used in the MIX09 keynote screens. This translated into 1280px by 720px dimensions, a fairly low resolution by today’s standards, which forced us to experiment with shape sizes. We needed to keep a careful balance between ensuring readability of the text in the back row of the keynote sessions while looking esthetically pleasing; the less blocks on screen, the less compelling it appears.

The Tetris logic itself was simple enough; I found several samples on the web to draw from. I chose to borrow some ideas from the CodePlex WPF Tetris that Karsten showed me, but this only got us about halfway. Absent was how to programmatically solve which Tetris blocks should fall based on the pieces that had already fallen. There are probably a few ways to solve this problem. I chose to take a commonly used game approach of using a buffer for the Tetris shapes defined as an array of integers, which I’ll call a table. Zero represents an empty space, and a one represents a space occupied by a block, the fundamental unit that makes up Tetris shapes. It turned out to be convenient to use integers since it very was handy to add up columns and rows for calculating when a row was full or calculating the total height of a stack of shapes for a particular column.

The shapes are defined in the TetrisShape class. The individual blocks that compose a shape are represented in a Point array offset from a (0,0) origin. The TetrisShape class also contains a Position property that maintains the absolute position of a TetrisShape shape in the table.

There are two other interesting parts to the TetrisShape class. The first is a Weight property that allows us to define how important the shape is, so that we can get a better spread of shape usage. It’s used in determining the probability that it will be chosen as the “next” shape to be dropped. The second is the ShapeSignature() method which returns a series of numbers, as a string, that define the “signature” of the bottom of a shape. So for example a 2 x 2 square would have a signature of “00”, or a 3 x 2 Tee shape would have a signature of “101”. The numbers represent the distance to the bottom block from an imaginary line running under the shape. This reason that this signature is returned as a string is so that string operators can be used to match the signature of a shape to the signature of all the other shapes settled in the table.

Fig. 1: Example of the signature of a Square shape vs. a Tee shape.

The GetShapeNeededInTable() method returns the signature of entire width of the bottom of the table. This is a function that examines the height of the columns of the settled shapes in the table to obtain the signature. Once we have this, we can see if a shape can fit in the table by simply calling: ShapeNeeded.Contains(ts.ShapeSignature()). If the call returns true it’s a suitable shape and the shape is stored it in a temporary list that gets sorted based on the TetrisShape Weight property. If there’s more than one shape in the temporary list it randomly chooses one of the shapes with the two highest weights and returns the chosen shape.

The shape chosen then gets bound to the data source and gets added to the VisualTree and displayed on screen. When a row is completed it causes all the “settled” shapes to drop down one level. If a shape drops below the bottom threshold it gets removed from the VisualTree and also the table shape list to prevent a memory leak.

The main loop is the RunTetrisFlotzam() method, which is called at regular intervals by a timer (.7 seconds in by default.) This method contains a method that determines whether a shape can drop down or whether it is “settled” it also calls a function that animates the shapes from one position to the next in a programmatic manner. We wanted the animation to have easing, but it would take a bit of reorganization of the code to make this happen.

You’ll find the source code for Flotzam and Tetris Flotzam here. This was a fun project and perhaps you can make some interesting modifications to it. If you do, be sure to let us know!

It can be argued that what I was attempting to do was an architectural design flaw, since we were attempting to use StackPanels to represent one days’ worth of stacked FriendFeed items; a total of 93 StackPanels for 3 months of data. However, we wished to retain the resizing and scaling properties of the StackPanels’ parent Grid control and it’s ColumnDefinitions, so that we would could avoid writing messy sizing/positioning logic, that the Grid control, conveniently, already has built-in. As a result we would need to find another method to gain performance. We ended up choosing control virtualization, since the sheer number of FriendFeed items is what was causing the slowness.

So, what do I mean by “virtualized control?” A virtualized control is one that utilizes resources efficiently. You might ask: “Shouldn’t all controls utilize resources efficiently?” The answer to that is yes, but there are performance and behavior tradeoffs between a typical control and a virtualized control. Non-virtualized controls have all the databound UI already in memory. Virtualized controls are specialized controls geared for managing large amounts of data that need to bind UI on the fly, and they take a performance hit when doing this. Also, you’ll note that when scrolling the content of the virtual StackPanel control in this project that it does not smoothly scroll up a pixel as a time as a normal ListBox does, instead it scrolls up one item at a time. This is not a limitation of a virtualized control, but rather a limitation of this implementation. To implement this would take a bit more thought.

In other words, when a typical Silverlight control is databound to a data source that contains ten’s of thousand objects, it will literally contain ten’s of thousand UI elements in its’ visual tree; potentially using a vast amount of resources. The visual tree is maintained in memory (in addition to the original data source) whether the visual tree is onscreen or off! Conversely, a virtualized control while having access the to the data source in memory, would only contain the elements that need to be physically displayed within the viewable area of the control, resulting in a dramatically smaller set of items in the visual tree.

This sample shows a virtualization technique for creating a scalable and performant ListBox-like control. There are two key classes: the VirtualizedStackPanel and the VirtualizedItemsControl. The source for this simple virtualized control is here.

VirtualizedStackPanel Role

The VirtualizedStackPanel is a control that simply limits the number of children contained in its visual tree to only the items in the viewable area.  This control alone is unable to display the data properly, since a scrollbar is needed to manage the position of the currently viewable area; the VirtualizedItemsControl takes care of that need.

The VirtualizedStackPanel behaves as a normal StackPanel until a data generator is attached. The IDataGenerator implemented in the custom VirtualizedItemsControl lets the VirtualizedStackPanel know what children are currently in the active viewable area, based on control size and scrollbar position settings. As soon as the size of the control, or scrollbar position changes, the MeasureOverride method is called, and the control recalculates which children are to be added or removed from the visual tree. A ContentPresenter is acquired from the assigned data generator, so that a common DataTemplate can be used to define item UI. When the ContentPresenter Content property is set, the data is bound to the UI defined in the DataTemplate.

The main logic in the VirtualizedStackPanel is in the MeasureOverride method, creates new containers if they are needed when the control height increases, or reuses containers if no new ones are needed, and also removes unnecessary containers of the control height decreases. The ArrangeOverride simply positions all the children in the StackPanel vertically.

VirtualizedItemsControl Role

The VirtualizedItemsControl’s role is to act as a container for one or more Virtualized StackPanel’s. It manages the data source, a common DataTemplate that children use, and it also manages the Scrollbar positioning logic. The VirtualizedItemsControl implements the IDataGenerator interface that assists in communicating with its VirtualizedStackPanel children. This sample shows a single VirtualizedStackPanel child for brevity. But you may refer to the VirtualizedTimelineItemsControl in the Social Timeline project on CodePlex for one that contains multiple children.

Incidentally, the VirtualizedItemsControl’s content is defined in the projects /Themes/Generic.xaml file, it could have been just as well defined procedurally, but it uses an external resource file for better designer / developer workflow. It is critical that this file exist in the project in the Themes folder, and note that this file needs to be defined as a resource in the project to avoid errors. I made the Silverlight 2 newbie mistake of not doing this, and I literally spent days trying to figure out why I couldn't get the project to work.

Resources

I found that writing a virtualized control wasn’t quite as complex as I had anticipated, after I broke down a much more complex sample. There is a good example of a full Implementation of a VirtualListBox in the Silverlight Extensions project on CodePlex. Another related WPF VirtualizedCanvas sample by Chris Lovett that I found useful is located here.

Descry and Codeplex

Visit CodePlex to download a more fully developed version of a virtualized control that supports mouse drag animation with physics, plus a VirtualizedListBox as well. And visit here to get the entire Descry project source!

Descry is the new culmination of our “Innovative Web” teams efforts! It’s worth a check!