Along with ComponentArt UI Framework 2010.1 for Silverlight and WPF comes fantastic new funtionality for our ItemFlow control, the ability to utilize live XAML content within ItemFlowItems. This brings to bear endless possiblities, anything from a simple form wizard spanning multiple ItemFlowItems to nesting an entire ItemFlow within an ItemFlowItem.
Previously ItemFlow utilized a technique of overlapping skewed images in order to attain a perspective transform. Silverlight 3.0 has introduced these types of transforms natively both with 3D Matrix Transforms and the ProjectionPlane along with Writeable Bitmaps. These additional features allow ItemFlow to properly transform any content, not just images.

<ComponentArt:ItemFlow 
	 x:Name="myItemFlow"
          Height="300"
          Width="800"
          ItemHeight="200"
          ItemWidth="200"
          ShowShading="False">
  <ComponentArt:ItemFlow.Items>
    <ComponentArt:ItemFlowItem>
      <ComponentArt:ItemFlowItem.ItemTemplate>
       <DataTemplate>
         <Grid>
           <Border Height="200" Width="200" BorderBrush="Black" BorderThickness="2">
             <TextBlock Text="Hello World" VerticalAlignment="Center" HorizontalAlignment="Center" />
            </Border>
          </Grid>
        </DataTemplate>
      </ComponentArt:ItemFlowItem.ItemTemplate>
    </ComponentArt:ItemFlowItem>
  </ComponentArt:ItemFlow.Items>
</ComponentArt:ItemFlow>

This example illustrates how XAML content can be used within an ItemTemplate.

While this example does have the effect of adding a reflection to your XAML, ItemFlow requires a couple more items in order to shine. Tranditional ImageSource based items can be used along with items utilizing ItemTemplates, however an ItemTemplate specified for an item will override ImageSource. 

Focus

When using ItemFlow with XAML content focus quickly becomes an issue. Depending on one's implementation they may require ItemFlow to prevent focus on XAML elements which are not contained within the currently selected ItemFlowItem. Take for instance the form wizard in the image at the top of this post, TextBoxes in flanking ItemFlowItems should not react to mouse clicks, instead these clicks should bring the flanking ItemFlowItem to the center where it can then be edited. This issue is solved by ItemFlow's shading, setting ShowShading="True" ( the default ) will prevent mouse interaction with flanking ItemFlowItems. When ShowShading is set to "False" the shading which overlaps items will not be shown and therefore will not prevent mouse events from interacting with XAML elements.

Loading

Another issue which arises along with XAML content is the question of load events and item sizing. ItemFlow is not aware of the current state of XAML content elements loaded into it's ItemTemplates. It is up to the developer to size the ItemWidth and ItemHeight properly and in some cases call ItemFlow.Initialize() from Loaded events of relevant elements.

Accessing Elements

XAML content within ItemFlowItems would not be of much use if we could not access elements in order to retrieve values, or apply changes. Finding elements within DataTemplates is not as simple as one might hope, however we have included a method in our ComponentArt.Silverlight.UI.Utils namespace which helps with this endeavor:

TextBlock myHelloWorldBlock = (TextBlock)ComponentArt.Silverlight.UI.Utils.Visual.FindElementByName(myItemFlow, "helloWorldBlock");

Elements may also register themselves with a pointer through their own Loaded events, or any other event in which they are a sender.

Final Notes

Although it may take some tweaking of settings and positions. Combining the techniques described above to create a unique ItemFlow implementation can result in some very interesting innovations.