uwpでマウスオーバーでgridviewitemのサイズを増やすにはどうすればいいですか？

Question

通常、マウスオーバー時に、マウスの上にあるgridviewitemを強調表示する灰色の境界線が表示されます。しかし、その代わりに私は少しポップのようなgridviewitemのサイズを少し増やしたいと思っています。そして、マウスの葉がそれを通常のサイズに戻すときにオンにします。サイズ/ポップアップの増加が残りのgridviewアイテムを妨げてはならないことに注意してください。

私のコードは現在、非常に基本的なものです：私の心の中で

<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他の人に影響を与えますので、このための完璧なソリューションは、ありません。

これの回避策の1つは、DataTemplate内のGridのサイズを変更できることです。このようにして、GridViewItemでポップアップを実装したように見えます。

ただし、GridViewItemには灰色の枠があり、固定サイズのため、多くのグリッドを変更すると、グリッドの内容が切り捨てられることがあります。グリッドの境界線に基づいてグリッドのサイズを少し変更するとうまく動作します。

グリッドのサイズを変更するには、グリッドの高さと幅を変更することができます。この方法では、グリッド内にある他のコントロールのサイズ、たとえばテキストのフォントサイズは変更されません。

もう1つの方法は、グリッド上でCompositeTransformを実行して、CompositeTransform.ScaleXとを変更してグリッドを伸縮させることです。このようにして、Grid内にある他のコントロールも伸縮します。

上記の要件は、VisualStateまたは.csコードを使用して実装できます。

グリッド上にCompositeTransformを実行することでコードを実装する例を作成しました。私の例では、移動操作を処理する例ではPointerEnteredイベントを使用しています。そして、私はPointerExitedイベントを使用して移動離脱操作を処理し、CompositeTransform.ScaleXとCompositeTransform.ScaleYの値を1に設定して、PointerExitedイベント内でGridViewItemが通常のサイズに戻るようにします。

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

結果：

感謝。