如何在 uwp 中增加鼠标悬停时 gridviewitem 的大小？

Question

通常在鼠标悬停时我们会得到一个灰色边框，突出显示鼠标悬停在 gridviewitem 上。但相反，我会稍微增加 gridviewitem 的大小，就像一点点流行一样，当鼠标离开时将其恢复到正常大小。请注意 size/pop 向上的增加不应影响其余的 gridviewitems。

我的代码目前非常基础：

<GridView x:Name="contentGV" Margin="18,10,18,18"  
                          Width="Auto">
    <GridView.ItemContainerStyle>
        <Style TargetType="GridViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
        </Style>
    </GridView.ItemContainerStyle>
    <GridView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <StackPanel Margin="5,5,25,5" MaxWidth="145" Height="220">
                    <Grid Background="{Binding LogoBG}" CornerRadius="25" Height="120" Width="120">
                        <Border Height="120" Width="120" CornerRadius="25">
                            <Border.Background>
                                <ImageBrush ImageSource="{Binding LogoUrl}" />
                            </Border.Background>
                        </Border>
                    </Grid>
                    <TextBlock x:Name="Title" 
                                   MaxLines="2" Width="120"
                                   Text="{Binding Title}" TextWrapping="WrapWholeWords"/>

                </StackPanel>
            </Grid>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

Answer 1

在我看来，对此没有完美的解决方案，因为如果我们对 GridViewItem 的大小进行较大的更改，则会影响其他 GridViewItem。

一个解决方法是我们可以在 DataTemplate 中更改网格的大小，这样看起来我们已经在 GridViewItem 上实现了一个弹出窗口。

但是请注意，由于GridViewItem有一个灰色的边框，而且它的大小是固定的，所以如果我们对Grid进行了大量的改动，那么GridViewItem的内容可能会被截断。如果我们根据您的灰色边框对 Grid 的大小进行一些更改，它就可以正常工作。

为了改变网格的大小，一种方法是我们可以改变网格的高度和宽度。这样就不会改变它在Grid中的其他控件的大小，例如文本的字体大小。

另一种方法是我们可以执行 CompositeTransform on the Grid and change the CompositeTransform.ScaleX and CompositeTransform.ScaleY 来拉伸或收缩网格。这样，Grid 内的其他控件也将被拉伸或收缩。

我们可以通过VisualState或者.cs代码来实现上面的需求

我创建了一个示例，通过执行 CompositeTransform on the Grid, in my example for handling the move over operation, I have used the PointerEntered event. And I use the PointerExited event to handle the move leave operation and set the CompositeTransform.ScaleX and CompositeTransform.ScaleY value as 1 to let the GridViewItem return to the normal size inside thePointerExited 事件在代码隐藏中实现它。

XAML代码：

<GridView.ItemTemplate>
            <DataTemplate>
                <Grid PointerEntered="Grid_PointerEntered" PointerExited="Grid_PointerExited"> 
                   ……

                </Grid>
            </DataTemplate>
        </GridView.ItemTemplate>

.CS代码：

private void Grid_PointerEntered(object sender, PointerRoutedEventArgs e)
    {
        Grid testGrid = sender as Grid;
        testGrid.RenderTransform = new CompositeTransform() { ScaleX = 1.2, ScaleY = 1.2 };

    }

    private void Grid_PointerExited(object sender, PointerRoutedEventArgs e)
    {
        Grid testGrid = sender as Grid;
        testGrid.RenderTransform = new CompositeTransform() { ScaleX = 1, ScaleY = 1 };
    }

结果：

谢谢。

如何在 uwp 中增加鼠标悬停时 gridviewitem 的大小？

How to increase the size of gridviewitem on mouse over in uwp?

c#

xaml

windows-runtime

win-universal-app

windows-10-universal