Implement custom commands for MapCommandBar UI

The MapCommandBar element that by default displays the predefined view modes for every map provider, can be customized with additional commands.

Customization of the commands in the MapCommandBar

Every custom command should be described by a CommandDescription instance that you need to add to the respective Commands collection of the used map provider (if your custom command is RoutedCommand / RoutedUICommand, you can add the associated CommandBinding to the CommandBindingCollection collection).

The CommandDescription class exposes the following properties:

Command—Gets or sets the command that will be executed in response to UI action.
CommandParameter—Gets or sets the command parameter associated with the respective command.
DataTemplate—Gets or sets the data template that will be used to represent the command in CommandBar UI.
ImageUri—Gets or sets the uniform resource identifier (URI) of the image that is used in the map source button data template.
IsAllowed—Gets or sets a value indicating whether this command is allowed.
IsSelected—Gets or sets a value indicating whether this command is selected initially.

Here is a sample code snippet that demonstrates custom RoutedUICommand usage:

<Grid x:Name="LayoutRoot"> 
    <Grid.Resources> 
        <DataTemplate x:Key="CustomCommandDataTemplate"> 
            <telerik:RadButton Command="{Binding Path=Command}" 
                                CommandParameter="{Binding CommandParameter}" 
                                HorizontalContentAlignment="Stretch" 
                                Height="26" 
                                Margin="0,3" 
                                CornerRadius="3" 
                                Opacity="0.8" 
                                BorderBrush="#FF848484"> 
                <telerik:RadButton.Background> 
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> 
                        <GradientStop Color="White"/> 
                        <GradientStop Color="#FFD4D4D4" Offset="1"/> 
                        <GradientStop Color="Gainsboro" Offset="0.5"/> 
                        <GradientStop Color="#FFADADAD" Offset="0.51"/> 
                    </LinearGradientBrush> 
                </telerik:RadButton.Background> 
                <Grid HorizontalAlignment="Stretch"> 
                    <Grid.ColumnDefinitions> 
                        <ColumnDefinition /> 
                        <ColumnDefinition Width="32" /> 
                    </Grid.ColumnDefinitions> 
                    <TextBlock Text="{Binding Path=Command.Text}" 
              TextAlignment="Center"  
              HorizontalAlignment="Stretch"  
              Padding="7,0" 
              FontSize="11"  
              FontWeight="Bold" /> 
                    <Image Grid.Column="1" Width="16" Height="16" HorizontalAlignment="Center" VerticalAlignment="Center"> 
                        <Image.Source> 
                            <BitmapImage UriSource="{Binding ImageUri}" /> 
                        </Image.Source> 
                    </Image> 
                </Grid> 
            </telerik:RadButton> 
        </DataTemplate> 
    </Grid.Resources> 
    <telerik:RadMap x:Name="radMap"  
                    ZoomLevel="15" 
                    MinZoomLevel="15" 
                    GeoBounds="42.3683598045287, -71.0789727419614, 3.9167707221002743, 2.1883037274811104"> 
    </telerik:RadMap> 
</Grid>

public partial class MainWindow : Window 
{ 
    private const string ImagePathFormat = "/Map;component/Silverlight/CustomCommands/Images/{0}.png"; 
    private string APIKey = "set-your-OSM-API-key-here"; 
    private OpenStreetMapProvider provider; 
 
    public MainWindow() 
    { 
        InitializeComponent(); 
 
        this.SetProvider(); 
    } 
 
    private void SetProvider() 
    { 
        this.provider = new OpenStreetMapProvider(this.APIKey) { StandardModeUserAgent = "My User Agent Text" }; 
 
        this.provider.Commands.Clear(); 
        this.AddCustomCommandAction(this.provider, "Restaurants"); 
        this.AddCustomCommandAction(this.provider, "Bars"); 
        this.AddCustomCommandAction(this.provider, "Museums"); 
        this.radMap.Provider = provider; 
    } 
 
    private void AddCustomCommandAction(OpenStreetMapProvider provider, string poi) 
    { 
        string commandText = string.Format("Find {0}", poi); 
        string commandName = string.Format("Find{0}Command", poi); 
        CommandDescription commandDescription = new CommandDescription(); 
        commandDescription.Command = new RoutedUICommand(commandText, commandName, typeof(OpenStreetMapProvider)); 
        commandDescription.CommandParameter = poi; 
        commandDescription.DataTemplate = this.LayoutRoot.Resources["CustomCommandDataTemplate"] as DataTemplate; 
        string imagePath = string.Format(ImagePathFormat, poi); 
        commandDescription.ImageUri = new Uri(imagePath, UriKind.RelativeOrAbsolute); 
        CommandBinding commandBinding = new CommandBinding(commandDescription.Command, ExecuteCustomCommand); 
        provider.Commands.Add(commandDescription); 
        provider.CommandBindingCollection.Add(commandBinding); 
    } 
 
    private void ExecuteCustomCommand(object sender, ExecutedRoutedEventArgs e) 
    { 
        // execute custom action here... 
    } 
}

Public Partial Class MainWindow 
    Inherits Window 
 
    Private Const ImagePathFormat As String = "/Map;component/Silverlight/CustomCommands/Images/{0}.png" 
    Private APIKey As String = "set-your-OSM-API-key-here" 
    Private provider As OpenStreetMapProvider 
 
    Public Sub New() 
        InitializeComponent() 
        Me.SetProvider() 
    End Sub 
 
    Private Sub SetProvider() 
        Me.provider = New OpenStreetMapProvider(Me.APIKey) With { 
            .StandardModeUserAgent = "My User Agent Text" 
        } 
        Me.provider.Commands.Clear() 
        Me.AddCustomCommandAction(Me.provider, "Restaurants") 
        Me.AddCustomCommandAction(Me.provider, "Bars") 
        Me.AddCustomCommandAction(Me.provider, "Museums") 
        Me.radMap.Provider = provider 
    End Sub 
 
    Private Sub AddCustomCommandAction(ByVal provider As OpenStreetMapProvider, ByVal poi As String) 
        Dim commandText As String = String.Format("Find {0}", poi) 
        Dim commandName As String = String.Format("Find{0}Command", poi) 
        Dim commandDescription As CommandDescription = New CommandDescription() 
        commandDescription.Command = New RoutedUICommand(commandText, commandName, GetType(OpenStreetMapProvider)) 
        commandDescription.CommandParameter = poi 
        commandDescription.DataTemplate = TryCast(Me.LayoutRoot.Resources("CustomCommandDataTemplate"), DataTemplate) 
        Dim imagePath As String = String.Format(ImagePathFormat, poi) 
        commandDescription.ImageUri = New Uri(imagePath, UriKind.RelativeOrAbsolute) 
        Dim commandBinding As CommandBinding = New CommandBinding(commandDescription.Command, AddressOf ExecuteCustomCommand) 
        provider.Commands.Add(commandDescription) 
        provider.CommandBindingCollection.Add(commandBinding) 
    End Sub 
 
    Private Sub ExecuteCustomCommand(ByVal sender As Object, ByVal e As ExecutedRoutedEventArgs) 
    End Sub 
End Class

Here is a sample code snippet that demonstrates custom DelegateCommand usage:

<Grid x:Name="LayoutRoot"> 
    <Grid.Resources> 
        <DataTemplate x:Key="MyDataTemplate"> 
            <telerik:RadButton Command="{Binding Command}" 
                               Content="{Binding CommandParameter}" 
                               CommandParameter="{Binding CommandParameter}" 
                               HorizontalContentAlignment="Stretch" 
                               Height="26" 
                               Margin="0,3" 
                               CornerRadius="3" 
                               Opacity="0.8" 
                               BorderBrush="#FF848484"> 
                <telerik:RadButton.Background> 
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> 
                        <GradientStop Color="White"/> 
                        <GradientStop Color="#FFD4D4D4" Offset="1"/> 
                        <GradientStop Color="Gainsboro" Offset="0.5"/> 
                        <GradientStop Color="#FFADADAD" Offset="0.51"/> 
                    </LinearGradientBrush> 
                </telerik:RadButton.Background> 
            </telerik:RadButton> 
        </DataTemplate> 
    </Grid.Resources> 
    <telerik:RadMap x:Name="radMap"  
                    Margin="10" 
                    ZoomLevel="15" 
                    MinZoomLevel="15" 
                    GeoBounds="42.3683598045287, -71.0789727419614, 3.9167707221002743, 2.1883037274811104"> 
    </telerik:RadMap> 
</Grid>

public partial class MainWindow : Window 
{ 
    private const string ImagePathFormat = "/Map;component/Silverlight/CustomCommands/Images/{0}.png"; 
    private string APIKey = "set-your-OSM-API-key-here"; 
    private OpenStreetMapProvider provider; 
 
    public MainWindow() 
    { 
        StyleManager.ApplicationTheme = new Windows11Theme(); 
 
        InitializeComponent(); 
 
        this.SetProvider(); 
    } 
 
    private void SetProvider() 
    { 
        this.provider = new OpenStreetMapProvider(this.APIKey) { StandardModeUserAgent = "My User Agent Text" }; 
        this.radMap.Provider = this.provider; 
 
        this.radMap.Provider.Commands.Clear(); 
        CommandDescription commandDescription = new CommandDescription() 
        { 
            Command = new DelegateCommand(this.ExecuteCommand), 
            CommandParameter = "test", 
            DataTemplate = this.LayoutRoot.Resources["MyDataTemplate"] as DataTemplate 
        }; 
 
        this.radMap.Provider.Commands.Add(commandDescription); 
    } 
 
    private void ExecuteCommand(object parameter) 
    { 
        MessageBox.Show(string.Format("My command: {0}", parameter)); 
    } 
}

Public Partial Class MainWindow 
    Inherits Window 
 
    Private Const ImagePathFormat As String = "/Map;component/Silverlight/CustomCommands/Images/{0}.png" 
    Private APIKey As String = "set-your-OSM-API-key-here" 
    Private provider As OpenStreetMapProvider 
 
    Public Sub New() 
        StyleManager.ApplicationTheme = New Windows11Theme() 
        InitializeComponent() 
        Me.SetProvider() 
    End Sub 
 
    Private Sub SetProvider() 
        Me.provider = New OpenStreetMapProvider(Me.APIKey) With { 
            .StandardModeUserAgent = "My User Agent Text" 
        } 
        Me.radMap.Provider = Me.provider 
        Me.radMap.Provider.Commands.Clear() 
        Dim commandDescription As CommandDescription = New CommandDescription() With { 
            .Command = New DelegateCommand(AddressOf Me.ExecuteCommand), 
            .CommandParameter = "test", 
            .DataTemplate = TryCast(Me.LayoutRoot.Resources("MyDataTemplate"), DataTemplate) 
        } 
        Me.radMap.Provider.Commands.Add(commandDescription) 
    End Sub 
 
    Private Sub ExecuteCommand(ByVal parameter As Object) 
        MessageBox.Show(String.Format("My command: {0}", parameter)) 
    End Sub 
End Class

Implement custom commands for MapCommandBar UI

Customization of the commands in the MapCommandBar

Getting Started

Support Resources

Community