in win8 store app, how to do fade-in overlay of items in GridView?

Question

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.

I created a DataTemplate like this：

<DataTemplate x:Key="Customized250x250ItemTemplate">
    <Grid HorizontalAlignment="Left" Width="250" Height="250">
        <Border>
            <Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
        </Border>
        <TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding State}" VerticalAlignment="Top" Margin="0,10,20,0" FontFamily="Segoe UI" FontSize="12"/>
        <Grid x:Name="InfoGrid" Background="Black" Opacity="0">
            <Grid.RowDefinitions>
            <RowDefinition Height="20"/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition Height="20"/>
        </Grid.RowDefinitions>
        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Nickname" VerticalAlignment="Center" Margin="10,0,0,0" FontFamily="Segoe UI" FontSize="17.333" Grid.Row="1"/>
        <TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Nickname}" VerticalAlignment="Center" Margin="0,0,20,0" FontFamily="Segoe UI" FontSize="19.333" Grid.Row="2"/>
        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Age" VerticalAlignment="Center" Margin="10,0,0,0" FontFamily="Segoe UI" FontSize="17.333" Grid.Row="3"/>
        <TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Age}" VerticalAlignment="Center" Margin="0,0,20,0" FontFamily="Segoe UI" FontSize="19.333" Grid.Row="4"/>
        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Race" VerticalAlignment="Center" Margin="10,0,0,0" FontFamily="Segoe UI" FontSize="17.333" Grid.Row="5"/>
        <TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Race}" VerticalAlignment="Center" Margin="0,0,20,0" FontFamily="Segoe UI" FontSize="19.333" Grid.Row="6"/>
        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Language" VerticalAlignment="Center" Margin="10,0,0,0" FontFamily="Segoe UI" FontSize="17.333" Grid.Row="7"/>
        <TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Language}" VerticalAlignment="Center" Margin="0,0,20,0" FontFamily="Segoe UI" FontSize="19.333" Grid.Row="8"/>
        </Grid>
    </Grid>
</DataTemplate>

That Grid with the name " InfoGrid " is designed to be an overlay container of detail information of the current hover GridViewItem , the overlay will fade in nicely when certain GridViewItem is hovered . 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)

That's when I feel really trapped, it seems impossible.

I tend to override the template(ItemTemplate & ItemContainerStyle) It doesn't work out. ItemTemplate is all about Data, ItemContainerStyle is all about sty le, but they are independent of each other , when PointerOver state is on, it can't do anything to content in ItemTemplate but simply change some useless properties of outer container.

It confuses me why GridView in Win8 Metro doesn't provide Hover event for single GridViewItem, is there anything that I need to know to finish this? Some hints, please.

Answer 1

While ItemContainerStyle might include some visual states that could help you - it might be easier to simply put a UserControl in your ItemTemplate / DataTemplate . Once you create a UserControl - you have easy access to its code-behind and you can handle various events, define visual state and transition between these states whenever you want. Your problem might be though that there is no hover event you could handle with touch input, so you should think about some alternatives - perhaps show your overlay on tap, in the details view when you tap on the item or in a separate panel for selected grid view item. Note that a grid with 10 rows or 8 TextBlock s on top of a 250x250 tile won't be readable to most users.