How can solve this?

How-to Discussions
1

Hi!,

I have a map (image) inside a ScrollView with AllowedScrollDirections="Both" to pan inside the image. Also I have 2 buttons for zoomIn and ZoomOut. My problem happen’s when I zoomOut because when I scroll to one side of the screen the map get’s out of the screen and I got a blank screen.

Can you tell me how can I limit the scroll when I ZoomOut the map?

To reproduce the issue you need to zoom out (with the -button) and scroll to one side.

Here’s my code and my project:

Project: https://fuseweb.azureedge.net/forum-user-uploads/2016/08/22/O63FE3Ims2Ce-legacy-files-OjDu6YDJuBeG7SA3-LR97yHSzZZGKlmuJOlRbB07C.zip

Code:

    <App>
        <ClientPanel>
            <JavaScript>
                var Observable = require('FuseJS/Observable');

                var ZoomFactor = Observable("MZ5");
                var OBMas = Observable(0.3);
                var OBMenos = Observable(1);

                function ZoomMas(){
                    ZoomFactor.value = "MZ5";
                    OBMas.value = 0.3;
                    OBMenos.value = 1;
                }

                function ZoomMenos(){
                    ZoomFactor.value = "MZ1";
                    OBMenos.value = 0.3;
                    OBMas.value = 1;
                }

                module.exports = {
                    ZoomMas: ZoomMas,
                    ZoomMenos: ZoomMenos,
                    ZoomFactor: ZoomFactor,
                    OBMas: OBMas,
                    OBMenos: OBMenos,
                };
            </JavaScript>
            <DockPanel>
                <StackPanel Margin="0,0,10,10" Alignment="BottomRight">
                    <Image Opacity="{OBMas}" File="Assets/Bmas.png" Width="50.">
                        <Clicked Handler="{ZoomMas}">
                            <GiveFocus Target="DondeEstoyMarca" Delay="0.1" />
                        </Clicked>
                    </Image>
                    <Image Opacity="{OBMenos}" File="Assets/Bmenos.png" Width="50.">
                        <Clicked Handler="{ZoomMenos}">
                            <GiveFocus Target="FocusCenter" Delay="0.1" />
                        </Clicked>
                    </Image>
                </StackPanel>

                <ScrollView Width="100%" Height="100%" AllowedScrollDirections="Both">
                    <StateGroup Transition="Parallel" Active="{ZoomFactor}">
                        <State ux:Name="MZ1">
                            <Scale Target="PanelMapa" Duration="1" Factor="0.3" Easing="ExponentialInOut" />
                        </State>
                        <State ux:Name="MZ5">
                            <Scale Target="PanelMapa" Duration="1" Factor="1" Easing="ExponentialInOut" />
                        </State>
                    </StateGroup>

                    <Panel ux:Name="PanelMapa">
                        <Rectangle Opacity="0" Focus.IsFocusable="true" ux:Name="FocusCenter" Width="10." Height="10." Background="#000" />
                        <Image Focus.IsFocusable="true" ux:Name="DondeEstoyMarca" File="Assets/marcador.png" Height="80.">
                            <Translation ux:Name="DondeEstoyMarcaT" X="20." />
                        </Image>
                        <Image Width="1742." MaxHeight="1251." File="Assets/mapaprueba.jpg" StretchMode="UniformToFill" />
                    </Panel>
                </ScrollView>
            </DockPanel>
        </ClientPanel>
    </App>