Navigation Bar

4 posts, 1 answers
  1. Abdulhameed
    Abdulhameed avatar
    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?
  2. Answer
    Andrey
    Admin
    Andrey avatar
    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!

  3. DevCraft banner
  4. Abdulhameed
    Abdulhameed avatar
    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 ......
  5. Andrey
    Admin
    Andrey avatar
    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: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 >>

Back to Top