Change z order of image controls at runtime windows phone

Question

I have several image controls placed on a canvas. I want to change the z order of a selected image control when user click on the app bar button.

In the image control class I have

    public int ImageZOrder 
    { 
        get
        {
            return _imageZOrder;            
        }
        set 
        {
            _imageZOrder = value;
            Canvas.SetZIndex(ImageControl, _imageZOrder);
        }

    }

And in the app bar

    private void appBarFront_Click(object sender, EventArgs e)
    {
        currentCharObject.ImageZOrder += 1;
    }

I was expecting to see the selected image is brought to the front of other image controls immediately. However the above code does not work. Obviously I am missing something. Do I have to redraw the image controls on the canvas with the new z order value?

Update 1

In the XAML I have the following. Each image was added as children to cvsNote

    <Grid x:Name="GridCanvas" Grid.Row="0">
        <Canvas x:Name="cvsNote" />
    </Grid>

Update 2 I just want to add that the 'image control' contains in a particular class where it is just one of the class many properties.

Answer 1

You can change the ZIndex in code.

Assuming this xaml:

<Canvas Grid.Row="1" Tap="gridTapped">
    <Image x:Name="ImgA" Source="Assets/A.png" />
    <Image x:Name="ImgB" Source="Assets/B.png" />
    <Image x:Name="ImgC" Source="Assets/C.png" />
</Canvas>

You could change which image is on top with the following:

private int TopZindex = 10;

private void gridTapped(object sender, GestureEventArgs e)
{
    var rand = new Random();
    switch (rand.Next(0, 3))
    {
        case 0:
            Canvas.SetZIndex(this.ImgA, ++TopZindex);
            break;
        case 1:
            Canvas.SetZIndex(this.ImgB, ++TopZindex);
            break;
        case 2:
            Canvas.SetZIndex(this.ImgC, ++TopZindex);
            break;
    }
}

Answer 2

You can change the order of the child images in your canvas

<Canvas>
    <Image Name="a"/> 
    <Image Name="b"/> 
    <Image Name="c"/> 
</Canvas>

change the order

<Canvas>
    <Image Name="c"/> 
    <Image Name="a"/> 
    <Image Name="b"/> 
</Canvas>

will change the z order.

If you want to get this done in code, for instance:

List<Image> AllImages= new List<Image>();
...
Canvas.Children.Remove(img1); //This will remove img1, 
Canvas.Children.Add(img1);    //This will add img1 to the tail.