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

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

---

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

您可以在IsMouseOver上的RenderTransform中使用ScaleTransform。如果希望从控件中心进行缩放，可以使用

renderTransferorMorigin=“0.5,0.5”

。此外，您可能需要在触发器中设置ZIndex，以确保它显示在其他控件的顶部。带有文本块的示例

更新
像这样试试

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

---

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

---

对于阴影效果，以及使图像水平对齐：

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

我需要的是鼠标悬停时控件对其他控件的重叠效果。更新了我的答案。这就是你要找的吗？当鼠标悬停在图像上时，附加的图像会显示一些额外的信息。。。如何才能做到这一点@苏达卡·辛格：如果不知道具体情况，这是一个很难回答的问题。您可以使用UserControl/CustomControl，其中只显示IsMouseOver上的详细信息。另一种方法是编辑TextBlock（或您使用的控件）的模板，并在那里添加额外的信息，并且仅在IsMouseOver上显示。如果这对您没有帮助，请发布一个新问题，并说明您的问题的详细信息。即使我计划将信息显示在控件模板中，并将“可见性”属性设置为“鼠标悬停时可见”。我想这会奏效的。@Sudhakar Singh:是的，希望如此：）祝你好运