Commands for Zooming and Panning in UWP Map (SfMaps)

The Map control contains the following commands:

  • ZoomIn Command
  • ZoomOut Command
  • Pan Command
  • ZoomReset Command
  • PanReset Command

ZoomIn Command

ZoomIn command zooms in the map.

  • xml
  • <maps:SfMap  x:Name="Map" >
                 <maps:SfMap.Layers>	
                    <maps:ShapeFileLayer  x:Name="shapeControl" Uri="CommandsDemo.ShapeFiles.wv.shp">
                    </maps:ShapeFileLayer>
                  </maps:SfMap.Layers>
            </maps:SfMap >
            
             <Button Content="ZoomIn" Name="zoomIn" Grid.Row="0" Command="{Binding ElementName=Map,Path=ZoomInCommand}" VerticalAlignment="Bottom"/>

    ZoomOut Command

    ZoomOut command zooms out the map.

  • xml
  • <maps:SfMap  x:Name="Map" >
                 <maps:SfMap.Layers>	
                    <maps:ShapeFileLayer  x:Name="shapeControl" Uri="CommandsDemo.ShapeFiles.wv.shp">
                    </maps:ShapeFileLayer>
                  </maps:SfMap.Layers>
            </maps:SfMap >
            
            <Button Content="ZoomOut" Name="zoomOut" Grid.Row="2"  Command="{Binding ElementName=Map,Path=ZoomOutCommand}"/>

    Pan Command

    Pan Command is used to navigate on the Map control. The direction of the navigation is the Command parameter for the Pan Command.

  • xml
  • <maps:SfMap  x:Name="Map" >
                 <maps:SfMap.Layers>	
                    <maps:ShapeFileLayer  x:Name="shapeControl" Uri="CommandsDemo.ShapeFiles.wv.shp">
                    </maps:ShapeFileLayer>
                  </maps:SfMap.Layers>
            </maps:SfMap >
    
            <Button Width="50" Height="20" Grid.Row="1" Grid.Column="0" Content="Left" Name="LeftPanButton" Command="{Binding ElementName=Map,Path=PanCommand}" CommandParameter="left" />
            <Button Width="50" Height="20" Grid.Row="1" Grid.Column="2" Content="Right"  Name="RightPanButton"  Command="{Binding ElementName=Map,Path=PanCommand}" CommandParameter="right"/>
            <Button Width="50" Height="20"  Grid.Row="0" Grid.Column="1" Content="Top" Name="topPan" Command="{Binding ElementName=Map,Path=PanCommand}" CommandParameter="top"/>
            <Button Width="75" Height="20" Grid.Row="2" Grid.Column="1" Content="Bottom" Name="bottomPan" Command="{Binding ElementName=Map,Path=PanCommand}" CommandParameter="bottom"/> 

    ZoomReset Command

    The ZoomReset command resets the ZoomLevel value of the Map control.

  • xml
  • <maps:SfMap  x:Name="Map" >
                 <maps:SfMap.Layers>	
                    <maps:ShapeFileLayer  x:Name="shapeControl" Uri="CommandsDemo.ShapeFiles.wv.shp">
                    </maps:ShapeFileLayer>
                  </maps:SfMap.Layers>
            </maps:SfMap >
    
           <Button Grid.Column="0" Grid.Row="0"  Content="ZoomRest" Command="{Binding ElementName=Map,Path=ZoomResetCommand}"/>

    PanReset Command

    The PanReset command resets the map at its initial position; it resets the pan values.

  • xml
  • <maps:SfMap  x:Name="Map" >
                 <maps:SfMap.Layers>	
                    <maps:ShapeFileLayer  x:Name="shapeControl" Uri="CommandsDemo.ShapeFiles.wv.shp">
                    </maps:ShapeFileLayer>
                  </maps:SfMap.Layers>
            </maps:SfMap >
    
        <Button Grid.Column="2" Grid.Row="0" Content="PanRest" Command="{Binding ElementName=Map,Path=PanResetCommand}"/>