WPF:鼠标悬停在特定控件上时，增加其大小并与其他控件重叠 [英] WPF: On Mouse hover on a particular control, increase its size and overlap on the other controls

问题描述

我希望在用户悬停鼠标时增加控件的大小.
大小增加不应重新调整其他控件，而是当前控件应与相邻控件重叠，就像下面显示的谷歌搜索(图像选项卡)一样:

I wish to increase the size of a control whenever the user hovers the mouse.
The size increase should not readjust the other controls, rather the current control should overlap the neighboring controls as is the case with google search (images tab) shown below:

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

The image with red border overlaps the other images.

推荐答案

您可以在 IsMouseOver 上的 RenderTransform 中使用 ScaleTransform.如果您希望从控件中心完成缩放，您可以使用 RenderTransformOrigin="0.5,0.5".此外，您可能需要在触发器中设置 ZIndex 以确保它显示在其他控件的顶部.带有 TextBlock 的示例

You could use ScaleTransform in RenderTransform on IsMouseOver. If you want the Scaling to be done from the Center of the Control you can use RenderTransformOrigin="0.5,0.5". Also, you'll probably need to set the ZIndex in the Trigger to make sure it is displayed on top of the other Controls. Example with a 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>

这篇关于WPF:鼠标悬停在特定控件上时，增加其大小并与其他控件重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！