Click here to Skip to main content
15,867,834 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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.



XML
<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>
Posted
Updated 17-Oct-12 22:17pm
v2

1 solution

XML
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>
 
Share this answer
 
Comments

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900