C＃通用应用程序：拖动时的图像前景

Question

I have this puzzle game where I can movie pieces on the playfield.

I recently added a touchscreen way to do that, it works, but there is an issue. When I move an image from one place to another, the dragged image is in the background, the other images are in the foreground, I would like to have it the other way, see Screenshot. 1

My delta function is this:

   public void Touch_Delta(object sender, Windows.UI.Xaml.Input.ManipulationDeltaRoutedEventArgs e)
    {
        Image img_touched = (Image)sender;


        TranslateTransform _Transform = (img_touched.RenderTransform = (img_touched.RenderTransform as TranslateTransform) ?? new TranslateTransform()) as TranslateTransform;
        _Transform.X += e.Delta.Translation.X;
        _Transform.Y += e.Delta.Translation.Y;

        if(_Transform.X > 90.0)
        {
            img_touched.RenderTransform = null;
            Move_Right(this, null);
        }
        else if(_Transform.X < -90)
        {
            img_touched.RenderTransform = null;
            Move_Left(this, null);
        }
        else if (_Transform.Y > 90.0)
        {
            img_touched.RenderTransform = null;
            Move_Down(this, null);
        }
        else if (_Transform.Y < -90.0)
        {
            img_touched.RenderTransform = null;
            Move_Up(this, null);
        }

        Rotate_Touch += e.Delta.Rotation;
        if(Rotate_Touch > 55.0)
        {
            Rotate_Right(this, null);
            Rotate_Touch = 0;
        }
        else if(Rotate_Touch < -55.0)
        {
            Rotate_Left(this, null);
            Rotate_Touch = 0;
        }

    }

The corresponding XAML is this:

<UserControl
    x:Class="PictureSplitter.Views.PictureView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="768"
    d:DesignWidth="1024">

    <Grid Height="1000" Width="600" Background="Black">
    <GridView ItemsSource="{Binding Splitter.PuzzlePositions}" Background="Black">
        <GridView.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="#FF888E91" BorderThickness="2" Background="Black">
                    <Grid Name="picGrid" Background="Black" >
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"></RowDefinition>
                            <RowDefinition Height="Auto"></RowDefinition>
                            <RowDefinition Height="Auto"></RowDefinition>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"></ColumnDefinition>
                            <ColumnDefinition Width="Auto"></ColumnDefinition>
                            <ColumnDefinition Width="Auto"></ColumnDefinition>
                        </Grid.ColumnDefinitions>

                            <Image Source="{Binding Piece.ImageSource}" Tapped="Image_Tapped" ManipulationMode="All" CanDrag="False" Loaded="Load_Events" />
                    </Grid>
                </Border>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>
    </Grid>
</UserControl>

I know there is a zindex in the Windows.Canvas thing, but I haven't found something similar here. Is there a way to do this?

Answer 1

Well normally if there is no z-index the elements will follow the z order they were written/generated - I guess if you try to move the 3rd element onto the 2nd one it'd be on top of it :)

Now without using canvas I don't think you can do this, because even the new Transform3D stuff respects the original Z order, so if you'd move one item "above" the others (translate-z: +1) it would still be drawn behind the next ones.

With all this: use a canvas - It's better for a game anyway ;)