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开发者_如何学Go as is the case with google search (images tab) shown below:

The image with red border overlaps the other images.

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>

For a shadowing effect, along with giving the image a horizontal alignment:

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

@Meleak... You would not get the required effect when you have multiple TextBlocks stacked together....

for e.g. check this :

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