Responsive Layout


In out app we have an info section for our movie Cards, but the space is limited and on small screens we have problem with scaling. The code is :

<Panel ux:Name="bottomPanel" Width="80%" MaxWidth="550" Height="80%" Opacity="0">
      	<Rectangle Layer="Background" Color="White" CornerRadius="5" />
      	<Scaling ux:Name="bottomPanelScaling" Y="0.8" X="0.85" />

		<StackPanel Alignment="Bottom" ContentAlignment="Top" Height="25%" Margin="5" ItemSpacing="5">
			<!-- TODO Bad Scalling -->
			<Grid Columns="8*,2*">
				<Text Value="{shorterTitle}" Font="appFont" FontSize="20" TextWrapping="Wrap" Column="0" TextColor="#000" TextAlignment="Left" Margin="3,0,0,0" />
				<Grid Columns="auto,auto" >
                    <Image File="icons/duration.png" Height="17" Width="17" Color="Black" Alignment="Center"/>
                    <Text Value="{runtime}" Font="appFont" FontSize="14" Column="1" TextColor="#000" Opacity="0.7" Margin="3,4,0,0" Alignment="Center"/>

			<Grid Columns="7*,3*">
    			<Text Value="{lessGenres}" Column="0" Font="appFont" FontSize="12" TextWrapping="Wrap" TextColor="#000" TextAlignment="Left" Opacity="0.6" Margin="3,0,0,0" />
				<Rectangle Width="100%" Height="20" Column="1">
					<Panel Height="20" Alignment="Left">
						<Image File="icons/Stars2.png" Height="20"/>
						<Rectangle Width="{starWidth}" Height="18" Color="#ffb700" Alignment="Left"/>
					<Image File="icons/Stars.png" Height="20"/>
			<Grid Rows="auto,auto" Columns="auto,auto" Alignment="Bottom" Margin="3,0,0,0">
				<Text Value="Director: " Font="appFont" FontSize="14" Row="0" Column="0" TextColor="#000" Alignment="Left" Margin="0,0,0,0" />
				<Text Value="{directors}" Font="appFont" FontSize="14" Row="0" Column="1" TextColor="#000" Opacity="0.7" TextAlignment="Center" Alignment="CenterLeft" Margin="3,0,0,0" />
				<Text Value="Starring: " Font="appFont" FontSize="14" Row="1" Column="0" TextColor="#000" TextAlignment="Center" Alignment="Left" Margin="0,0,0,0" />
				<Text Value="{cast}" Font="appFont" FontSize="14" Row="1" Column="1" TextColor="#000" Opacity="0.7" TextAlignment="Center" Alignment="CenterLeft" Margin="3,0,0,0" />
      	<DropShadow />

and the BAD! result is :

how can we make it work across a wide range of screens ?


You should probably avoid setting absolute values for height and width. See the docs for other options available to you.