WPF: On Mouse hover on a particular control, increase its size and overlap on the other controls

Question

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:

alt text

The image with red border overlaps the other images.

Fredrik Hedblad · Accepted Answer · 2010-12-30T17:47:39.533

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>

The attached image shows some extra information when the mouse hovers over the image... How can this be made possible.. ? — Sudhakar Singh, Dec 30 '10 at 18:16
@Sudhakar Singh: This is a pretty hard question to answer without knowing the specifics. You could use a UserControl/CustomControl where you only show the details on IsMouseOver. Another approach is to edit the Template for the TextBlock (or the control you use) and add the extra info there and only show it on IsMouseOver. Please post a new question with the details of your problem if this didn't help you — Fredrik Hedblad, Dec 30 '10 at 18:30
Even i was planning to have have the info present in the control template and set the visibility property to visible when mouse over. I think this will work.. — Sudhakar Singh, Dec 30 '10 at 18:35

score 3 · Answer 2 · edited Oct 06 '12 at 19:28

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>

score 2 · Answer 3 · answered Dec 30 '10 at 17:35

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

What i need is overlapping effect of the controls on other controls whenever mouse is hovered. — Sudhakar Singh, Dec 30 '10 at 17:36

WPF: On Mouse hover on a particular control, increase its size and overlap on the other controls

3 Answers3

Linked