Getting Started

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

nunopedrosilva — Sun, 05 Jul 2009 01:03:45 GMT

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

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

MawashiKid — Sat, 04 Jul 2009 23:43:03 GMT

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:

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

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?

elmore.adam — Fri, 03 Jul 2009 21:33:14 GMT

Well, if you are adding these images dynamically to the Canvas named "LayoutRoot" and all of the images have the same Canvas.ZIndex value, this behavior makes sense. Controls further down the Visual Tree will always render on top of a higher control (unless they are situated in a Canvas with differing ZIndex values). This means that you will need to either modify the Canvas.ZIndex property of the image you wish to display on top, or alternatively remove it from the canvas and reinsert it after the other child Image elements. I would go the ZIndex route, personally. Let me know if you have questions regarding this.

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

nunopedrosilva — Fri, 03 Jul 2009 21:08:13 GMT

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

How to have a scaled image always on top?

nunopedrosilva — Thu, 02 Jul 2009 10:08:28 GMT

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

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>

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