在win8商店应用程序中，如何在GridView中进行项目的淡入淡出覆盖

本文关键字：项目 覆盖 淡出 淡入 win8 应用程序 GridView | 更新日期: 2023-09-27 17:58:19

我是Win8开发的新手，我一直在实现一些我认为相当容易的设计，因为我确实有一些C#、Javascript等方面的经验。

我创建了一个这样的数据模板：

<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>

名为"InfoGrid"的网格被设计成当前悬停GridViewItem的详细信息的覆盖容器，当某些GridViewItem悬停时，覆盖将很好地淡出。所以我将其"不透明度"设置为0，寻找一些方法来完成我的设计。（我在网站上使用过很多次这种设计，但第一次是在Win8应用程序中）

那时候我真的感觉被困住了，这似乎是不可能的。

我倾向于覆盖模板（ItemTemplate&ItemContainerStyle）它不起作用。ItemTemplate是关于数据的，ItemContainerStyle是关于sty的le，但它们彼此独立，当PointerOver状态处于启用状态时，它不能对ItemTemplate中的内容执行任何操作，只能更改外部容器的一些无用属性。

这让我很困惑，为什么Win8 Metro中的GridView没有为单个GridViewItem提供Hover事件，有什么需要我知道的吗？请给我一些提示。

在win8商店应用程序中，如何在GridView中进行项目的淡入淡出覆盖

虽然ItemContainerStyle可能包括一些可以帮助您的视觉状态，但只需在ItemTemplate/DataTemplate中放入UserControl可能会更容易。一旦创建了UserControl，就可以轻松访问其代码，并且可以随时处理各种事件、定义视觉状态和在这些状态之间转换。不过，你的问题可能是，触摸输入无法处理悬停事件，所以你应该考虑一些替代方案——也许在点击时显示覆盖，当你点击项目时在详细信息视图中显示覆盖，或者在选定网格视图项目的单独面板中显示覆盖。请注意，在250x250瓦片上有10行或8个TextBlock的网格对大多数用户来说是不可读的。

相关文章：