WPF：将鼠标悬停在特定控件上时，增加其大小并与其他控件重叠

Question

我希望每当用户将鼠标悬停时增加控件的大小。
大小增加不应重新调整其他控件，而当前控件应与相邻控件重叠，如下所示的 google 搜索（图像选项卡）的情况：

带有红色边框的图像与其他图像重叠。

Answer 1

您可以在 IsMouseOver 的 RenderTransform 中使用 ScaleTransform。如果您希望从控件中心完成缩放，可以使用 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

为了获得阴影效果，同时为图像提供水平对齐：

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

Answer 3

@Meleak...当您将多个 TextBlock 堆叠在一起时，您将无法获得所需的效果...

例如检查此：

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