Question

通常在鼠标悬停时，我们会在鼠标悬停时突出显示gridviewitem的灰色边框。但不是那样，我会稍微想要增加gridviewitem的大小，就像一个小小的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中更改Grid的大小，这样看起来我们已经在GridViewItem上实现了一个弹出窗口。

但请注意，由于GridViewItem具有灰色边框并且具有固定大小，因此如果我们更改了很多Grid，那么Grid的内容可能会被截断。如果我们根据您的灰色边框对网格的大小做一点改变，它将正常工作。

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

另一种方式是我们可以在网格上执行CompositeTransform并更改CompositeTransform.ScaleX和CompositeTransform.ScaleY以拉伸或缩小网格。通过这种方式，Grid中的其他控件也将被拉伸或缩小。

我们可以使用VisualState或.cs代码实现上述要求。

我创建了一个示例，通过在网格上执行CompositeTransform来实现代码，在我的示例中，我处理了移动操作，我使用了PointerEntered事件。我使用PointerExited事件来处理移动离开操作并将CompositeTransform.ScaleX和CompositeTransform.ScaleY值设置为1，以使GridViewItem返回到PointerExited事件内的正常大小

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中增加mouseview上的gridviewitem的大小？

1 个答案: