scrollviewer zoom only one element

Question

I have to zoom an image in uwp application, which works fine, but the design requires to have another image (that works as a button) in front of it and I dont want that element to be zoomed as well. It has to be only the image inside the canvas tag, this is how I have it now.

<ScrollViewer MinZoomFactor="1"
              ZoomMode="Enabled"
              VerticalScrollBarVisibility="Auto"
              HorizontalScrollBarVisibility="Auto">

    <RelativePanel HorizontalAlignment = "Stretch" >
        <Canvas x:Name="canvas">
            <Image Source = "{Binding Test,UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" />
        </Canvas >
        <Button RelativePanel.AlignTopWithPanel="True"
                Height="55"
                Command="{Binding Path=CollapseSplitView}"
                CommandParameter="{Binding ElementName=SplitV}">
            <Button.Background>
                <ImageBrush ImageSource = "/Assets/btlist.png" ></ ImageBrush >
            </Button.Background >
        </Button >
        <Image RelativePanel.AlignBottomWithPanel="True"
               RelativePanel.AlignRightWithPanel="True"
               Source="/Assets/escala-x.png"
               Width="130"
               Height="70"
               Margin="0,0,20,0"
               ScrollViewer.IsZoomChainingEnabled="False"
               ScrollViewer.IsZoomInertiaEnabled="False">
        </Image>
    </RelativePanel>
</ScrollViewer>

thats the xaml I have and which makes the zoom work for all elements inside of it. I tried to set scrollViewer.zoomMode=disabled for the elements that are not in the canvas but without luck. Any ideas? Thanks!

Answer 1

I finally fixed it by adding a scrollViewer inside the RelativePanel and then wrap the contents I wanted to zoom inside a StackPanel and then a Grid to be able to have multiple elements inside. Thanks all