How to have a scaled image always on top?

07-02-2009 6:08 AM |

Hi all,

 Currently I'm building a website over Silverlight. In one of the pages I have a gallery of 4 collumns, and few or many rows, depending on what's going to be put there. I did an event for the mouseenter, to do a very small scale of the image, no problem on that. The thing is that when I use the mousedown event, to scale 4 times the size of the image, that scaled image will show behind of all the other images.

Here's the non scaled one:

The code for the mousedown event:

Image klick = (Image)sender;
                ScaleTransform scale = new ScaleTransform();
                scale.ScaleX = 4;
                scale.ScaleY = 4;
                klick.RenderTransform = scale;

Here's the xaml:

<UserControl x:Class="MyProject.Produtos"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

Width="Auto" Height="Auto">

<Grid>

<Border CornerRadius="5,5,5,5" Margin="0,0,0,0" >

<Image Source="images/background.jpg" Stretch="Fill" Opacity="0.2" OpacityMask="{x:Null}" Visibility="Visible" HorizontalAlignment="Stretch"/>

</Border>

<Canvas Margin="160,80" UseLayoutRounding="True" x:Name="LayoutRoot">

</Canvas>

</Grid>

</UserControl>

I don't see where I can change this to not have this effect and tried to find some property that could help me with this, but with no luck.

If someone could help here, it would be much appreciated!

Nuno

Re: How to have a scaled image always on top?

07-03-2009 5:08 PM |

Sorry for being pushing, I want to remind only that this case is still happening. I've moved on to another subject, and am leaving this a bit behind until I can get a solution, or understand why does this happen.

Thanks,,

nuno

Re: How to have a scaled image always on top?

07-04-2009 7:43 PM |

Hi nuno,

Yes Adam is right.

The Canvas.ZIndex parameter
gets or sets a value that represents the z-order (or layering order...) 
rendering behavior of objects in a Canvas.

Therefore the object with the highest Canvas.ZIndex parameter value
should always be displayed on top of the others.

So let's say you have:

<Canvas>
<Image x:Name="Top" Grid.Column="0" Source="Top.png"/>
<Image x:Name="Bottom" Grid.Column="0" Source="Bottom.png"/>
</Canvas>

In this case, you haven't specified any Canvas.ZIndex,
and by default your "Bottom" image would appear on top of your "Top"
image in your Canvas.

Now, if you add the following Canvas.ZIndex paramaters to the same images

<Canvas>
<Image x:Name="Top" Canvas.ZIndex="1001" Grid.Column="0" Source="Top.png"/>
<Image x:Name="Bottom" Canvas.ZIndex="0" Grid.Column="0" Source="Bottom.png"/>
</Canvas>

The opposite will happen and your "Top" image should now always be displayed on top
of your "Bottom" image.

In C#, I could have set both images Canvas.ZIndex parameter property with the following code:

Top.SetValue(Canvas.ZIndexProperty,1001);
Bottom.SetValue(Canvas.ZIndexProperty,0);

Hope this helps you.

D.C.

Re: How to have a scaled image always on top?

07-04-2009 9:03 PM |

Thank you for your answers. They were very helpful.

 However, while progressing with the work, I've changed my implementation over this images. I'm now using a listbox with two columns. 1 for image, 1 for description. This listbox has a stack panel, to do this job.

 I fully understood this scenario you presented, but now I don't see Zindex as being a good solution, because it is doing that good job, only in the row it is supposed. When the image zooms in, it will occupy the other rows space, and in there they will have the effect as I posted in the images sent initially.

 Think best solution now is to go through Adam's second solution, and do something like a Pop up. I will open the image in a greater scale over the other images, and then go from there. Seems easy to do that!

 Thanks. Will close now, and re-open if I need anything else.

Best regards,

Nuno