C# Silverlight - Zoom into Horizontal Listbox Image Items.

Question

I have the following listbox below which binds to a database table of image URL's. When the application is running, it is possible to click on each individual image, and witness a light blue selection box appear on the image (you can tell when each individual image is selected as its clicked). What I would like to be able to do is perform a zoom upon clicking each image. Does anyone know of a way in which I could do this by amending the code I am currently using below!? (The reason for this is that I need to display the images in a horizontal listbox, which is what this code does.)

<ListBox x:Name="list1"  HorizontalAlignment="Left" RenderTransformOrigin="0.5,0.5"  Width="400"  d:LayoutOverrides="HorizontalAlignment">
                            <ListBox.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Horizontal"/>
                                </ItemsPanelTemplate>
                            </ListBox.ItemsPanel>
                            <ListBox.ItemTemplate>
                                <DataTemplate >
                                    <Image Width="100" Height="100" Stretch="Fill"  Source="{Binding LowResUrl}"/>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>

Answer 1

You can access the ListBoxItem control's visualStateManager by overriding the ControlTemplate. In Expression Blend select a ListBoxItem and "Edit a copy" of the Template. This will copy the old ListBoxItem control's style and control template to givey ou a nice starting place to modify what happens on key events that this ListBox control is setup to handle.

After doing this you can apply animations within the visual state manager on a wide variety of events (Hover, Selection, disabled, etc).

If you are data binding your ItemsSource property and don't have literal ListBoxItems to generate a ListBoxItem Style to start from, just create a new ListBox and add a ListBoxItem to it to generate the Style+ControlTemplate from. Once you generate the style, you can change your nice data bound ListBox Item's control template by specifying the newly created resource on your data bound ListBox control's ItemContainerStyle property.

Answer 2

You can use this snippet you are currently using ItemTemplate there is one more template GeneratedItemContainer(ItemContainerStyle)

 <Style x:Key="ListBoxItemStyleContainerWide" TargetType="ListBoxItem">
    <Setter Property="Padding" Value="3"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="VerticalContentAlignment" Value="Top"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="TabNavigation" Value="Local"/>
    <Setter Property="Template">
     <Setter.Value>
      <ControlTemplate TargetType="ListBoxItem">
       <Grid x:Name="grid" Background="{TemplateBinding Background}" RenderTransformOrigin="0.5,0.5">
        <Grid.RenderTransform>
         <TransformGroup>
          <ScaleTransform/>
          <SkewTransform/>
          <RotateTransform/>
          <TranslateTransform/>
         </TransformGroup>
        </Grid.RenderTransform>
        <VisualStateManager.VisualStateGroups>
         <VisualStateGroup x:Name="CommonStates">
          <VisualStateGroup.Transitions>
           <VisualTransition GeneratedDuration="00:00:00.2000000" To="MouseOver">
            <Storyboard>
             <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.2000000" Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(UIElement.Opacity)" From="0" To="1"/>
             <ColorAnimation BeginTime="00:00:00" Duration="00:00:00.2000000" Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" To="#FFF6BD43"/>
             <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
              <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="2"/>
             </DoubleAnimationUsingKeyFrames>
             <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
              <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="2"/>
             </DoubleAnimationUsingKeyFrames>
            </Storyboard>
           </VisualTransition>
          </VisualStateGroup.Transitions>
          <VisualState x:Name="Normal">
           <Storyboard>
            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)">
             <EasingColorKeyFrame KeyTime="00:00:00" Value="#00F6BD43"/>
            </ColorAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(UIElement.Opacity)">
             <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
           </Storyboard>
          </VisualState>
          <VisualState x:Name="MouseOver">
           <Storyboard>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity">
             <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)">
             <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFF6BD43"/>
            </ColorAnimationUsingKeyFrames>
           </Storyboard>
                            </VisualState>
          <VisualState x:Name="Disabled">
           <Storyboard>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity">
             <SplineDoubleKeyFrame KeyTime="0" Value=".55"/>
            </DoubleAnimationUsingKeyFrames>
           </Storyboard>
          </VisualState>
         </VisualStateGroup>
         <VisualStateGroup x:Name="SelectionStates">
          <VisualState x:Name="Unselected"/>
          <VisualState x:Name="Selected">
           <Storyboard>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity">
             <SplineDoubleKeyFrame KeyTime="0" Value=".75"/>
            </DoubleAnimationUsingKeyFrames>
           </Storyboard>
          </VisualState>
         </VisualStateGroup>
         <VisualStateGroup x:Name="FocusStates">
          <VisualState x:Name="Focused">
           <Storyboard>
            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility">
             <DiscreteObjectKeyFrame KeyTime="0">
              <DiscreteObjectKeyFrame.Value>
               <Visibility>Visible</Visibility>
              </DiscreteObjectKeyFrame.Value>
             </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
           </Storyboard>
          </VisualState>
          <VisualState x:Name="Unfocused"/>
         </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Rectangle x:Name="fillColor" RadiusX="10" RadiusY="10" IsHitTestVisible="False" Width="950" Height="74" Stroke="Black" StrokeThickness="3"/>
        <Rectangle x:Name="fillColor2" Fill="#FFEEDEA7" RadiusX="5" RadiusY="5" IsHitTestVisible="False" Opacity="0"/>
        <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
        <Rectangle x:Name="FocusVisualElement" StrokeThickness="1" RadiusX="10" RadiusY="10" Visibility="Collapsed"/>
       </Grid>
      </ControlTemplate>
     </Setter.Value>
    </Setter>
</Style>