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.