How to: Customize Navigation Elements - Devexpress

Jun 19, 2025

The following example demonstrates how to customize the appearance, position and visibility of map navigation elements: Zoom Trackbar, Scroll Buttons, Scale Panel and Coordinates Panel.

View Example

MainWindow.xaml

xaml

<dxm:MapControl.ZoomTrackbarOptions>
    <dxm:ZoomTrackbarOptions Margin="16" Orientation="Horizontal" VerticalAlignment="Bottom" />
</dxm:MapControl.ZoomTrackbarOptions>
<dxm:MapControl.ScrollButtonsOptions>
    <dxm:ScrollButtonsOptions VerticalAlignment="Bottom" HorizontalAlignment="Right" />
</dxm:MapControl.ScrollButtonsOptions>
<dxm:MapControl.ScalePanelOptions>
    <dxm:ScalePanelOptions HorizontalAlignment="Right" VerticalAlignment="Bottom" Visible="False" />
</dxm:MapControl.ScalePanelOptions>
<dxm:MapControl.CoordinatesPanelOptions>
    <dxm:CoordinatesPanelOptions VerticalAlignment="Top" HorizontalAlignment="Right" />
</dxm:MapControl.CoordinatesPanelOptions>