CODEWITHSUNDEEP
c#wpf
Revan
Revan

Reputation: 1144

Move image over another image in WPF

I want to move image over the other image in WPF.

But when I move the image1 , It is displaying below the image2 instead of above the image2.

Mainwindow.xaml

  <Image x:Name="imgPattern1" HorizontalAlignment="Left" Height="170" Margin="523,10,0,0" VerticalAlignment="Top" Width="248"
            PreviewMouseDown="imgPattern_PreviewMouseDown"
            PreviewMouseUp="imgPattern_PreviewMouseUp"
            PreviewMouseMove="imgPattern_PreviewMouseMove"
               >
            <Image.Style>
                <Style TargetType="Image">
                    <Style.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Opacity" Value="0.5" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Image.Style>
        </Image>

<Image x:Name="imgPattern2" HorizontalAlignment="Left" Height="170" Margin="523,10,0,0" VerticalAlignment="Top" Width="248"/>

enter image description here

I want to move pattern1 to move over pattern2

Thanks in advance

Upvotes: 1

Views: 2477

Answers (2)

Clemens
Clemens

Reputation: 128098

Without explicitly specifying a ZIndex, the order in which child elements are drawn is determined by the order in which they are added to their common container. The first element is drawn first, the last one last.

So Instead of setting a ZIndex you might just change the order of the Image controls:

<Image x:Name="imgPattern2" ... />
<Image x:Name="imgPattern1" ... />

Now imgPattern1 is drawn above imgPattern2.

Upvotes: 0

Blablablaster
Blablablaster

Reputation: 3348

Use attached property called Canvas.ZIndex. Make sure that your second image has bigger value than the first one. Or simply exchange the images in your xaml layout so your second image becomes the first one.

  <Image x:Name="imgPattern1" HorizontalAlignment="Left" Height="170" Margin="523,10,0,0" VerticalAlignment="Top" Width="248"
            PreviewMouseDown="imgPattern_PreviewMouseDown"
            PreviewMouseUp="imgPattern_PreviewMouseUp"
            PreviewMouseMove="imgPattern_PreviewMouseMove"
               >
            <Image.Style>
                <Style TargetType="Image">
                    <Style.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Opacity" Value="0.5" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Image.Style>
        </Image>

<Image x:Name="imgPattern2" HorizontalAlignment="Left" Height="170" Margin="523,10,0,0" VerticalAlignment="Top" Width="248" Canvas.ZIndex=2/>

Upvotes: 2

Related Questions