Sizing the RadMap correctly

[Reid]

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

[Andrey]

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

[Reid]

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

[Andrey]

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

[Reid]

Thanks for clearing that up.