WPF:每当鼠标悬停时，该控件在其他控件上的重叠效果 [英] WPF:Overlapping effect of the control on other controls whenever mouse is hovered

问题描述

我希望将鼠标悬停在其他控件上具有重叠效果.

从我的代码中可以看到，当控件的鼠标悬停事件被触发时，大小会增加，但始终显示在其他控件的后面.我如何使其重叠在其他控件之上，并且当鼠标离开时它会恢复为原始大小.

实际上，我希望实现的功能类似于Google图片搜索.鼠标悬停时可以弹出图像.

有谁知道如何做到这一点?谢谢.

Hi,

I wish to have overlapping effect of the control on other controls whenever mouse is hovered.

From my code here, when the control mouse over event is triggered, the size will be increase but it always show at the back of other controls. How can I make it overlaps on top of others controls and when mouse leave it return to original size.

Actually, what I wish to achieve is something similar to google image search. which able to popup the image when mouse is hovered.

anyone know how to make this happens? thanks.

<Grid Background="Transparent">
        <Grid Grid.Row="0" Grid.Column="1">
            <ItemsControl>
                <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="2.0" ScaleY="2.0"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                    <Style x:Key="ScaleStyle2" TargetType="Button">
                        <Setter Property="Height" Value="Auto"/>
                        <Setter Property="Width" Value="Auto"/>
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Grid.ZIndex" Value="1"/>
                                <Setter Property="RenderTransform">
                                    <Setter.Value>
                                        <ScaleTransform ScaleX="2.5" ScaleY="2.5"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </ItemsControl.Resources>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid Grid.Row="0">
                        <TextBlock Style="{StaticResource ScaleStyle}"  Width="100" RenderTransformOrigin="0.5,0.5" Text="TextBlock3" Background="Green" Foreground="White"/>
                    </Grid>
                    <Grid Grid.Row="0" Grid.Column="1">
                        <Button  Style="{StaticResource ScaleStyle2}"  Name="c" Height="50" Width="100" HorizontalAlignment="Stretch" VerticalAlignment="Center" >c Button
                        </Button>
                    </Grid>
                    <Grid Grid.Row="1" Grid.Column="0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="24*" />
                            <RowDefinition Height="76*" />
                        </Grid.RowDefinitions>
                        <Button Style="{StaticResource ScaleStyle2}"  Name="a" Height="50" Width="100" HorizontalAlignment="Stretch" VerticalAlignment="Center" >b Button</Button>
                    </Grid>
                    <Grid Grid.Row="1" Grid.Column="1">
                        <TextBlock Style="{StaticResource ScaleStyle}" Width="100" RenderTransformOrigin="0.5,0.5" Text="TextBlock3" Background="Green" Foreground="White"/>
                    </Grid>

                </Grid>
            </ItemsControl>
        </Grid>
    </Grid>

推荐答案

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

Update
Try it like this

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