WPF: Al passaggio del mouse su un particolare controllo, aumentare le dimensioni e sovrapporre sugli altri controlli

Question

Desidero aumentare le dimensioni di un controllo ogni volta che l'utente passa il mouse.
L'aumento di dimensioni non deve riadattare gli altri controlli, piuttosto il controllo della corrente devono sovrapporsi ai controlli vicini come è il caso con la (scheda immagini) google ricerca illustrato di seguito:

L'immagine con sovrapposizioni bordo rosso le altre immagini.

Answer 1

È possibile utilizzare ScaleTransform in RenderTransform su IsMouseOver. Se si desidera eseguire il ridimensionamento dal centro del controllo, è possibile utilizzare RenderTransformOrigin="0.5,0.5". Inoltre, probabilmente dovrai impostare ZIndex nel Trigger per assicurarti che venga visualizzato sopra gli altri controlli. Esempio con un TextBlock

Aggiornamento
Prova in questo modo

<ItemsControl Margin="50"> 
    <ItemsControl.Resources> 
     <Style x:Key="ScaleStyle" TargetType="TextBlock"> 
      <Style.Triggers> 
       <Trigger Property="IsMouseOver" Value="True"> 
        <Setter Property="Grid.ZIndex" Value="1"/> 
        <Setter Property="RenderTransform"> 
         <Setter.Value> 
          <ScaleTransform ScaleX="1.1" ScaleY="1.1"/> 
         </Setter.Value> 
        </Setter> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </ItemsControl.Resources> 
    <TextBlock Style="{StaticResource ScaleStyle}" RenderTransformOrigin="0.5,0.5" Text="Something.." Background="Red" Height="20"/> 
    <TextBlock Style="{StaticResource ScaleStyle}" RenderTransformOrigin="0.5,0.5" Text="TextBlock2" Background="DarkBlue" Height="20"/> 
    <TextBlock Style="{StaticResource ScaleStyle}" RenderTransformOrigin="0.5,0.5" Text="TextBlock3" Background="DarkBlue" Height="20" Foreground="White"/> 
    <TextBlock Style="{StaticResource ScaleStyle}" RenderTransformOrigin="0.5,0.5" Text="TextBlock4" Background="DarkBlue" Height="20" Foreground="White"/> 
</ItemsControl> 

Answer 2

@Meleak ... Non si otterrebbe l'effetto desiderato quando si hanno più TextBlocks accatastati insieme ....

per es controllare questo:

<ItemsControl> 
    <TextBlock Text="Something.." Background="Red" Height="20"> 
     <TextBlock.Style> 
      <Style TargetType="TextBlock"> 
       <Style.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter Property="RenderTransform"> 
          <Setter.Value> 
           <ScaleTransform ScaleX="2" ScaleY="2"/> 
          </Setter.Value> 
         </Setter> 
        </Trigger> 
       </Style.Triggers> 
      </Style> 
     </TextBlock.Style> 
    </TextBlock> 
    <TextBlock Text="TextBlock2" Background="DarkBlue" Height="20" Foreground="White"></TextBlock> 
    <TextBlock Text="TextBlock3" Background="DarkBlue" Height="20" Foreground="White"></TextBlock> 
    <TextBlock Text="TextBlock4" Background="DarkBlue" Height="20" Foreground="White"></TextBlock> 
</ItemsControl> 

Answer 3

Per un effetto ombra, oltre a offrire l'immagine di un allineamento orizzontale:

<ItemsControl Margin="50,200,50,0"> 
     <ItemsControl.Resources> 
      <Style x:Key="ScaleStyle" TargetType="Image"> 
       <Style.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter Property="Grid.ZIndex" Value="1"/> 
         <Setter Property="RenderTransform"> 
          <Setter.Value> 
           <ScaleTransform ScaleX="1.1" ScaleY="1.5" /> 
          </Setter.Value> 
         </Setter> 
        </Trigger> 
       </Style.Triggers> 
      </Style> 
     </ItemsControl.Resources> 

     <Image Height="100" Style="{StaticResource ScaleStyle}" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="100" Source="D:\Cablevision\Cable Vision RFP DOCs\WpfApplication1\WpfApplication1\square-house-design.jpg" MouseDown="image1_MouseDown"> 
       <Image.BitmapEffect> 
      <DropShadowBitmapEffect Color="Black" Direction="320" 
    ShadowDepth="25" Softness="1" Opacity="0.5"/> 
      </Image.BitmapEffect> 
     </Image> 


     <Image Height="100" Margin="110,-100,0,0" Style="{StaticResource ScaleStyle}" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="100" Source="D:\Cablevision\Cable Vision RFP DOCs\WpfApplication1\WpfApplication1\file.jpg" > 
         <Image.BitmapEffect> 
      <DropShadowBitmapEffect Color="Black" Direction="320" 
    ShadowDepth="25" Softness="1" Opacity="0.5"/> 
      </Image.BitmapEffect> 
     </Image > 
     <Image Height="100" Margin="220,-100,0,0" Style="{StaticResource ScaleStyle}" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Name="image3" Stretch="Fill" VerticalAlignment="Top" Width="100" Source="D:\Cablevision\Cable Vision RFP DOCs\WpfApplication1\WpfApplication1\file.jpg" MouseEnter="image1_MouseEnter" MouseLeave="image1_MouseLeave" /> 



    </ItemsControl>