Navigation Bar

[Abdulhameed]

Is it possible to use the Navigation bar with shapfile maps?

I tried to set the visibility to visible with no success?

Please advise?

[Andrey]

Hello Abdulhameed,

It seems you set RadMap.UseDefaultLayout property to "False". This approach is used to hide all of the controls including Navigation for creating your own custom layout. For more information please take a look to the following documentation topic:
http://www.telerik.com/help/silverlight/radmap-features-default-layout.html

If you want to use standard Navigation control of RadMap, then you should specify "True" to RadMap.UseDefaultLayout property or just remove it. Also you can hide other controls if they are not required. The sample code is below.

<telerik:RadMap x:Name="radMap"
                NavigationVisibility="Visible"
                ScaleVisibility="Collapsed"
                MouseLocationIndicatorVisibility="Collapsed">
...
</telerik:RadMap>

Kind regards,
Andrey Murzov
the Telerik team

[Abdulhameed]

One Other thing.

What are the options to change the navigation bar look and feel.
Is it affected by theme?
I have seen an article in help explains how to change the colors only
Can I change it totally and use images ......

[Andrey]

Hi Abdulhameed,

Yes, you can use themes to change the appearance of the map and its controls. You can specify the StyleManager.Theme attachable property. Also when you use a theme then you should reference its dll in your project.

<telerik:RadMap x:Name="radMap"
                telerik:StyleManager.Theme="Metro">
</telerik:RadMap>

Also you can use standard approach for restyling the navigation control using your own styles. The sample code is below.

<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:system="clr-namespace:System;assembly=mscorlib"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.Resources>
        <LinearGradientBrush x:Key="ControlOuterBorderVertical_Normal" EndPoint="1,0.5" StartPoint="0,0.5">
            <GradientStop Color="#FFA9BFD6" />
            <GradientStop Color="#FFCDDAEA" Offset="1" />
        </LinearGradientBrush>
        <Thickness x:Key="MapCommandBarMargin">6,0</Thickness>
        <Thickness x:Key="MapZoomBarMargin">6,0</Thickness>
        <SolidColorBrush x:Key="MapArrowShadow" Color="White" />
        <system:Double x:Key="MapNavigationSize">74</system:Double>
        <Visibility x:Key="MapArrowVisibility">Visible</Visibility>
        <SolidColorBrush x:Key="MapNavigationCenterEllipseBackground" Color="Transparent" />
        <SolidColorBrush x:Key="MapNavigationCenterEllipseStroke" Color="Transparent" />
        <Visibility x:Key="MapNavigationCenterEllipseVisibility">Collapsed</Visibility>
        <SolidColorBrush x:Key="MapNavigationCenterOuterEllipseStroke" Color="Transparent" />

        <Style x:Key="MapNavigationButton"
           TargetType="telerik:RadButton"
           >
            <Setter Property="Foreground">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
                        <GradientStop Color="#FF1E395B" Offset="0.004"/>
                        <GradientStop Color="#FFC3E4F5" Offset="1"/>
                        <GradientStop Color="#FF4C607A" Offset="0.5"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Width" Value="30" />
            <Setter Property="Height" Value="30" />
        </Style>

        <Style x:Key="MapNavigationLeftButton" BasedOn="{StaticResource MapNavigationButton}" TargetType="telerik:RadButton">
            <Setter Property="Padding" Value="0,0,12,0" />
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                        <GradientStop Color="#FFFDFEFF" Offset="0"/>
                        <GradientStop Color="#FFDDE9F7" Offset="1"/>
                        <GradientStop Color="#FFE6F0FA" Offset="0.5"/>
                        <GradientStop Color="#FFDCE6F4" Offset="0.5"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="CornerRadius" Value="9,15,15,9" />
        </Style>

        <Style x:Key="MapNavigationRightButton" BasedOn="{StaticResource MapNavigationButton}" TargetType="telerik:RadButton">
            <Setter Property="Padding" Value="12,0,0,0" />
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0,0.5" StartPoint="1,0.5">
                        <GradientStop Color="#FFFDFEFF" Offset="0"/>
                        <GradientStop Color="#FFDDE9F7" Offset="1"/>
                        <GradientStop Color="#FFE6F0FA" Offset="0.5"/>
                        <GradientStop Color="#FFDCE6F4" Offset="0.5"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="CornerRadius" Value="15,9,9,15" />
        </Style>

        <Style x:Key="MapNavigationUpButton" BasedOn="{StaticResource MapNavigationButton}" TargetType="telerik:RadButton">
            <Setter Property="Padding" Value="0,0,0,12" />
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFFDFEFF" Offset="0"/>
                        <GradientStop Color="#FFDDE9F7" Offset="1"/>
                        <GradientStop Color="#FFE6F0FA" Offset="0.5"/>
                        <GradientStop Color="#FFDCE6F4" Offset="0.5"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="CornerRadius" Value="9,9,15,15" />
        </Style>

        <Style x:Key="MapNavigationDownButton" BasedOn="{StaticResource MapNavigationButton}" TargetType="telerik:RadButton">
            <Setter Property="Padding" Value="0,12,0,0" />
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFFDFEFF" Offset="0"/>
                        <GradientStop Color="#FFDDE9F7" Offset="1"/>
                        <GradientStop Color="#FFE6F0FA" Offset="0.5"/>
                        <GradientStop Color="#FFDCE6F4" Offset="0.5"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="CornerRadius" Value="15,15,9,9" />
        </Style>

        <Style x:Key="MapNavigationCenterButton" BasedOn="{StaticResource MapNavigationButton}" TargetType="telerik:RadButton">
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFFDFEFF" Offset="1"/>
                        <GradientStop Color="#FFDCE6F4"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="CornerRadius" Value="13" />
            <Setter Property="Width" Value="26" />
            <Setter Property="Height" Value="26" />
        </Style>

        <Style x:Key="MapDropDownButton"
           TargetType="telerik:RadDropDownButton">
            <Setter Property="Width" Value="36" />
            <Setter Property="Height" Value="26" />
            <Setter Property="CornerRadius" Value="3" />
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFFDFEFF" Offset="0"/>
                        <GradientStop Color="#FFDDE9F7" Offset="1"/>
                        <GradientStop Color="#FFE6F0FA" Offset="0.5"/>
                        <GradientStop Color="#FFDCE6F4" Offset="0.5"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderBrush" Value="{StaticResource ControlOuterBorderVertical_Normal}" />
        </Style>

        <Style x:Key="MapCommandBarButton" BasedOn="{StaticResource MapDropDownButton}"
           TargetType="telerik:RadDropDownButton">
        </Style>

        <Style x:Key="MapZoomBarButton" BasedOn="{StaticResource MapDropDownButton}"
           TargetType="telerik:RadDropDownButton">
        </Style>

        <Style TargetType="telerik:MapNavigation">
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:MapNavigation">
                        <Grid x:Name="mapNavigation"
                          HorizontalAlignment="Center"
                          VerticalAlignment="Center"
                          Width="{StaticResource MapNavigationSize}"
                          Height="{StaticResource MapNavigationSize}">
                            <telerik:RadButton x:Name="PART_ArrowLeft"
                                               HorizontalAlignment="Left"
                                               Style="{StaticResource MapNavigationLeftButton}">
                                <telerik:Arrow Direction="Left" Visibility="{StaticResource MapArrowVisibility}" />
                            </telerik:RadButton>

                            <telerik:RadButton x:Name="PART_ArrowRight"
                                               HorizontalAlignment="Right"
                                               Style="{StaticResource MapNavigationRightButton}">
                                <telerik:Arrow Direction="Right" Visibility="{StaticResource MapArrowVisibility}" />
                            </telerik:RadButton>

                            <telerik:RadButton x:Name="PART_ArrowUp"
                                               VerticalAlignment="Top"
                                               Style="{StaticResource MapNavigationUpButton}">
                                <telerik:Arrow Direction="Up" Visibility="{StaticResource MapArrowVisibility}" />
                            </telerik:RadButton>

                            <telerik:RadButton x:Name="PART_ArrowDown"
                                               VerticalAlignment="Bottom"
                                               Style="{StaticResource MapNavigationDownButton}">
                                <telerik:Arrow Direction="Down" Visibility="{StaticResource MapArrowVisibility}" />
                            </telerik:RadButton>

                            <Ellipse StrokeThickness="5"
                                 Width="47"
                                 Height="47"
                                 VerticalAlignment="Center"
                                 HorizontalAlignment="Center"
                                 Fill="{StaticResource MapNavigationCenterEllipseBackground}"
                                 Stroke="{StaticResource MapNavigationCenterEllipseStroke}"
                                 Visibility="{StaticResource MapNavigationCenterEllipseVisibility}" />

                            <Ellipse HorizontalAlignment="Center"
                                 VerticalAlignment="Center"
                                 StrokeThickness="1"
                                 Height="47"
                                 Width="47"
                                 Stroke="{StaticResource MapNavigationCenterOuterEllipseStroke}"
                                 Visibility="{StaticResource MapNavigationCenterEllipseVisibility}" />
                            <telerik:RadButton x:Name="PART_CenterButton"
                                               Style="{StaticResource MapNavigationCenterButton}" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadMap x:Name="radMap">
            <telerik:RadMap.Provider>
                <telerik:OpenStreetMapProvider />
            </telerik:RadMap.Provider>
        </telerik:RadMap>
    </Grid>
</UserControl>

All the best,
Andrey Murzov
the Telerik team