Responsive Layout

How-to Discussions
1

Hello,

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>
			</Grid>

			<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"/>
					</Panel>
					<Image File="icons/Stars.png" Height="20"/>
				</Rectangle>
            </Grid>
			<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" />
			</Grid>
		</StackPanel>
      	<DropShadow />
    </Panel>

and the BAD! result is :

file
QTA1gba6vMyj-image-1473604039571.PNG296×576

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

Thanks

2

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