为列表视图项添加悬停效果（windows 通用 10）

Question

我正在尝试向列表视图项添加悬停效果。 当数据在同一页面时，我可以添加悬停效果。

<Style TargetType="ListViewItem" x:Key="ListViewItemHover">
    <Setter Property="Template">
            <Setter.Value>
            <ControlTemplate TargetType="ListViewItem">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" To="Red" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Content1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" To="Blue" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Content1" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid>
                            <ContentPresenter x:Name="Content1"/>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

 <ListView Height="200">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListViewItem Width="100" Margin="10,0,0,0" Style="{StaticResource ListViewItemHover}">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="120"/>
                    <RowDefinition Height="40"/>
                    <RowDefinition Height="40"/>
                </Grid.RowDefinitions>
                <Image Source="" Grid.Row="0"/>
                <TextBlock Text="1" Grid.Row="1"/>
                <TextBlock Text="1" Grid.Row="2" TextWrapping="Wrap"/>
            </Grid>
        </ListViewItem>
        <ListViewItem Width="100" Margin="10,0,0,0" Style="{StaticResource ListViewItemHover}">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="120"/>
                    <RowDefinition Height="40"/>
                    <RowDefinition Height="40"/>
                </Grid.RowDefinitions>
                <Image Source="" Grid.Row="0"/>
                <TextBlock Text="2" Grid.Row="1" />
                <TextBlock Text="2" Grid.Row="2"  TextWrapping="Wrap"/>
            </Grid>
        </ListViewItem>
    </ListView>

但是当使用资源字典时它会失败。

<ListView Height="200" Grid.Row="1" Name="test" ItemTemplate="{StaticResource row_items}">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
</ListView>

<DataTemplate x:Key="row_items">
    <ListViewItem Style="{StaticResource ListViewItemHover}">
        <Grid Width="100" Margin="10,0,0,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="120"/>
                <RowDefinition Height="40"/>
                <RowDefinition Height="40"/>
            </Grid.RowDefinitions>
            <Image Source="{Binding data, Mode=TwoWay}" Grid.Row="0"/>
            <TextBlock Text="{Binding data1, Mode=TwoWay}" Grid.Row="1"/>
            <TextBlock Text="{Binding data2, Mode=TwoWay}" Grid.Row="2" TextWrapping="Wrap"/>
        </Grid>
    </ListViewItem>
</DataTemplate>

我假设数据模板导致了问题。但是我该如何解决。 有没有关于这个问题的好教程。我发现很多 wpf 但不是通用的。

提前致谢。

Answer 1

是的，你是对的。您的DataTemplate 是您的问题的原因。

ListView.ItemTemplate 设置用于显示每个项目的DataTemplate。 DataTemplate 用在ListViewItem 里面，正好是ContentPresenter 的内容，你可以在Visual Studio 的Live Visual Tree中找到这个：

所以要修复它，我们需要更改 DataTemplate 之类的：

<DataTemplate x:Key="row_items">
    <Grid Width="100" Margin="10,0,0,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="120"/>
            <RowDefinition Height="40"/>
            <RowDefinition Height="40"/>
        </Grid.RowDefinitions>
        <Image Source="{Binding data, Mode=TwoWay}" Grid.Row="0"/>
        <TextBlock Text="{Binding data1, Mode=TwoWay}" Grid.Row="1"/>
        <TextBlock Text="{Binding data2, Mode=TwoWay}" Grid.Row="2" TextWrapping="Wrap"/>
    </Grid>
</DataTemplate>

要使用ListViewItemHover 样式，我们需要设置ItemContainerStyle 属性。此属性获取或设置在呈现项目容器时使用的样式。设置该属性相当于为ListViewItem设置Style。

<ListView Name="test"
          Grid.Row="1"
          Height="200"
          ItemContainerStyle="{StaticResource ListViewItemHover}"
          ItemTemplate="{StaticResource row_items}"
          ItemsSource="{Binding list}">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>