WPF: Açık Belirli bir kontrolde fareyi hareket ettirin, diğer denetimlerde boyutunu ve çakışmalarını artırın

Question

Kullanıcı fareyi istediği zaman bir denetimin boyutunu artırmak istiyorum. kırmızı ötesi örtüşme ile

resim: google arama (görüntüler sekmesi) ile olduğu gibi akım kontrol komşu kontrolleri örtüşmelidir ziyade
boyut artışı aşağıda gösterilen, diğer denetimleri yeniden ayarlamak gerekir diğer görüntüler.

Answer 1

ScaleTransform'u IsMouseOver'da RenderTransform içinde kullanabilirsiniz. Ölçeklendirmenin Kontrol Merkezi'nden yapılması gerekiyorsa, RenderTransformOrigin="0.5,0.5"'u kullanabilirsiniz. Ayrıca, muhtemelen diğer Kontrollerin üstünde görüntülendiğinden emin olmak için ZIndex'i Tetikleyicide ayarlamanız gerekecektir. Bir TextBlock ile Örnek

Güncelleme
.... Birden TextBlocks birlikte yığılmış olan zaman istenen etkiyi elde değildir ... Bu

<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 gibi Deneyin

Örneğin

Bunu denetlemek:

<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

bir gölgeleme etkisi için, görüntüyü yatay hizalama vererek birlikte: Bu işler ..

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