WPF：On特定のコントロール上でマウスをホバーし、そのサイズを大きくし、他のコントロール上でオーバーラップします。

Question

ユーザーがマウスを移動するたびにコントロールのサイズを大きくしたいとします。赤い境界重複と

画像：Google検索（画像タブ）と同様に電流制御が隣接するコントロールと重なるべきむしろ
サイズの増加は、以下に示す、他のコントロールを再調整するべきではありません他の画像。

Answer 1

ScaleTransformをIsMouseOverのRenderTransformで使用できます。コントロールの中心からスケーリングを実行する場合は、RenderTransformOrigin="0.5,0.5"を使用できます。また、他のコントロールの上に表示されるように、ZIndexをトリガーに設定する必要があります。 TextBlockを持つ例は

更新
....あなたは、複数のテキストブロックを積み重ねてきたときは、必要な効果が得られないだろう...この

<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のようにそれを試してみてください

例えば

画像に水平方向の配置を与えるとともに、シャドウイング効果について

<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

：これをチェック

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