Переместить UI объект на передний план UWP

360

09 декабря 2016, 08:50

На странице есть несколько картинок, нужно по долгому тапу или двойному переместить выбранную картинку поверх других. Как-то это можно реализовать?

пример картинки(для всех код похож):

    <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);
    }

Иерархия

    <ItemsControl ItemsSource="{Binding ImageList}">
            <ItemsControl.ItemTemplate>
                <ItemsPanelTemplate>
                <Canvas>
                    <DataTemplate x:DataType="models:CollageModel">
                        <Image

Answer 1

Например, если у вас к картинке привязан обработчик события, должно подойти как-то так:

<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);
    }
}

Окей, для нового кода нужно немного поменять стратегию.

Во-первых, нужно, чтобы внутри ItemsControl контейнером был Canvas:

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

Затем, внутри обработчика нужно найти не сам Image, а его родительский элемент.

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);
}