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 - - - - Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release! - -

Telerik Forums / UI for Silverlight Forum / Map /

Navigation Bar

Telerik UI for Silverlight
Resources Buy Try

4 posts, 1 answers

Abdulhameed

27 posts

Member since:
Jul 2010

Posted 27 Jul 2011 Link to this post

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

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

Please advise?
Answer
Andrey
Admin

1681 posts

Posted 29 Jul 2011 Link to this post

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

Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!
Abdulhameed

27 posts

Member since:
Jul 2010

Posted 30 Jul 2011 Link to this post

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
Admin

1681 posts

Posted 03 Aug 2011 Link to this post

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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>