title: in win8 store app, how to do fade-in overlay of items in GridView?
body: <p>I'm a newbie in Win8 development, and I'm stuck in implementing some design that I assume to be fairly easy, since I do have some experience of C#, Javascript, etc.</p>
  
  <p>I created a DataTemplate like this：</p>
  
  <pre><code>&lt;DataTemplate x:Key="Customized250x250ItemTemplate"&gt;
      &lt;Grid HorizontalAlignment="Left" Width="250" Height="250"&gt;
          &lt;Border&gt;
              &lt;Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/&gt;
          &lt;/Border&gt;
          &lt;TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding State}" VerticalAlignment="Top" Margin="0,10,20,0" FontFamily="Segoe UI" FontSize="12"/&gt;
          &lt;Grid x:Name="InfoGrid" Background="Black" Opacity="0"&gt;
              &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition Height="20"/&gt;
              &lt;RowDefinition/&gt;
              &lt;RowDefinition/&gt;
              &lt;RowDefinition/&gt;
              &lt;RowDefinition/&gt;
              &lt;RowDefinition/&gt;
              &lt;RowDefinition/&gt;
              &lt;RowDefinition/&gt;
              &lt;RowDefinition/&gt;
              &lt;RowDefinition Height="20"/&gt;
          &lt;/Grid.RowDefinitions&gt;
          &lt;TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Nickname" VerticalAlignment="Center" Margin="10,0,0,0" FontFamily="Segoe UI" FontSize="17.333" Grid.Row="1"/&gt;
          &lt;TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Nickname}" VerticalAlignment="Center" Margin="0,0,20,0" FontFamily="Segoe UI" FontSize="19.333" Grid.Row="2"/&gt;
          &lt;TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Age" VerticalAlignment="Center" Margin="10,0,0,0" FontFamily="Segoe UI" FontSize="17.333" Grid.Row="3"/&gt;
          &lt;TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Age}" VerticalAlignment="Center" Margin="0,0,20,0" FontFamily="Segoe UI" FontSize="19.333" Grid.Row="4"/&gt;
          &lt;TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Race" VerticalAlignment="Center" Margin="10,0,0,0" FontFamily="Segoe UI" FontSize="17.333" Grid.Row="5"/&gt;
          &lt;TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Race}" VerticalAlignment="Center" Margin="0,0,20,0" FontFamily="Segoe UI" FontSize="19.333" Grid.Row="6"/&gt;
          &lt;TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Language" VerticalAlignment="Center" Margin="10,0,0,0" FontFamily="Segoe UI" FontSize="17.333" Grid.Row="7"/&gt;
          &lt;TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Language}" VerticalAlignment="Center" Margin="0,0,20,0" FontFamily="Segoe UI" FontSize="19.333" Grid.Row="8"/&gt;
          &lt;/Grid&gt;
      &lt;/Grid&gt;
  &lt;/DataTemplate&gt;
  </code></pre>
  
  <p>That Grid with the name "<strong>InfoGrid</strong>" is designed to be <strong>an overlay container</strong> of detail information of the <strong>current hover GridViewItem</strong>, the overlay will <strong>fade in nicely</strong> when certain <strong>GridViewItem is hovered</strong>. So I set its Opacity to 0, looking for some approaches to accomplish my design.(I've used this design in websites so many times, but first time in Win8 app)</p>
  
  <p>That's when I feel really trapped, it seems impossible. </p>
  
  <p>I tend to override the template(ItemTemplate &amp; ItemContainerStyle)
  It doesn't work out. ItemTemplate is all about Data, ItemContainerStyle is all about sty
  le, but they are <strong>independent of each other</strong>, when PointerOver state is on, it can't do anything to content in ItemTemplate but simply change some useless properties of outer container.</p>
  
  <p>It confuses me why GridView in Win8 Metro doesn't provide <strong>Hover</strong> event for single GridViewItem, is there anything that I need to know to finish this? Some hints, please.</p>