RadMap Styling Issues

[Ruhban]

Hello,

I am trying to style the RadMap, and within that, I am trying to style the PART_MapCommandBar and PART_MapZoomBar which are the button which contains the options to change the type of view (RoadView, AerialView, BirdsEyeView), and whether the labels should be shown or not, and the button which contains the options to change the zoom level (World, Country, Region, Neighborhood). I obtained the styles of these components using Object -> Edit Style options, but after the styling, the commands of the buttons no longer work. Could you help me out as to what could be the issue and how to solve it?

The styles generated are as follows: 

For the Map Zoom Bar:

  <Style x:Key="MapZoomBarStyle1" TargetType="{x:Type telerik:MapZoomBar}">
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="{x:Type telerik:MapZoomBar}">
    <Grid x:Name="mapNavigation" Background="Transparent">
     <telerik:RadDropDownButton x:Name="PART_MapNavigationDropDown" ClickMode="Hover" Grid.Column="1" CloseOnEscape="True" DropDownIndicatorVisibility="Collapsed" DropDownPlacement="Top" DropDownHeight="200">
      <telerik:RadDropDownButton.DropDownContent>
       <Grid x:Name="PART_DropDownPopupWrapper" Background="#01FFFFFF" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Border BorderBrush="Transparent" BorderThickness="1,1,1,0" Background="Transparent" CornerRadius="3" HorizontalAlignment="Left" Width="42">
         <Border BorderBrush="#FFADADAC" BorderThickness="1" CornerRadius="2" Margin="1,0">
          <Border.Background>
           <LinearGradientBrush EndPoint="1.489,0.798" StartPoint="-0.68,0.083">
            <GradientStop Color="#B2000000" Offset="0.146"/>
            <GradientStop Color="#DA353535" Offset="1"/>
            <GradientStop Color="#CCBBB6B6" Offset="0.28"/>
            <GradientStop Color="#CBD8D8D8" Offset="0.74"/>
           </LinearGradientBrush>
          </Border.Background>
         </Border>
        </Border>
        <telerik:RadSlider x:Name="PART_ZoomSlider" Grid.ColumnSpan="2" HorizontalAlignment="Left" Maximum="20" Margin="8,0,0,0" Minimum="1" VerticalAlignment="Stretch">
         <telerik:RadSlider.Style>
          <Style TargetType="{x:Type telerik:RadSlider}">
           <Setter Property="Orientation" Value="Vertical"/>
           <Setter Property="IsEnabled" Value="True"/>
           <Setter Property="HandlesVisibility" Value="Visible"/>
           <Setter Property="IsMouseWheelEnabled" Value="True"/>
           <Setter Property="Background">
            <Setter.Value>
             <LinearGradientBrush EndPoint="1.027,0.951" StartPoint="0.084,0.951">
              <GradientStop Color="#FF141414"/>
              <GradientStop Color="#FF969696" Offset="1"/>
              <GradientStop Color="#FF343434" Offset="0.5"/>
             </LinearGradientBrush>
            </Setter.Value>
           </Setter>
           <Setter Property="BorderBrush" Value="Transparent"/>
           <Setter Property="Delay" Value="250"/>
           <Setter Property="RepeatInterval" Value="250"/>
           <Setter Property="StepAction" Value="ChangeRange"/>
           <Setter Property="ThumbVisibility" Value="Visible"/>
           <Setter Property="SelectionStart" Value="0.4"/>
           <Setter Property="SelectionEnd" Value="0.6"/>
           <Setter Property="MinimumRangeSpan" Value="0"/>
           <Setter Property="IsSnapToTickEnabled" Value="True"/>
           <Setter Property="TickPlacement" Value="None"/>
           <Setter Property="TickFrequency" Value="1"/>
           <Setter Property="Template">
            <Setter.Value>
             <ControlTemplate TargetType="{x:Type telerik:RadSlider}">
              <Grid x:Name="LayoutRoot">
               <Grid.Resources>
                <DataTemplate x:Key="VerticalTickTemplate">
                 <Grid x:Name="RootElement" ToolTip="{Binding}">
                  <Rectangle Fill="Black" Height="1" Width="6"/>
                  <Rectangle Fill="#99FFFFFF" Height="1" Margin="0,1,0,0" Width="6"/>
                 </Grid>
                </DataTemplate>
               </Grid.Resources>
               <Grid>
                <Grid x:Name="VerticalTemplate">
                 <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="Auto"/>
                 </Grid.ColumnDefinitions>
                 <Grid.RowDefinitions>
                  <RowDefinition Height="Auto"/>
                  <RowDefinition Height="*"/>
                  <RowDefinition Height="Auto"/>
                 </Grid.RowDefinitions>
                 <telerik:RadTickBar x:Name="LeftTickBar" Grid.Column="0" EnableSideTicks="{TemplateBinding EnableSideTicks}" IsTabStop="False" IsDirectionReversed="{TemplateBinding IsDirectionReversed}" Maximum="{TemplateBinding Maximum}" MinWidth="6" Minimum="{TemplateBinding Minimum}" Orientation="{TemplateBinding Orientation}" Placement="Left" Grid.Row="1" Ticks="{TemplateBinding Ticks}" TickTemplateSelector="{TemplateBinding TickTemplateSelector}" TickTemplate="{TemplateBinding TickTemplate}" TickFrequency="{TemplateBinding TickFrequency}">
                  <telerik:RadTickBar.Template>
                   <ControlTemplate TargetType="{x:Type telerik:RadTickBar}">
                    <Canvas x:Name="LayoutRoot" Background="Transparent"/>
                   </ControlTemplate>
                  </telerik:RadTickBar.Template>
                 </telerik:RadTickBar>
                 <telerik:RadTickBar x:Name="RightTickBar" Grid.Column="2" EnableSideTicks="{TemplateBinding EnableSideTicks}" IsTabStop="False" IsDirectionReversed="{TemplateBinding IsDirectionReversed}" Maximum="{TemplateBinding Maximum}" MinWidth="6" Minimum="{TemplateBinding Minimum}" Orientation="{TemplateBinding Orientation}" Placement="Right" Grid.Row="1" Ticks="{TemplateBinding Ticks}" TickTemplateSelector="{TemplateBinding TickTemplateSelector}" TickTemplate="{TemplateBinding TickTemplate}" TickFrequency="{TemplateBinding TickFrequency}">
                  <telerik:RadTickBar.Template>
                   <ControlTemplate TargetType="{x:Type telerik:RadTickBar}">
                    <Canvas x:Name="LayoutRoot" Background="Transparent"/>
                   </ControlTemplate>
                  </telerik:RadTickBar.Template>
                 </telerik:RadTickBar>
                 <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" Grid.Column="1" CornerRadius="0" HorizontalAlignment="Center" Grid.Row="1" Width="6">
                  <Border BorderBrush="#FFADADAC" BorderThickness="1,1,0,1" Background="{TemplateBinding Background}" CornerRadius="0"/>
                 </Border>
                 <Grid x:Name="VerticalSingleThumbTemplate" Grid.Column="1" Grid.Row="1">
                  <Grid.RowDefinitions>
                   <RowDefinition Height="*"/>
                   <RowDefinition Height="Auto"/>
                   <RowDefinition Height="Auto"/>
                  </Grid.RowDefinitions>
                  <Rectangle x:Name="VerticalSingleLargeDecrease" Cursor="Hand" Fill="Transparent" HorizontalAlignment="Stretch" Opacity="0" Grid.Row="2"/>
                  <Thumb x:Name="VerticalSingleThumb" HorizontalAlignment="Center" Height="10" IsEnabled="{TemplateBinding IsEnabled}" Grid.Row="1" Visibility="{TemplateBinding ThumbVisibility}" Width="20">
                   <Thumb.Template>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                     <Grid>
                      <Border x:Name="Border" BorderThickness="1" Background="#FF575859" CornerRadius="3">
                       <Border.BorderBrush>
                        <LinearGradientBrush EndPoint="0.971000015735626,0.5" StartPoint="0.0399999991059303,0.5">
                         <GradientStop Color="#FF707070" Offset="0"/>
                         <GradientStop Color="#FF707070" Offset="1"/>
                         <GradientStop Color="#FFA3A3A3" Offset="0.5"/>
                         <GradientStop Color="#FF707070" Offset="1"/>
                        </LinearGradientBrush>
                       </Border.BorderBrush>
                       <Border x:Name="InnerBorder" BorderBrush="Transparent" BorderThickness="1" CornerRadius="0"/>
                      </Border>
                     </Grid>
                     <ControlTemplate.Triggers>
                      <Trigger Property="IsMouseOver" Value="True">
                       <Setter Property="BorderBrush" TargetName="Border">
                        <Setter.Value>
                         <LinearGradientBrush EndPoint="0.971000015735626,0.5" StartPoint="0.0399999991059303,0.5">
                          <GradientStop Color="#FFB0B0B0" Offset="0"/>
                          <GradientStop Color="#FFB0B0B0" Offset="1"/>
                          <GradientStop Color="#FFE0E1E2" Offset="0.5"/>
                         </LinearGradientBrush>
                        </Setter.Value>
                       </Setter>
                       <Setter Property="BorderBrush" TargetName="InnerBorder" Value="Transparent"/>
                       <Setter Property="Background" TargetName="Border" Value="#FF878787"/>
                      </Trigger>
                      <Trigger Property="IsEnabled" Value="False">
                       <Setter Property="BorderBrush" TargetName="Border" Value="#FF5D5C5C"/>
                       <Setter Property="BorderBrush" TargetName="InnerBorder" Value="Transparent"/>
                       <Setter Property="Background" TargetName="Border" Value="#FF666666"/>
                      </Trigger>
                      <Trigger Property="IsDragging" Value="True">
                       <Setter Property="BorderBrush" TargetName="Border" Value="#FF1A1A1A"/>
                       <Setter Property="BorderBrush" TargetName="InnerBorder" Value="Transparent"/>
                       <Setter Property="Background" TargetName="Border">
                        <Setter.Value>
                         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                          <GradientStop Color="#FF2E2D2D" Offset="0"/>
                          <GradientStop Color="#FF424242" Offset="1"/>
                          <GradientStop Color="#FF424242" Offset="0.14"/>
                         </LinearGradientBrush>
                        </Setter.Value>
                       </Setter>
                      </Trigger>
                     </ControlTemplate.Triggers>
                    </ControlTemplate>
                   </Thumb.Template>
                  </Thumb>
                  <Rectangle x:Name="VerticalSingleLargeIncrease" Cursor="Hand" Fill="Transparent" HorizontalAlignment="Stretch" Opacity="0" Grid.Row="0"/>
                 </Grid>
                 <RepeatButton x:Name="VerticalDecreaseHandle" Grid.Column="1" Delay="{TemplateBinding Delay}" HorizontalAlignment="Center" IsEnabled="{TemplateBinding IsEnabled}" Interval="{TemplateBinding RepeatInterval}" Opacity="0.8" Grid.Row="2" RenderTransformOrigin="0.5,0.5" Visibility="{TemplateBinding HandlesVisibility}">
                  <RepeatButton.RenderTransform>
                   <TransformGroup>
                    <ScaleTransform ScaleY="-1" ScaleX="-1"/>
                    <RotateTransform Angle="90"/>
                   </TransformGroup>
                  </RepeatButton.RenderTransform>
                  <RepeatButton.Style>
                   <Style TargetType="{x:Type RepeatButton}">
                    <Setter Property="IsTabStop" Value="False"/>
                    <Setter Property="Cursor" Value="Hand"/>
                    <Setter Property="Template">
                     <Setter.Value>
                      <ControlTemplate TargetType="{x:Type RepeatButton}">
                       <Grid x:Name="Root" Height="22" Margin="2,5" Width="22">
                        <Border x:Name="Border" BorderThickness="1" Background="#FF575859" CornerRadius="3">
                         <Border.BorderBrush>
                          <LinearGradientBrush EndPoint="0.971000015735626,0.5" StartPoint="0.0399999991059303,0.5">
                           <GradientStop Color="#FF707070" Offset="0"/>
                           <GradientStop Color="#FFA3A3A3" Offset="0.5"/>
                           <GradientStop Color="#FF707070" Offset="1"/>
                          </LinearGradientBrush>
                         </Border.BorderBrush>
                         <Border x:Name="InnerBorder" BorderBrush="Transparent" BorderThickness="1" CornerRadius="2"/>
                        </Border>
                        <Telerik_Windows_Controls_Chromes:ButtonChrome CornerRadius="3" Orientation="Vertical" RenderNormal="False" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderFocused="{TemplateBinding IsFocused}" RenderEnabled="{TemplateBinding IsEnabled}">
                         <telerik:StyleManager.Theme>
                          <telerik:Expression_DarkTheme/>
                         </telerik:StyleManager.Theme>
                        </Telerik_Windows_Controls_Chromes:ButtonChrome>
                        <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}"/>
                       </Grid>
                      </ControlTemplate>
                     </Setter.Value>
                    </Setter>
                   </Style>
                  </RepeatButton.Style>
                  <Path Data="M1.48956,16.175882L7.1873875,16.175882 7.1873875,18.47793 1.48956,18.47793z" Fill="#FFC5C2C2" HorizontalAlignment="Center" Height="9" Stretch="Fill" VerticalAlignment="Center" Width="2"/>
                 </RepeatButton>
                 <RepeatButton x:Name="VerticalIncreaseHandle" Grid.Column="1" Delay="{TemplateBinding Delay}" HorizontalAlignment="Center" IsEnabled="{TemplateBinding IsEnabled}" Interval="{TemplateBinding RepeatInterval}" Opacity="0.8" Grid.Row="0" RenderTransformOrigin="0.5,0.5" Visibility="{TemplateBinding HandlesVisibility}">
                  <RepeatButton.RenderTransform>
                   <TransformGroup>
                    <ScaleTransform ScaleY="-1" ScaleX="1"/>
                    <RotateTransform Angle="90"/>
                   </TransformGroup>
                  </RepeatButton.RenderTransform>
                  <RepeatButton.Style>
                   <Style TargetType="{x:Type RepeatButton}">
                    <Setter Property="IsTabStop" Value="False"/>
                    <Setter Property="Cursor" Value="Hand"/>
                    <Setter Property="Template">
                     <Setter.Value>
                      <ControlTemplate TargetType="{x:Type RepeatButton}">
                       <Grid x:Name="Root" Height="22" Margin="2,5" Width="22">
                        <Border x:Name="Border" BorderThickness="1" Background="#FF575859" CornerRadius="3">
                         <Border.BorderBrush>
                          <LinearGradientBrush EndPoint="0.971000015735626,0.5" StartPoint="0.0399999991059303,0.5">
                           <GradientStop Color="#FF707070" Offset="0"/>
                           <GradientStop Color="#FFA3A3A3" Offset="0.5"/>
                           <GradientStop Color="#FF707070" Offset="1"/>
                          </LinearGradientBrush>
                         </Border.BorderBrush>
                         <Border x:Name="InnerBorder" BorderBrush="Transparent" BorderThickness="1" CornerRadius="2"/>
                        </Border>
                        <Telerik_Windows_Controls_Chromes:ButtonChrome CornerRadius="3" Orientation="Vertical" RenderNormal="False" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderFocused="{TemplateBinding IsFocused}" RenderEnabled="{TemplateBinding IsEnabled}">
                         <telerik:StyleManager.Theme>
                          <telerik:Expression_DarkTheme/>
                         </telerik:StyleManager.Theme>
                        </Telerik_Windows_Controls_Chromes:ButtonChrome>
                        <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}"/>
                       </Grid>
                      </ControlTemplate>
                     </Setter.Value>
                    </Setter>
                   </Style>
                  </RepeatButton.Style>
                  <Path Data="M4.0009999,0L6.0009999,0 6.0009999,3.9619999 10,3.9619999 10,5.9619999 6.0009999,5.9619999 6.0009999,10 4.0009999,10 4.0009999,5.9619999 0,5.9619999 0,3.9619999 4.0009999,3.9619999z" Fill="#FFC5C2C2" HorizontalAlignment="Center" Height="9" Stretch="Fill" VerticalAlignment="Center" Width="9"/>
                 </RepeatButton>
                </Grid>
               </Grid>
               <Rectangle x:Name="FocusVisual" Opacity="0" RadiusY="2" RadiusX="2" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2"/>
              </Grid>
             </ControlTemplate>
            </Setter.Value>
           </Setter>
          </Style>
         </telerik:RadSlider.Style>
        </telerik:RadSlider>
        <StackPanel x:Name="PART_ZoomPresetsPanel" Grid.ColumnSpan="2" Grid.Column="1" HorizontalAlignment="Left" Margin="35,0,0,0" VerticalAlignment="Center">
         <telerik:RadButton Background="#E5575859" Content="Neighborhood" CornerRadius="3" FontWeight="Bold" FontSize="11" Height="24" Margin="0,1" Opacity="1" Padding="7,0" telerik:LocalizationManager.ResourceKey="MapPresetZoomLevelNeighborhood" Tag="NeighborhoodLevel">
          <telerik:RadButton.BorderBrush>
           <LinearGradientBrush EndPoint="0.971000015735626,0.5" StartPoint="0.0399999991059303,0.5">
            <GradientStop Color="#FF707070" Offset="0"/>
            <GradientStop Color="#FF707070" Offset="1"/>
            <GradientStop Color="#FFA3A3A3" Offset="0.5"/>
            <GradientStop Color="#FF707070" Offset="1"/>
           </LinearGradientBrush>
          </telerik:RadButton.BorderBrush>
          <telerik:StyleManager.Theme>
           <telerik:Expression_DarkTheme/>
          </telerik:StyleManager.Theme>
         </telerik:RadButton>
         <telerik:RadButton Background="#E5575859" Content="City" CornerRadius="3" FontWeight="Bold" FontSize="11" Height="24" Margin="0,1" Opacity="1" Padding="7,0" telerik:LocalizationManager.ResourceKey="MapPresetZoomLevelCity" Tag="CityLevel">
          <telerik:RadButton.BorderBrush>
           <LinearGradientBrush EndPoint="0.971000015735626,0.5" StartPoint="0.0399999991059303,0.5">
            <GradientStop Color="#FF707070" Offset="0"/>
            <GradientStop Color="#FF707070" Offset="1"/>
            <GradientStop Color="#FFA3A3A3" Offset="0.5"/>
            <GradientStop Color="#FF707070" Offset="1"/>
           </LinearGradientBrush>
          </telerik:RadButton.BorderBrush>
          <telerik:StyleManager.Theme>
           <telerik:Expression_DarkTheme/>
          </telerik:StyleManager.Theme>
         </telerik:RadButton>
         <telerik:RadButton Background="#E5575859" Content="Region" CornerRadius="3" FontWeight="Bold" FontSize="11" Height="24" Margin="0,1" Opacity="1" Padding="7,0" telerik:LocalizationManager.ResourceKey="MapPresetZoomLevelRegion" Tag="RegionLevel">
          <telerik:RadButton.BorderBrush>
           <LinearGradientBrush EndPoint="0.971000015735626,0.5" StartPoint="0.0399999991059303,0.5">
            <GradientStop Color="#FF707070" Offset="0"/>
            <GradientStop Color="#FF707070" Offset="1"/>
            <GradientStop Color="#FFA3A3A3" Offset="0.5"/>
            <GradientStop Color="#FF707070" Offset="1"/>
           </LinearGradientBrush>
          </telerik:RadButton.BorderBrush>
          <telerik:StyleManager.Theme>
           <telerik:Expression_DarkTheme/>
          </telerik:StyleManager.Theme>
         </telerik:RadButton>
         <telerik:RadButton Background="#E5575859" Content="State" CornerRadius="3" FontWeight="Bold" FontSize="11" Height="24" Margin="0,1" Opacity="1" Padding="10,0" telerik:LocalizationManager.ResourceKey="MapPresetZoomLevelState" Tag="StateLevel">
          <telerik:RadButton.BorderBrush>
           <LinearGradientBrush EndPoint="0.971000015735626,0.5" StartPoint="0.0399999991059303,0.5">
            <GradientStop Color="#FF707070" Offset="0"/>
            <GradientStop Color="#FF707070" Offset="1"/>
            <GradientStop Color="#FFA3A3A3" Offset="0.5"/>
            <GradientStop Color="#FF707070" Offset="1"/>
           </LinearGradientBrush>
          </telerik:RadButton.BorderBrush>
          <telerik:StyleManager.Theme>
           <telerik:Expression_DarkTheme/>
          </telerik:StyleManager.Theme>
         </telerik:RadButton>
         <telerik:RadButton Background="#E5575859" Content="World" CornerRadius="3" FontWeight="Bold" FontSize="11" Height="24" Margin="0,1" Opacity="1" Padding="7,0" telerik:LocalizationManager.ResourceKey="MapPresetZoomLevelWorld" Tag="WorldLevel">
          <telerik:RadButton.BorderBrush>
           <LinearGradientBrush EndPoint="0.971000015735626,0.5" StartPoint="0.0399999991059303,0.5">
            <GradientStop Color="#FF707070" Offset="0"/>
            <GradientStop Color="#FF707070" Offset="1"/>
            <GradientStop Color="#FFA3A3A3" Offset="0.5"/>
            <GradientStop Color="#FF707070" Offset="1"/>
           </LinearGradientBrush>
          </telerik:RadButton.BorderBrush>
          <telerik:StyleManager.Theme>
           <telerik:Expression_DarkTheme/>
          </telerik:StyleManager.Theme>
         </telerik:RadButton>
        </StackPanel>
       </Grid>
      </telerik:RadDropDownButton.DropDownContent>
      <telerik:RadDropDownButton.Style>
       <Style TargetType="{x:Type telerik:RadDropDownButton}">
        <Setter Property="Background">
         <Setter.Value>
          <LinearGradientBrush EndPoint="0.801,0.765" StartPoint="0.199,0.235">
           <GradientStop Color="#D86C6C6C" Offset="1"/>
           <GradientStop Color="#CC101010"/>
           <GradientStop Color="#D8646363" Offset="0.28"/>
           <GradientStop Color="#FF7C7B7B" Offset="0.741"/>
          </LinearGradientBrush>
         </Setter.Value>
        </Setter>
        <Setter Property="Template">
         <Setter.Value>
          <ControlTemplate TargetType="{x:Type telerik:RadDropDownButton}">
           <Grid SnapsToDevicePixels="True">
            <Path x:Name="Border" Data="M3.000001,0C3.000001,0 36.831249,6.1663559E-07 36.982265,7.0035469E-07 38.91526,6.1663559E-07 43.278763,6.268014 43.278763,14 43.278763,21.731987 38.91526,28 36.982265,28 36.831249,28 3.000001,28 3.000001,28 3.000001,28 5.3613954,21.007113 5.3613954,14 5.3613954,6.9928875 3.000001,0 3.000001,0z" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1"/>
            <Grid>
             <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto"/>
              <ColumnDefinition Width="*"/>
              <ColumnDefinition Width="Auto"/>
             </Grid.ColumnDefinitions>
             <Grid.RowDefinitions>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="*"/>
              <RowDefinition Height="Auto"/>
             </Grid.RowDefinitions>
             <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Grid.Row="1" RecognizesAccessKey="True" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </Grid>
            <Popup x:Name="DropDownPopup" AllowsTransparency="True" Focusable="False" IsOpen="{Binding IsOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom" StaysOpen="False">
             <Grid>
              <Border x:Name="DropDownPopupBorder" CornerRadius="{TemplateBinding CornerRadius}" Height="{TemplateBinding DropDownHeight}" MaxWidth="{TemplateBinding DropDownMaxWidth}" MaxHeight="{TemplateBinding DropDownMaxHeight}" Margin="0,1,4,4" MinWidth="3" MinHeight="3" Width="{TemplateBinding DropDownWidth}">
               <ContentPresenter x:Name="DropDownPopupContent" ContentTemplate="{TemplateBinding DropDownContentTemplate}" Content="{TemplateBinding DropDownContent}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
              </Border>
             </Grid>
            </Popup>
           </Grid>
           <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
             <Setter Property="Fill" TargetName="Border" Value="#CC878787"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
             <Setter Property="Fill" TargetName="Border" Value="#CC878787"/>
            </Trigger>
            <Trigger Property="IsOpen" Value="True"/>
            <Trigger Property="DropDownPlacement" Value="Top">
             <Setter Property="Placement" TargetName="DropDownPopup" Value="Top"/>
            </Trigger>
           </ControlTemplate.Triggers>
          </ControlTemplate>
         </Setter.Value>
        </Setter>
        <Style.BasedOn>
         <Style TargetType="{x:Type telerik:RadDropDownButton}">
          <Setter Property="Width" Value="44"/>
          <Setter Property="Height" Value="28"/>
          <Setter Property="BorderBrush" Value="#FFADADAC"/>
          <Setter Property="Padding" Value="0"/>
         </Style>
        </Style.BasedOn>
       </Style>
      </telerik:RadDropDownButton.Style>
      <telerik:StyleManager.Theme>
       <telerik:Expression_DarkTheme/>
      </telerik:StyleManager.Theme>
      <Grid>
       <Path Data="M13.952573,12.273359L21.023642,19.588496 19.609426,21.00271 12.53836,13.687573z M8,1C11.865993,1.0000001 15,4.1340071 15,8.0000001 15,11.865994 11.865993,15 8,15 4.134007,15 1,11.865994 1,8.0000001 1,4.1340071 4.134007,1.0000001 8,1z" Height="19" Stretch="Fill" StrokeThickness="2" Width="19">
        <Path.Effect>
         <DropShadowEffect BlurRadius="3" Color="White" ShadowDepth="0"/>
        </Path.Effect>
        <Path.Fill>
         <LinearGradientBrush EndPoint="0.48,0.972" StartPoint="0.47,-0.171">
          <GradientStop Color="#D1FFFFFF"/>
          <GradientStop Color="#EBFFFFFF" Offset="0.897"/>
         </LinearGradientBrush>
        </Path.Fill>
        <Path.Stroke>
         <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
          <GradientStop Color="Gray"/>
          <GradientStop Color="Black" Offset="1"/>
         </LinearGradientBrush>
        </Path.Stroke>
       </Path>
       <Ellipse HorizontalAlignment="Left" Height="6" Margin="4,4,0,0" VerticalAlignment="Top" Width="6">
        <Ellipse.Fill>
         <LinearGradientBrush EndPoint="0.483999997377396,1.307000041008" StartPoint="0.462000012397766,-0.104000002145767">
          <GradientStop Color="#FF1F5A83" Offset="0"/>
          <GradientStop Color="#E5000000" Offset="1"/>
         </LinearGradientBrush>
        </Ellipse.Fill>
       </Ellipse>
      </Grid>
     </telerik:RadDropDownButton>
    </Grid>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>

For the Map Command Bar:

<Style x:Key="MapCommandBarStyle1" TargetType="{x:Type telerik:MapCommandBar}">
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="{x:Type telerik:MapCommandBar}">
    <telerik:RadDropDownButton x:Name="PART_MapCommandDropDown" ClickMode="Hover" CloseOnEscape="True" DropDownIndicatorVisibility="Collapsed" DropDownPlacement="Top">
     <telerik:RadDropDownButton.DropDownContent>
      <Grid x:Name="PART_DropDownPopupWrapper" Background="#01FFFFFF" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
       <Border BorderBrush="Transparent" BorderThickness="1,1,1,0" Background="Transparent" CornerRadius="3" HorizontalAlignment="Right" Width="42">
        <Border BorderBrush="#FFADADAC" BorderThickness="1" CornerRadius="2" Margin="1,0">
         <Border.Background>
          <LinearGradientBrush EndPoint="1.489,0.798" StartPoint="-0.68,0.083">
           <GradientStop Color="#B2000000" Offset="0.146"/>
           <GradientStop Color="#DA353535" Offset="1"/>
           <GradientStop Color="#CCBBB6B6" Offset="0.28"/>
           <GradientStop Color="#CBD8D8D8" Offset="0.74"/>
          </LinearGradientBrush>
         </Border.Background>
        </Border>
       </Border>
       <StackPanel HorizontalAlignment="Left" Margin="0,5,5,5" VerticalAlignment="Center">
        <telerik:RadRadioButton x:Name="PART_MapStyle_Road" Background="#E5575859" CornerRadius="3" HorizontalContentAlignment="Stretch" Height="26" Margin="0,2" Opacity="1" Tag="Road">
         <telerik:RadRadioButton.BorderBrush>
          <LinearGradientBrush EndPoint="0.971000015735626,0.5" StartPoint="0.0399999991059303,0.5">
           <GradientStop Color="#FF707070" Offset="0"/>
           <GradientStop Color="#FF707070" Offset="1"/>
           <GradientStop Color="#FFA3A3A3" Offset="0.5"/>
           <GradientStop Color="#FF707070" Offset="1"/>
          </LinearGradientBrush>
         </telerik:RadRadioButton.BorderBrush>
         <telerik:StyleManager.Theme>
          <telerik:Expression_DarkTheme/>
         </telerik:StyleManager.Theme>
         <Grid HorizontalAlignment="Stretch">
          <Grid.ColumnDefinitions>
           <ColumnDefinition/>
           <ColumnDefinition Width="32"/>
          </Grid.ColumnDefinitions>
          <TextBlock FontWeight="Bold" FontSize="11" HorizontalAlignment="Stretch" Padding="7,0" telerik:LocalizationManager.ResourceKey="MapRoadCommand" TextAlignment="Center" Text="Road View"><Run Text="Road View"/></TextBlock>
          <Image Grid.Column="1" HorizontalAlignment="Center" Height="16" VerticalAlignment="Center" Width="16">
           <Image.Source>
            <BitmapImage BaseUri="pack://application:,,,/Telerik.Windows.Controls.DataVisualization;Component/Themes/Map/ExpressionDark/Styles.xaml" UriSource="/Telerik.Windows.Controls.DataVisualization;component/themes/map/road.png"/>
           </Image.Source>
          </Image>
         </Grid>
        </telerik:RadRadioButton>
        <telerik:RadRadioButton x:Name="PART_MapStyle_Aerial" Background="#E5575859" CornerRadius="3" HorizontalContentAlignment="Stretch" Height="26" Margin="0,2" Opacity="1" Tag="Aerial">
         <telerik:RadRadioButton.BorderBrush>
          <LinearGradientBrush EndPoint="0.971000015735626,0.5" StartPoint="0.0399999991059303,0.5">
           <GradientStop Color="#FF707070" Offset="0"/>
           <GradientStop Color="#FF707070" Offset="1"/>
           <GradientStop Color="#FFA3A3A3" Offset="0.5"/>
           <GradientStop Color="#FF707070" Offset="1"/>
          </LinearGradientBrush>
         </telerik:RadRadioButton.BorderBrush>
         <telerik:StyleManager.Theme>
          <telerik:Expression_DarkTheme/>
         </telerik:StyleManager.Theme>
         <Grid HorizontalAlignment="Stretch">
          <Grid.ColumnDefinitions>
           <ColumnDefinition/>
           <ColumnDefinition Width="32"/>
          </Grid.ColumnDefinitions>
          <TextBlock FontWeight="Bold" FontSize="11" HorizontalAlignment="Stretch" Padding="7,0" telerik:LocalizationManager.ResourceKey="MapAerialCommand" TextAlignment="Center" Text="Aerial View"><Run Text="Aerial View"/></TextBlock>
          <Image Grid.Column="1" HorizontalAlignment="Center" Height="16" VerticalAlignment="Center" Width="16">
           <Image.Source>
            <BitmapImage BaseUri="pack://application:,,,/Telerik.Windows.Controls.DataVisualization;Component/Themes/Map/ExpressionDark/Styles.xaml" UriSource="/Telerik.Windows.Controls.DataVisualization;component/themes/map/aerial.png"/>
           </Image.Source>
          </Image>
         </Grid>
        </telerik:RadRadioButton>
        <telerik:RadRadioButton x:Name="PART_MapStyle_Birdseye" Background="#E5575859" CornerRadius="3" HorizontalContentAlignment="Stretch" Height="26" Margin="0,2" Opacity="1" Tag="Birdseye">
         <telerik:RadRadioButton.BorderBrush>
          <LinearGradientBrush EndPoint="0.971000015735626,0.5" StartPoint="0.0399999991059303,0.5">
           <GradientStop Color="#FF707070" Offset="0"/>
           <GradientStop Color="#FF707070" Offset="1"/>
           <GradientStop Color="#FFA3A3A3" Offset="0.5"/>
           <GradientStop Color="#FF707070" Offset="1"/>
          </LinearGradientBrush>
         </telerik:RadRadioButton.BorderBrush>
         <telerik:StyleManager.Theme>
          <telerik:Expression_DarkTheme/>
         </telerik:StyleManager.Theme>
         <Grid HorizontalAlignment="Stretch">
          <Grid.ColumnDefinitions>
           <ColumnDefinition/>
           <ColumnDefinition Width="32"/>
          </Grid.ColumnDefinitions>
          <TextBlock FontWeight="Bold" FontSize="11" HorizontalAlignment="Stretch" Padding="7,0" telerik:LocalizationManager.ResourceKey="MapBirdseyeCommand" TextAlignment="Center" Text="Bird's Eye View"><Run Text="Bird's Eye View"/></TextBlock>
          <Image Grid.Column="1" HorizontalAlignment="Center" Height="16" VerticalAlignment="Center" Width="16">
           <Image.Source>
            <BitmapImage BaseUri="pack://application:,,,/Telerik.Windows.Controls.DataVisualization;Component/Themes/Map/ExpressionDark/Styles.xaml" UriSource="/Telerik.Windows.Controls.DataVisualization;component/themes/map/birdeye.png"/>
           </Image.Source>
          </Image>
         </Grid>
        </telerik:RadRadioButton>
        <telerik:RadToggleButton x:Name="PART_IsLabelVisible" Background="#E5575859" CornerRadius="3" HorizontalContentAlignment="Stretch" Height="26" Margin="0,3" Opacity="1" Tag="Label">
         <telerik:RadToggleButton.BorderBrush>
          <LinearGradientBrush EndPoint="0.971000015735626,0.5" StartPoint="0.0399999991059303,0.5">
           <GradientStop Color="#FF707070" Offset="0"/>
           <GradientStop Color="#FF707070" Offset="1"/>
           <GradientStop Color="#FFA3A3A3" Offset="0.5"/>
           <GradientStop Color="#FF707070" Offset="1"/>
          </LinearGradientBrush>
         </telerik:RadToggleButton.BorderBrush>
         <telerik:StyleManager.Theme>
          <telerik:Expression_DarkTheme/>
         </telerik:StyleManager.Theme>
         <Grid HorizontalAlignment="Stretch">
          <Grid.ColumnDefinitions>
           <ColumnDefinition/>
           <ColumnDefinition Width="32"/>
          </Grid.ColumnDefinitions>
          <TextBlock FontWeight="Bold" FontSize="11" HorizontalAlignment="Stretch" Padding="7,0" telerik:LocalizationManager.ResourceKey="MapLabelsVisibleCommand" TextAlignment="Center" Text="Show Labels"><Run Text="Show Labels"/></TextBlock>
          <Image Grid.Column="1" HorizontalAlignment="Center" Height="16" VerticalAlignment="Center" Width="16">
           <Image.Source>
            <BitmapImage BaseUri="pack://application:,,,/Telerik.Windows.Controls.DataVisualization;Component/Themes/Map/ExpressionDark/Styles.xaml" UriSource="/Telerik.Windows.Controls.DataVisualization;component/themes/map/label.png"/>
           </Image.Source>
          </Image>
         </Grid>
        </telerik:RadToggleButton>
       </StackPanel>
      </Grid>
     </telerik:RadDropDownButton.DropDownContent>
     <telerik:RadDropDownButton.Style>
      <Style TargetType="{x:Type telerik:RadDropDownButton}">
       <Setter Property="Background">
        <Setter.Value>
         <LinearGradientBrush EndPoint="0.15,0.804" StartPoint="0.802,0.238">
          <GradientStop Color="#D86C6C6C"/>
          <GradientStop Color="#CC101010" Offset="0.93"/>
          <GradientStop Color="#D8646363" Offset="0.595"/>
          <GradientStop Color="#FF7C7B7B" Offset="0.185"/>
         </LinearGradientBrush>
        </Setter.Value>
       </Setter>
       <Setter Property="Template">
        <Setter.Value>
         <ControlTemplate TargetType="{x:Type telerik:RadDropDownButton}">
          <Grid>
           <Path x:Name="Border" Data="M3.000001,0C3.000001,0 36.831249,6.1663559E-07 36.982265,7.0035469E-07 38.91526,6.1663559E-07 43.278763,6.268014 43.278763,14 43.278763,21.731987 38.91526,28 36.982265,28 36.831249,28 3.000001,28 3.000001,28 3.000001,28 5.3613954,21.007113 5.3613954,14 5.3613954,6.9928875 3.000001,0 3.000001,0z" Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" RenderTransformOrigin="0.5,0.5" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1" Width="{TemplateBinding Width}">
            <Path.RenderTransform>
             <ScaleTransform ScaleX="-1"/>
            </Path.RenderTransform>
           </Path>
           <Grid>
            <Grid.ColumnDefinitions>
             <ColumnDefinition Width="Auto"/>
             <ColumnDefinition Width="*"/>
             <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="*"/>
             <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Grid.Row="1" RecognizesAccessKey="True" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
           </Grid>
           <Popup x:Name="DropDownPopup" AllowsTransparency="True" Focusable="False" IsOpen="{Binding IsOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom" StaysOpen="False">
            <Grid>
             <Border x:Name="DropDownPopupBorder" CornerRadius="{TemplateBinding CornerRadius}" Height="{TemplateBinding DropDownHeight}" MaxWidth="{TemplateBinding DropDownMaxWidth}" MaxHeight="{TemplateBinding DropDownMaxHeight}" Margin="0,1,4,4" MinWidth="3" MinHeight="3" Width="{TemplateBinding DropDownWidth}">
              <ContentPresenter x:Name="DropDownPopupContent" ContentTemplate="{TemplateBinding DropDownContentTemplate}" Content="{TemplateBinding DropDownContent}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
             </Border>
            </Grid>
           </Popup>
          </Grid>
          <ControlTemplate.Triggers>
           <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Fill" TargetName="Border" Value="#CC878787"/>
           </Trigger>
           <Trigger Property="IsPressed" Value="True">
            <Setter Property="Fill" TargetName="Border" Value="#CC878787"/>
           </Trigger>
           <Trigger Property="IsOpen" Value="True"/>
           <Trigger Property="DropDownPlacement" Value="Top">
            <Setter Property="Placement" TargetName="DropDownPopup" Value="Top"/>
           </Trigger>
          </ControlTemplate.Triggers>
         </ControlTemplate>
        </Setter.Value>
       </Setter>
       <Style.BasedOn>
        <Style TargetType="{x:Type telerik:RadDropDownButton}">
         <Setter Property="Width" Value="44"/>
         <Setter Property="Height" Value="28"/>
         <Setter Property="BorderBrush" Value="#FFADADAC"/>
         <Setter Property="Padding" Value="0"/>
        </Style>
       </Style.BasedOn>
      </Style>
     </telerik:RadDropDownButton.Style>
     <telerik:StyleManager.Theme>
      <telerik:Expression_DarkTheme/>
     </telerik:StyleManager.Theme>
     <Grid>
      <Path Data="M23,6C23,7.545 18.075132,11 12,11 5.9248678,11 1,6.955 1,6 1,5.045 5.9248678,1 12,1 18.075132,1 23,4.455 23,6z" Fill="Transparent" Height="12" Margin="0,2,0,0" Stretch="Fill" Stroke="Transparent" StrokeThickness="0" Width="24"/>
      <Path Data="M23,6C23,7.545 18.075132,11 12,11 5.9248678,11 1,6.955 1,6 1,5.045 5.9248678,1 12,1 18.075132,1 23,4.455 23,6z" HorizontalAlignment="Center" Height="12" Stretch="Fill" Stroke="Transparent" StrokeThickness="0" VerticalAlignment="Center" Width="24">
       <Path.Fill>
        <LinearGradientBrush EndPoint="0.484,1.307" StartPoint="0.462,-0.104">
         <GradientStop Color="Gray" Offset="0"/>
         <GradientStop Color="Black" Offset="1"/>
        </LinearGradientBrush>
       </Path.Fill>
      </Path>
      <Ellipse Fill="White" HorizontalAlignment="Center" Height="13" VerticalAlignment="Center" Width="13"/>
      <Ellipse Fill="#FF1F5A83" HorizontalAlignment="Center" Height="7" StrokeThickness="1" VerticalAlignment="Center" Width="7">
       <Ellipse.Stroke>
        <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
         <GradientStop Color="Gray"/>
         <GradientStop Color="Black" Offset="1"/>
        </LinearGradientBrush>
       </Ellipse.Stroke>
      </Ellipse>
      <Ellipse Fill="White" Height="3" Margin="12,3,9,0" VerticalAlignment="Top" Width="3"/>
     </Grid>
    </telerik:RadDropDownButton>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>

[Andrey]

Hi Vishal,

The templates for buttons of MapCommandBar and MapZoomBar are used in the code of these controls. So, you can't replace them using just a XAML code.
I have attached a sample solution which allows to customize the appearance of MapCommandBar and MapZoomBar. I hope it helps.

All the best,
Andrey Murzov
the Telerik team