Responsive Layout with multi resolution !

Question

I have this xaml code :
<Grid Margin="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Background="Navy" Grid.Row="0">
<Viewbox Margin="15,0,15,0">
<TextBlock Foreground="White" Text="Chỉnh sửa bài hát"
Style="{StaticResource HeaderTextBlockStyle}"
FontFamily="Segoe WP" />
</Viewbox>
</StackPanel>
<Grid Margin="10,5,10,0" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<TextBlock
Style="{StaticResource BaseTextBlockStyle}"
TextAlignment="Center"
Foreground="DarkGreen"
Text="Mã số" />
<TextBlock Text="{Binding ID}"
Foreground="Navy"
FontWeight="Light"
TextAlignment="Center"
FontSize="30" />
</StackPanel>
<StackPanel Grid.Row="1">
<TextBlock
Style="{StaticResource BaseTextBlockStyle}"
TextAlignment="Center"
Foreground="DarkGreen"
Text="Tên bài hát" />
<TextBox
BorderBrush="Silver"
TextAlignment="Center"
FontWeight="Light"
Name="TxtFullName"
Text="{Binding FullName}"
BorderThickness="1.5" />
</StackPanel>
<StackPanel MaxHeight="300" Grid.Row="2">
<TextBlock
Style="{StaticResource BaseTextBlockStyle}"
TextAlignment="Center"
Foreground="DarkGreen"
Text="Lời bài hát" />
<TextBox
TextAlignment="Center"
BorderBrush="Silver"
BorderThickness="1.5"
AcceptsReturn="True"
MaxHeight="250"
MinHeight="250"
FontWeight="Light"
Name="txtLyric"
Text="{Binding Lyric,Converter={StaticResource DecodeLyrics}}"
TextWrapping="Wrap"
ScrollViewer.VerticalScrollBarVisibility="Auto" />
</StackPanel>
<StackPanel Grid.Row="3">
<TextBlock
Style="{StaticResource BaseTextBlockStyle}"
TextAlignment="Center"
Foreground="DarkGreen"
Text="Ca sĩ - Nhạc Sĩ" />
<TextBox
BorderBrush="Silver"
TextAlignment="Center"
FontWeight="Light"
Name="txtAuthor"
Text="{Binding Author}"
BorderThickness="1.5" />
</StackPanel>
</Grid>
</Grid
It display nice in my lumia 620 ( I debug my app on real device).. But I don't sure it will nice with other resolution.I think the page will have more blank space at the bottom when display on other larger resolution  because I set
3rd StackPanel's Maxheight = 300px.
How could I make it more flexible?
OmegaVN - Window Phone Application Researching and Development

Answer 1

Hi OmegaVN,
In my mind if we want to let our user interface appears correctly on various screen resolutions, then we can try to create a Dynamic layout, for more information, please try to refer to the following article:
http://msdn.microsoft.com/en-us/library/windows/apps/jj207042(v=vs.105).aspx#BKMK_DynamicLayout .
Then based on your xaml code, it seems that you have already created a Dynamic layout, in my mind your UI will appear correctly based the different screen resolutions.
Best Regards,
Amy Peng
We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click
HERE to participate the survey.
You should  look at my 3rd StackPane .. I set it's heigh equal 300px ... I think my layout above will have more blank space at the bottom when display on other resolution
I don't have another real device to test it (even can't run emulator ) :(
OmegaVN - Window Phone Application Researching and Development