Wie die Größe von gridviewitem auf Maus über in uwp erhöhen?

Question

Normalerweise erhalten wir bei mouseover einen grauen Rand, der das gridviewitem bei Mouse Over hervorhebt. Aber stattdessen möchte ich die Größe des gridviewitem leicht erhöhen wie ein kleiner Pop und weiter, wenn die Maus die normale Größe wieder erreicht. Bitte beachten Sie, dass die Zunahme der Größe/des Popups den Rest der GridViewitems nicht stören sollte.

Mein Code zur Zeit ist sehr einfach:

<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

In meinem Kopf gibt es keine perfekte Lösung für diese, denn wenn wir eine große Veränderung in der Größe des GridViewItem machen, wird es andere GridViewItem beeinflussen.

Eine Abhilfe hierfür ist, dass wir die Größe des Grids in der DataTemplate ändern können, auf diese Weise sieht es so aus, als ob wir ein Popup auf dem GridViewItem implementiert hätten.

Aber bitte beachten Sie, dass, da das GridViewItem einen grauen Rand hat und es die feste Größe hat, also wenn wir eine Menge des Rasters geändert haben, dann kann der Inhalt des Rasters abgeschnitten werden. Und es wird gut funktionieren, wenn wir die Größe des Rasters basierend auf Ihrer grauen Grenze ändern.

Um die Größe des Gitters zu ändern, können wir die Höhe und Breite des Gitters ändern. Auf diese Weise wird die Größe der anderen Steuerelemente nicht geändert, die sich innerhalb des Rasters befinden, z. B. die Schriftgröße des Texts.

Der andere Weg ist, dass wir eine CompositeTransform auf dem Gitter durchführen und die CompositeTransform.ScaleX und CompositeTransform.ScaleY ändern können, um das Gitter zu dehnen oder zu verkleinern. Auf diese Weise werden die anderen Steuerelemente, die sich im Grid befinden, ebenfalls gedehnt oder geschrumpft.

Wir können die oben genannte Anforderung mithilfe des VisualState- oder .cs-Codes implementieren.

Ich habe ein Beispiel erstellt, um es in Code hinter implementieren, indem Sie eine CompositeTransform auf der Grid, in meinem Beispiel für die Behandlung der Verschiebung über Operation, habe ich das PointerEntered Ereignis. Und ich benutze das Ereignis PointerExited, um die Operation move leave zu verarbeiten, und setze die Werte CompositeTransform.ScaleX und CompositeTransform.ScaleY auf 1, damit GridViewItem innerhalb von PointerExited auf die normale Größe zurückkehrt.

Der XAML-Code:

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

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

Der .CS Code:

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

Das Ergebnis:

Dank.