Zooming an item in Listbox/SurfaceListbox WPF - wpf

Question

I am working on SurfaceListbox but I think the logic would apply to normal WPF listbox also.
I have the surfacelistbox with horizontal scroll enabled. It contains close to 20 items. The surfacelistbox is going to be placed in the center of the screen. Now when the user scrolls the listbox, the items move horizontally and based on the size of each item in the listbox, I have seen generally 3 items are visible at any given time on the screen.
Now what I want to do is, when the user stops scrolling and the 3 items are visible, I want to zoom in the center item i.e. basically enlarge it to highlight it.
Any pointers on how to implement such functionality in WPF would be great. Since the user doesnt make a selection when scrolling I could not use the selectionchanged event to know which one is the center item.

Answer 1

Place the SurfaceListBox in a Grid and bind ScaleTransform to a slider with a range from 1 to 5 centered in the Grid using RenderTransformOrigin="0.5,0.5".
The ItemsSource is set to an ObservableCollection; I include some definitions below for completeness to help others follow. I can provide more code if needed.
Here is the View:
<Window x:Class="SurfaceControls.MainWindow"
Icon="/Images/logo.gif"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Surface Toolkit Controls" Height="500" Width="600"
xmlns:my="http://schemas.microsoft.com/surface/2008" >
<Window.Resources>
<DataTemplate x:Key="EquipmentItemStyle">
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Path=Id}"/>
<TextBlock Text="{Binding Path=EquipmentName}"/>
<TextBlock Text="{Binding Path=EquipmentType}"/>
</StackPanel>
</DataTemplate>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid RenderTransformOrigin="0.5,0.5" Grid.Row="0">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform
ScaleY="{Binding Path=Value, ElementName=slider}"
ScaleX="{Binding Path=Value, ElementName=slider}"/>
</TransformGroup>
</Grid.RenderTransform>
<my:SurfaceListBox
ItemsSource="{Binding Path=Equipment, Mode=TwoWay}"
SelectedItem="{Binding Path=SelectedEquipment, Mode=TwoWay}"
ItemTemplate="{StaticResource ResourceKey=EquipmentItemStyle}" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"
VerticalAlignment="Stretch"
HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</my:SurfaceListBox>
</Grid>
<StackPanel Grid.Row="1" Orientation="Horizontal">
<my:SurfaceSlider Ticks="5"
Width="100"
Minimum="1"
Interval="1"
Maximum="5"
x:Name="slider"
VerticalAlignment="Center"
Margin="4,4,4,4"/>
</StackPanel>
</Grid>
</Window>
Here this collection bound by the ListBox:
private ObservableCollection<Equipment> _equipment = new ObservableCollection<Equipment>();
public ObservableCollection<Equipment> Equipment
{
get
{
return _equipment;
}
set
{
_equipment = value;
}
}
And the defintion of the model:
public class Equipment
{
public int Id { get; set; }
public string EquipmentName { get; set; }
public string EquipmentType { get; set; }
}

Answer 2

Got useful information from these two links
http://social.msdn.microsoft.com/Forums/en-US/surfaceappdevelopment/thread/290f18c3-9579-4578-b215-45e6eb702470
http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/5d486826-9a72-4769-bd09-ff6977e16c30