Skip to content

Latest commit

 

History

History
191 lines (172 loc) · 8.88 KB

howto-customize-commands.md

File metadata and controls

191 lines (172 loc) · 8.88 KB
title page_title description slug tags published position
Implement custom commands for MapCommandBar UI
Implement custom commands for MapCommandBar UI
Check our "Implement custom commands for MapCommandBar UI" documentation article for the RadMap {{ site.framework_name }} control.
radmap-howto-customize-commands
implement,custom,commands,for,mapcommandbar,ui
true
0

Implement custom commands for MapCommandBar UI

It is now possible to customize the default set of commands in the MapCommandBar UI for every map provider.

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 MapProvider.Commands collection (if your custom command is RoutedCommand / RoutedUICommand, you can add the associated CommandBinding to the MapProvider.CommandBindingCollection).

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:

XAML

{{region radmap-howto-customize-commands_0}} <Grid.Resources> <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 </telerik:RadButton.Background> <Grid.ColumnDefinitions> </Grid.ColumnDefinitions> <Image.Source> </Image.Source> </telerik:RadButton> </Grid.Resources> <telerik:RadMap x:Name="RadMap1" ZoomLevel="15" MinZoomLevel="15" GeoBounds="42.3683598045287, -71.0789727419614, 3.9167707221002743, 2.1883037274811104"> </telerik:RadMap> {{endregion}}

C#

{{region radmap-howto-customize-commands_1}} private const string ImagePathFormat = "/Map;component/Silverlight/CustomCommands/Images/{0}.png"; private string VEKey = "set-your-BingMaps-Key-here"; private BingRestMapProvider provider; private void SetProvider() { this.provider = new BingRestMapProvider(MapMode.Aerial, true, this.VEKey);

    this.provider.Commands.Clear();
    this.AddCustomCommandAction(this.provider, "Restaurants");
    this.AddCustomCommandAction(this.provider, "Bars");
    this.AddCustomCommandAction(this.provider, "Museums");
    this.RadMap1.Provider = provider;
}
private void AddCustomCommandAction(BingRestMapProvider 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(BingRestMapProvider));
    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...
}

{{endregion}}

VB.NET

{{region radmap-howto-customize-commands_2}} Private Const ImagePathFormat As String = "/Map;component/Silverlight/CustomCommands/Images/{0}.png" Private VEKey As String = "set-your-BingMaps-Key-here" Private provider As BingRestMapProvider Private Sub SetProvider() Me.provider = New BingRestMapProvider(MapMode.Aerial, True, Me.VEKey) Me.provider.Commands.Clear() Me.AddCustomCommandAction(Me.provider, "Restaurants") Me.AddCustomCommandAction(Me.provider, "Bars") Me.AddCustomCommandAction(Me.provider, "Museums") Me.RadMap1.Provider = provider End Sub Private Sub AddCustomCommandAction(provider As BingRestMapProvider, 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 New CommandDescription() commandDescription.Command = New RoutedUICommand(commandText, commandName, GetType(BingRestMapProvider)) 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 New CommandBinding(commandDescription.Command, ExecuteCustomCommand) provider.Commands.Add(commandDescription) provider.CommandBindingCollection.Add(commandBinding) End Sub Private Sub ExecuteCustomCommand(sender As Object, e As ExecutedRoutedEventArgs) ' execute custom action here...' End Sub {{endregion}}

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

C#

{{region radmap-howto-customize-commands_3}} public MainPage() { InitializeComponent(); // Call this method if you want to create a brand-new list of custom commands for the provider. // Otherwise the custom command will be appended to the default list. this.radMap.Provider.Commands.Clear(); CommandDescription commandDescription = new CommandDescription() { Command = new DelegateCommand(this.ExecuteCommand), CommandParameter = "test", DataTemplate = this.Resources["CustomTemplate2"] as DataTemplate }; this.radMap.Provider.Commands.Add(commandDescription); } private void ExecuteCommand(object parameter) { MessageBox.Show(string.Format("My command: {0}", parameter)); } {{endregion}}

VB.NET

{{region radmap-howto-customize-commands_4}} Public Sub New() InitializeComponent() ' Call this method if you want to create a brand-new list of custom commands for the provider. ' ' Otherwise the custom command will be appended to the default list.' Me.radMap.Provider.Commands.Clear() Dim commandDescription As New CommandDescription() With { _ .Command = New DelegateCommand(Me.ExecuteCommand), _ .CommandParameter = "test", _ .DataTemplate = TryCast(Me.Resources("CustomTemplate2"), DataTemplate) _ } Me.radMap.Provider.Commands.Add(commandDescription) End Sub Private Sub ExecuteCommand(parameter As Object) MessageBox.Show(String.Format("My command: {0}", parameter)) End Sub {{endregion}}