Silverlight scaling listbox items within a wrappanel - silverlight

Question

I have created a listbox with a tiled data template. What I am trying to figure out now is how to properly apply a scale effect to each listbox item when a mouse over or selected event occurs and have it render properly within the wrap panel. I currently have the animations added to the visual states of the ListBoxItemTemplate.
A couple of thoughts:
When the animation is called the tiles within the wrap panel do not reposition to allow for the scaled item to be viewed properly. I would like to have the items within the wrap panel re-position to allow for the item scaled to be visible.
Also I notice that the items when scaled are going beyond the boundary of the wrap panel is there a way to also keep the item when scaled constrained to the viewable area of the wrap panel?
Code used in in search view
<Grid x:Name="LayoutRoot">
<ListBox x:Name="ResultListBox"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{x:Null}"
BorderThickness="0"
HorizontalContentAlignment="Stretch"
ItemContainerStyle="{StaticResource TileListBoxItemStyle}"
ItemsPanel="{StaticResource ResultsItemsControlPanelTemplate}"
ItemsSource="{Binding SearchResults[0].Results}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<formatter:TypeTemplateSelector Content="{Binding}" HorizontalContentAlignment="Stretch" Margin="2.5">
<!-- Person Template -->
<formatter:TypeTemplateSelector.PersonTemplate>
<DataTemplate>
<qr:ucTilePerson />
</DataTemplate>
</formatter:TypeTemplateSelector.PersonTemplate>
<!-- Incident Template -->
<formatter:TypeTemplateSelector.IncidentTemplate>
<DataTemplate>
<qr:ucTileIncident />
</DataTemplate>
</formatter:TypeTemplateSelector.IncidentTemplate>
</formatter:TypeTemplateSelector>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
ResultsItemsControlPanelTemplate is defined in app.xaml as
<ItemsPanelTemplate x:Key="ResultsItemsControlPanelTemplate">
<toolkit:WrapPanel x:Name="wrapTile"/>
</ItemsPanelTemplate>
I would greatly appreciate any suggestions on where to look
Thanks in advance
Image of current result

Answer 1

Render transformers are applied after a layout has occured, its purely graphical task that the Silverlight layout engine knows very little about. What you need is control that when scaled actually increases the size it desires and causes Silverlight to update its layout.
The control you need is the LayoutTransformer control from the Silverlight Toolkit.
Place the content of each of your tiles inside a LayoutTransformer and assign a ScaleTransform to its LayoutTransform property. Now you can get your animations to manipulate the transform and as the tile grows the other tiles will flow.

Answer 2

Working through this I have my user controls stored within within a Listbox datatemplate which is also a userControl referenced within the project. I think I have a partial solution started so now I need to just continue to tweak what is happening. Since I am using a datatemplate I had to set a binding reference on the user control to the Layouttrasnformation
<ListBox x:Name="ResultListBox"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{x:Null}"
BorderThickness="0"
HorizontalContentAlignment="Stretch"
ItemsPanel="{StaticResource ResultsItemsControlPanelTemplate}"
ItemContainerStyle="{StaticResource TileListBoxItemStyle}"
ItemsSource="{Binding SearchResults[0].Results}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<formatter:TypeTemplateSelector Content="{Binding}" HorizontalContentAlignment="Stretch" Margin="2.5">
<!-- Person Template -->
<formatter:TypeTemplateSelector.PersonTemplate>
<DataTemplate >
<layoutToolkit:LayoutTransformer x:Name="PersonTransformer">
<layoutToolkit:LayoutTransformer.LayoutTransform>
<ScaleTransform x:Name="personScale"/>
</layoutToolkit:LayoutTransformer.LayoutTransform>
<qr:ucTilePerson MouseEnter="ucTilePerson_MouseEnter" Tag="{Binding ElementName=PersonTransformer}" />
</layoutToolkit:LayoutTransformer>
</DataTemplate>
</formatter:TypeTemplateSelector.PersonTemplate>
//rest edited for brevity
Then within the code behind of the usercontrol which holds the listbox I used the following:
private void ucTilePerson_MouseEnter(object sender, MouseEventArgs e)
{
var ps = ((UserControl)sender).Tag as LayoutTransformer;
if (ps != null)
{
var transform = ps.LayoutTransform as ScaleTransform;
transform.ScaleX = (transform.ScaleX + 1.2);
transform.ScaleY = (transform.ScaleY + 1.2);
Dispatcher.BeginInvoke(() => { ps.ApplyLayoutTransform(); });
}
I still have to tweak this some as it does not seem to be as fluid as I like ( and I have to also setup mouseLeave events).
Not sure if this is the most appropriate approach and I would appreciate any feedback on alternatives.
Thanks again to Anthony for pointing me in the right direction