Sizing the RadMap correctly

5 posts, 0 answers
  1. Reid
    Reid avatar
    317 posts
    Member since:
    Oct 2008

    Posted 23 Jun 2011 Link to this post

    Hello,

    I am new to this component and for the life of me cannot get the map to size to it's parent container.  It is in a StackPanel that is in a Grid.  If I set the height property explicitly it works, otherwise it stays at about an inch.  I am looking at the demos and see a RadMap sizing right with no code for sizing it.  So why my map is remaining an inch high is a mystery.

    <telerik:RadTabItem Header="Map" Margin="0,5,0,0" VerticalAlignment="Top" Height="21.96" Width="107.974" Cursor="Hand">                       
                            
      <Grid Name="MapTabGrid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="Auto">
         <Grid.RowDefinitions>
            <RowDefinition Height="48"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>                                    
      </Grid.RowDefinitions>
      <StackPanel Orientation="Horizontal" ForceCursor="True" IsHitTestVisible="True" Grid.Row="0" Margin="10">
           <Label VerticalAlignment="Center">Location Longitude :</Label>
           <TextBox Width="200" Background="#E3EFE3"></TextBox>
           <Label VerticalAlignment="Center">Location Latitude :</Label>
           <TextBox Width="200"  Background="#E3EFE3"></TextBox>
           <Button Width="86" Cursor="Hand" VerticalAlignment="Stretch" Height="30">Go</Button>
           <telerik:RadDropDownButton Width="86" Cursor="Hand" VerticalAlignment="Stretch" Height="30">Route
           <telerik:RadDropDownButton.DropDownContent>
              <ListBox>
               <ListBoxItem Content="Route from Selected" Width="150" Height="25" Background="#E3EFE3" Cursor="Hand" Margin="2"></ListBoxItem>
               <ListBoxItem Content="Route from Current" Width="150" Height="25" Background="#E3EFE3" Cursor="Hand" Margin="2"></ListBoxItem>
               <ListBoxItem Content="Route from Home" Width="150" Height="25" Background="#E3EFE3" Cursor="Hand" Margin="2"></ListBoxItem>
               <ListBoxItem Content="Route to Home" Width="150" Height="25" Background="#E3EFE3" Cursor="Hand" Margin="2"></ListBoxItem>
               <ListBoxItem Content="Store Route" Width="150" Height="25" Background="#E3EFE3" Cursor="Hand" Margin="2"></ListBoxItem>
              </ListBox>
            </telerik:RadDropDownButton.DropDownContent>
            </telerik:RadDropDownButton>
      </StackPanel>                      
      
                                         
                                      
                                    
      <telerik:RadMap Width="Auto" Name="radMapRoute1"  Grid.Row="1" Grid.RowSpan="2"
         VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 
         ZoomLevel="13" 
         MinZoomLevel="10" 
         MaxZoomLevel="14" Margin="15,15,15,413"Center="40.083319, -105.3505482" Background="{x:Null}" 
         ClipToBounds="False" HorizontalContentAlignment="Stretch" UseDefaultLayout="True">
           <telerik:RadMap.Provider>                                       
            <telerik:UriImageProvider GeoBounds="42.786, 23.17, 25, 14" />
           </telerik:RadMap.Provider>
      </telerik:RadMap>
      
      </Grid>                        
                                        
                             
      </telerik:RadTabItem>


    Here is the code.

    I hope you can point out what I am doing wrong.


    Thanks,
    Reid
  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 28 Jun 2011 Link to this post

    Hi Reid,

    I have created a sample solution using a code snippet you sent.
    I would recommend to use the star symbol in the second RowDefinition.Height value for using a weighted proportion of available space for the map. Also it seems the Margin-Bottom value of telerik:RadMap element is too large. I have corrected the code. The changed code is below.
           <telerik:RadTabItem Header="Map" Margin="0,5,0,0" VerticalAlignment="Top" Height="21.96" Width="107.974" Cursor="Hand">
     
               <Grid Name="MapTabGrid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="Auto">
                   <Grid.RowDefinitions>
                       <RowDefinition Height="48"></RowDefinition>
                       <RowDefinition Height="*"></RowDefinition>
                   </Grid.RowDefinitions>
                   <StackPanel Orientation="Horizontal" ForceCursor="True" IsHitTestVisible="True" Grid.Row="0" Margin="10">
                       <Label VerticalAlignment="Center">Location Longitude :</Label>
                       <TextBox Width="200" Background="#E3EFE3"></TextBox>
                       <Label VerticalAlignment="Center">Location Latitude :</Label>
                       <TextBox Width="200"  Background="#E3EFE3"></TextBox>
                       <Button Width="86" Cursor="Hand" VerticalAlignment="Stretch" Height="30">Go</Button>
                       <telerik:RadDropDownButton Width="86" Cursor="Hand" VerticalAlignment="Stretch" Height="30">Route
                           <telerik:RadDropDownButton.DropDownContent>
                               <ListBox>
                                   <ListBoxItem Content="Route from Selected" Width="150" Height="25" Background="#E3EFE3" Cursor="Hand" Margin="2"></ListBoxItem>
                                   <ListBoxItem Content="Route from Current" Width="150" Height="25" Background="#E3EFE3" Cursor="Hand" Margin="2"></ListBoxItem>
                                   <ListBoxItem Content="Route from Home" Width="150" Height="25" Background="#E3EFE3" Cursor="Hand" Margin="2"></ListBoxItem>
                                   <ListBoxItem Content="Route to Home" Width="150" Height="25" Background="#E3EFE3" Cursor="Hand" Margin="2"></ListBoxItem>
                                   <ListBoxItem Content="Store Route" Width="150" Height="25" Background="#E3EFE3" Cursor="Hand" Margin="2"></ListBoxItem>
                               </ListBox>
                           </telerik:RadDropDownButton.DropDownContent>
                       </telerik:RadDropDownButton>
                   </StackPanel>
     
     
     
     
                   <telerik:RadMap Width="Auto" Name="radMapRoute1"  Grid.Row="1" Grid.RowSpan="2"
    VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
    ZoomLevel="13"
    MinZoomLevel="10"
    MaxZoomLevel="14" Margin="15,15,15,15" Center="40.083319, -105.3505482" Background="{x:Null}"
    ClipToBounds="False" HorizontalContentAlignment="Stretch" UseDefaultLayout="True">
                       <telerik:RadMap.Provider>
                           <telerik:UriImageProvider GeoBounds="42.786, 23.17, 25, 14" />
                       </telerik:RadMap.Provider>
                   </telerik:RadMap>
     
               </Grid>
     
     
           </telerik:RadTabItem>

    Regards,
    Andrey Murzov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
  4. Reid
    Reid avatar
    317 posts
    Member since:
    Oct 2008

    Posted 29 Jun 2011 Link to this post

    Hello and thanks again.

    I have wrapped the map control into a user control.  When I added that user control to a new sample project it sized fine.  When I wrapped it in a StackPanel it shrunk.  Using only the Grid as you suggest solves it.

    Reid
  5. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 01 Jul 2011 Link to this post

    Hi Reid,

    The StackPanel does not set size to its children, but it sets its own size depending on the size of the children. The Grid has its own size and sets the size of the child objects.

    Greetings,
    Andrey Murzov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Reid
    Reid avatar
    317 posts
    Member since:
    Oct 2008

    Posted 01 Jul 2011 Link to this post

    Thanks for clearing that up.
Back to Top
UI for WPF is Visual Studio 2017 Ready