New to Telerik UI for WinUI? Download free 30-day trial

Zoom Modes

The RadMap allows the user to zoom in and zoom out the content of the map. This is done via the Zoom Bar control in the Commands Bar panel. By clicking on the button with an icon representing a magnifier, the user is provided with different options to zoom in and zoom out. The main tool is the slider which allows the user to slide between the maximum and minimum zoom level. Together with the slider there are several zoom presets, which represent different ranges from the slider.

The control provides several properties to modify its zoom functionality.

  • ZoomLevel: A property of type int that gets or sets the zoom level of the RadMap.
  • MinZoomLevel: A property of type int that gets or sets the minumum zoom level of the RadMap.
  • MaxZoomLevel: A property of type int that gets or sets the maximum zoom level of the RadMap.
  • ZoomBarVisibility: A property of type Visibility that show/hides the ZoomBar control.
  • ZoomBarPresetsVisibility:
  • MouseWheelMode: A enumeration property that set the zoom mode on mouse wheel. This enumeration expose the following values:
    • None: Disable the zoom.
    • ZoomToCenter: The control will be zoomed by its center point.
    • ZoomToPointer: The control will be zoomed using the mouse position.
  • MouseWheelSensitivity: A property of type double that gets or sets the sensitivity of mouse wheel.

In Example 1 we will modify the preset Labels.

Example 1

public MainPage() 
{ 
    InitializeComponent(); 
    this.radMap.InitializeCompleted += new EventHandler(radMap_InitializeCompleted); 
} 
private void radMap_InitializeCompleted(object sender, EventArgs e) 
{ 
    this.SetCustomZoomLevelLabel(18, "My Level"); 
} 
 
private void SetCustomZoomLevelLabel(int zoomLevel, string label) 
{ 
    CommandDescription description = this.radMap.MapZoomBar.Commands.Where(x => (int)x.CommandParameter == zoomLevel).FirstOrDefault(); 
    if (description != null) 
    { 
        RoutedUICommand command = description.Command as RoutedUICommand; 
        if (command != null) 
        { 
            command.Text = label; 
        } 
    } 
} 
Here is a snapshot of the result.

Disable Zoom

To disable the user from zooming, set the ZoomBarVisibility property of the RadMap to Collapsed. Additionally you have to disable the default zooming performed on double click or mouse wheel. To do this, set he MouseDoubleClickMode to None and the IsMouseWheelZoomEnabled to False.

Example 2

<dataVisualization:RadMap x:Name="radMap" 
                ZoomBarVisibility="Collapsed" 
                MouseWheelMode="None" 
                MouseDoubleClickMode="None"> 
</dataVisualization:RadMap> 
Note that the UI control is represented by the MapZoomBar control. You are able to use it outside the RadMap and place it somewhere around it. In this case you have to either hide the original one by using the ZoomBarVisibility property of the RadMap or the UseDefaultLayout one.

Setting the UseDefaultLayout property to False will hide all of the UI controls inside the RadMap. To learn more read here.

See Also

In this article
Not finding the help you need?