ScrollView and Grid

Bug Reports
1

Hi guys ,i have to build complex screens using grid system, but i also want these screens to be scrollable.
Using scrollView with grid cause the ui to be compacted to the top, the ui doesn’t expend itself to the available space.
Exemple using grid with scrollview:

<ScrollView>
  <Grid Rows="1*,0.5*,0.5*,2.7*,0.5*">
    <Rectangle Margin="0,10,0,0">
      <Image Height="118" Width="96" File="Assets/parkopoly/illu_sos.png" StretchMode="PixelPrecise"/>
    </Rectangle>
    <Text Value="Oups, que se passe t'il?" Alignment="Center" TextAlignment="Center" FontSize="17"  Margin="0,5,0,0"/>
    <Text Value="Quoi qu'il arrive, garde le sourire, ca se passera bien, on est la!" Alignment="Center" TextAlignment="Center" FontSize="14" Margin="20,0,20,0" TextWrapping="Wrap"/>

    <StackPanel ItemSpacing="25" Margin="0,10,0,0">
      <Rectangle Height="44" Margin="20,0,20,0" HitTestMode="LocalBounds" CornerRadius="10">
        <Clicked>
          <Callback Handler="{Avant}" Delay="0.3"/>
          <Scale Factor="0.99" Easing="QuinticIn" Duration="0.3" />
        </Clicked>
        <Text Value="Avant la mission" Alignment="Center" TextColor="#333" TextAlignment="Center" Font="Nuni" FontSize="16"/>
        <Stroke Width="1" Brush="#333"/>
      </Rectangle>
      <Rectangle Height="44" Margin="20,0,20,0" HitTestMode="LocalBounds" CornerRadius="10">
        <Clicked>
          <Scale Factor="0.95" Easing="QuinticIn" Duration="0.1" />
        </Clicked>
        <Text Value="Probleme avec le client" Alignment="Center" TextColor="#333" TextAlignment="Center" Font="Nuni" FontSize="16"/>
        <Stroke Width="1" Brush="#333"/>
      </Rectangle>
      <Rectangle Height="44" Margin="20,0,20,0" HitTestMode="LocalBounds" CornerRadius="10">
        <Clicked>
          <Scale Factor="0.95" Easing="QuinticIn" Duration="0.1" />
        </Clicked>
        <Text Value="Probleme avec le garage" Alignment="Center" TextColor="#333" TextAlignment="Center" Font="Nuni" FontSize="16"/>
        <Stroke Width="1" Brush="#333"/>
      </Rectangle>
      <Rectangle Height="44" Margin="20,0,20,0" HitTestMode="LocalBounds" CornerRadius="10">
        <Clicked>
          <Scale Factor="0.95" Easing="QuinticIn" Duration="0.3" />
        </Clicked>
        <Text Value="Probleme sur la route" Alignment="Center" TextColor="#333" TextAlignment="Center" Font="Nuni" FontSize="16"/>
        <Stroke Width="1" Brush="#333"/>
      </Rectangle>
    </StackPanel>

    <StackPanel ItemSpacing="10" Alignment="Center" Margin="0,0,0,5" Orientation="Horizontal">
      <Circle Height="26" Width="26" Color="#AEDD6B">
        <DropShadow/>
        <Text Value="&#xe0cd;" Alignment="Center" FontSize="18" Font="Icomoon" TextAlignment="Center" TextColor="White" />
      </Circle>
      <Text Value="Nous appeler"  FontSize="14" Alignment="Center" TextAlignment="Center">
        <Rectangle Layer="Background" Height="1" Margin="0,20,0,0" Color="#eee"/>
      </Text>
    </StackPanel>
  </Grid>
</ScrollView>

Results: http://prntscr.com/exqjd7

Without using scrollView the screen is just perfect : http://prntscr.com/exqk4g

2

The property Rows="1*,0.5*,0.5*,2.7*,0.5*" specifies a proportional size for all of the rows. This proportional size is always calculated from the current available space (the size of the parent). Inside a vertical ScrollView though the Grid is not given a fixed size, it is requested for it’s size so the ScrollView knows what area it needs to scroll. This means the proportional rows have no basis to assing their size, thus ending up as zero-size.

Basic rule: you can’t have proportional sized, or stretched items, in the the direction of scrolling (ScrollView) or stacking (StackPanel).

If the grid must be auto-sized you should use Rows="auto,auto,auto,auto,auto" or simply DefaultRow="auto". Or you can use fixed sizes for the rows.