There are several pictures on the page, you need to move the selected picture over the other ones by a long tap or double. How can this be implemented?

example of a picture (for all the code is similar):

<Grid Width="2560" Height="1600" Margin="0,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Center"> <Canvas Width="Auto" Height="1200" x:Name="MyCanvas" Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center"> <Image x:Name="BackStageImg" Source="{Binding BackStageImg}"/> <ItemsControl ItemsSource="{Binding ImageList}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <Canvas Width="Auto" Height="Auto" Margin="0,0,0,0" x:Name="InnerCanvas" HorizontalAlignment="Left" VerticalAlignment="Center"> </Canvas> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate x:DataType="models:CollageModel"> <Image Width="525" Height="331" Margin="{x:Bind Margins}" Source="{x:Bind CollageImage}" DoubleTapped="Image_DoubleTapped" ManipulationDelta="Image_ManipulationDelta" ManipulationMode="TranslateX, TranslateY,Rotate,Scale"> <Image.RenderTransform> <CompositeTransform/> </Image.RenderTransform> </Image> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </Canvas> </Grid> 

C # UPD

  private void Image_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e) { Image tappedImage = (Image)sender; FrameworkElement container = tappedImage; while (!(container is ContentPresenter)) container = container.Parent as FrameworkElement; index++; Canvas.SetZIndex(container, index); } 

Hierarchy

  <ItemsControl ItemsSource="{Binding ImageList}"> <ItemsControl.ItemTemplate> <ItemsPanelTemplate> <Canvas> <DataTemplate x:DataType="models:CollageModel"> <Image 
  • If the picture is inside a Canvas , you can install Canvas.ZIndex . - VladD
  • @VladD I have all the pictures in one Canvas , so fit? - SmiLe
  • one
    In theory, yes. Make Canvas.SetZIndex(картинка, 0) for all pictures, and for the one that should be on top, Canvas.SetZIndex(картинка, 1) . Or if in XAML, then through some trigger. - VladD
  • @VladD And now you need to make a method that would change all ZIndex pictures, because if 2 pictures have index 1, then you can’t change the layer - SmiLe

1 answer 1

For example, if you have an event handler attached to a picture, it should go something like this:

 <Image Tapped="OnTapped" .../> 
 void OnTapped(object sender, TappedRoutedEventArgs args) { Image tappedImage = (Image)sender; Canvas parent = (Canvas)tappedImage.Parent; RaiseImage(tappedImage, parent); } void RaiseImage(Image imageToRaise, Canvas parent) { foreach (var child in Children.OfType<Image>()) { var zindex = child == imageToRaise ? 1 : 0; Canvas.SetZIndex(child, zindex); } } 

Okay, for the new code you need to change the strategy a bit.

First, you need a Canvas container inside ItemsControl :

 <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <Canvas /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> 

Then, inside the handler, you need to find not the Image itself, but its parent element.

 int currentMaxZIndex = 0; void OnTapped(object sender, TappedRoutedEventArgs args) { Image tappedImage = (Image)sender; //найдём контейнер FrameworkElement container = tappedImage; while (!(container is ContentPresenter)) container = (FrameworkElement)VisualTreeHelper.GetParent(container); // (*) currentMaxZIndex++; Canvas.SetZIndex(container, currentMaxZIndex); } 
  • Comments are not intended for extended discussion; conversation moved to chat . - PashaPash