How to make adaptive UI in windows phone 8?

Question

I want to make view such that in small screens the view comes less and in large it should come full. for example in the image given below in 480 × 800 phone view should come till support section(with rest of it scrollable) whereas in wxga it should cover the human resource section. the xaml code is

 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0">
     <StackPanel>
         <TextBlock Text="Contact" FontSize="30" HorizontalAlignment="Center" Foreground="Black"></TextBlock>
         <ScrollViewer x:Name="scroll" Height="650">
             <StackPanel x:Name="stack">
                 <Border Background="#E66729" Padding="5">
                     <TextBlock  Text="Email" HorizontalAlignment="Center" FontSize="25"></TextBlock>
                 </Border>
                 <HyperlinkButton Margin="0,10,0,0"  Content="xxxxxxxx" Foreground="Blue"></HyperlinkButton>
                 <Border Margin="0,10,0,0" Background="#E66729" Padding="5">
                     <TextBlock  Text="Skype ID" HorizontalAlignment="Center" FontSize="25"></TextBlock>
                 </Border>
                 <TextBlock Text="xxxxxxxx" Foreground="Black" HorizontalAlignment="Center" FontWeight="SemiBold" FontSize="22"></TextBlock>
                 <Border Margin="0,10,0,0" Background="#E66729" Padding="5">
                     <TextBlock  Text="Numbers" HorizontalAlignment="Center" FontSize="25"></TextBlock>
                 </Border>
                 <StackPanel>
                     <StackPanel Orientation="Horizontal" Margin="0,5,0,0" HorizontalAlignment="Center">
                         <TextBlock Text="Sales:" Foreground="Black" FontSize="22" ></TextBlock>
                         <HyperlinkButton Content="+91-xxxxxx" Foreground="Blue"></HyperlinkButton>
                     </StackPanel>
                     <StackPanel Orientation="Horizontal"  Margin="0,5,0,0" HorizontalAlignment="Center">
                         <TextBlock Text="Sales:" Foreground="Black" FontSize="22" ></TextBlock>
                         <HyperlinkButton Content="+91-xxxxxx" Foreground="Blue"></HyperlinkButton>
                     </StackPanel>
                     <StackPanel Orientation="Horizontal"  Margin="0,5,0,0" HorizontalAlignment="Center">
                         <TextBlock Text="Care:" Foreground="Black" FontSize="22" ></TextBlock>
                         <HyperlinkButton Content="+91-xxxxxxxx" Foreground="Blue"></HyperlinkButton>
                     </StackPanel>
                     <StackPanel Orientation="Horizontal"  Margin="0,5,0,0" HorizontalAlignment="Center">
                         <TextBlock Text="HR:" Foreground="Black" FontSize="22" ></TextBlock>
                         <HyperlinkButton Content="+91-xxxxxxxxxx" Foreground="Blue"></HyperlinkButton>
                     </StackPanel>
                 </StackPanel>
                 <Border Margin="0,10,0,0" Background="#E66729" Padding="5">
                     <TextBlock  Text="Support" HorizontalAlignment="Center" FontSize="25"></TextBlock>
                 </Border>
                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                     <TextBlock Text="Care:" Foreground="Black" FontSize="22" ></TextBlock>
                     <HyperlinkButton Content="xxxxxxx"  Margin="0,5,0,0" Foreground="Blue"></HyperlinkButton>
                 </StackPanel>
                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                     <TextBlock Text="Email:" Foreground="Black" FontSize="22" ></TextBlock>
                     <HyperlinkButton Content="xxxxxxxxxxxx"  Margin="0,5,0,0" Foreground="Blue"></HyperlinkButton>
                 </StackPanel>
                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                     <TextBlock Text="Skype ID:"  Margin="0,5,0,0" Foreground="Black" FontSize="22" ></TextBlock>
                     <TextBlock Text="xxxxxxxx" FontSize="22" Foreground="Black"></TextBlock>
                 </StackPanel>
                 <Border Margin="0,10,0,0" Background="#E66729" Padding="5">
                     <TextBlock  Text="Human Resource" HorizontalAlignment="Center" FontSize="25"></TextBlock>
                 </Border>
                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                     <TextBlock Text="Hr:" Foreground="Black" FontSize="22" ></TextBlock>
                     <HyperlinkButton Content="xxxxxx" Foreground="Blue"></HyperlinkButton>
                 </StackPanel>
                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                     <TextBlock Text="Email:" Foreground="Black" FontSize="22" ></TextBlock>
                     <HyperlinkButton Content="xxxxxxxx" Foreground="Blue"></HyperlinkButton>
                 </StackPanel>
                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                     <TextBlock Text="Skype ID:" Foreground="Black" FontSize="22" ></TextBlock>
                     <TextBlock Text="orangemantra" Foreground="Black"></TextBlock>
                 </StackPanel>
             </StackPanel>
         </ScrollViewer>
     </StackPanel>
 </Grid>

please open the image as i dont have the reputation. https://i.stack.imgur.com/lLQR7.png

Take a look at http://aka.ms/wpsllarge for info and sample. – Peter Torr - MSFT Aug 15 '16 at 06:01 — Peter Torr - MSFT, Aug 15 '16 at 06:01

iam.Carrot · Accepted Answer · 2016-11-23T06:01:14.347

For adaptive layout make sure you use the margins carefully. And each element or container is placed based on it horizontal and vertical alignment. At any point if the element is not being able to be placed using the alignments, use grid row and column definitions to better place your elements. use margins to place elements at accurate distance from the row or column definitions. Try not using Margins because they are hardcoded and at runtime they would not change. In Row and Column definitions use * as a factor or dividing your grids (as shown in the code.) as the * keeps the screen layout size into consideration and multiplies the grid size with the factor 12 in this case. Also if you don't want to set the width of a column or height of a row, you can use Auto instead of * and during runtime, the column would be allocated automatically edited your code and made it work on all screentypes. Also while using scrollviewer make sure you avoid giving it a height (as in your code). I've added a grid row and made the scrollviewer to take full stretch of the screen. Here is the modified code:

 <Grid x:Name="ContactGrid" Margin="0,0,0,0">
     <Grid.RowDefinitions>
         <RowDefinition Height="*"/>
         <RowDefinition Height="12*"/>
     </Grid.RowDefinitions>

     <TextBlock Text="Contact" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30" Foreground="Black"/>
     <ScrollViewer x:Name="scroll" IsEnabled="True" Grid.Row="1">
         <Grid x:Name="ContentGrid">
             <StackPanel x:Name="stack">
                 <Border Background="#E66729" Padding="5">
                     <TextBlock Text="Email" HorizontalAlignment="Center" FontSize="25"/>
                 </Border>
                 <HyperlinkButton Margin="0,10,0,0"  Content="xxxxxxxx" Foreground="Blue"/>
                 <Border Margin="0,10,0,0" Background="#E66729" Padding="5">
                     <TextBlock  Text="Skype ID" HorizontalAlignment="Center" FontSize="25"/>
                 </Border>
                 <TextBlock Text="xxxxxxxx" Foreground="Black" HorizontalAlignment="Center" FontWeight="SemiBold" FontSize="22"/>
                 <Border Margin="0,10,0,0" Background="#E66729" Padding="5">
                     <TextBlock  Text="Numbers" HorizontalAlignment="Center" FontSize="25"/>
                 </Border>
                 <StackPanel>
                     <StackPanel Orientation="Horizontal" Margin="0,5,0,0" HorizontalAlignment="Center">
                         <TextBlock Text="Sales:" Foreground="Black" FontSize="22" />
                         <HyperlinkButton Content="+91-xxxxxx" Foreground="Blue"/>
                     </StackPanel>
                     <StackPanel Orientation="Horizontal"  Margin="0,5,0,0" HorizontalAlignment="Center">
                         <TextBlock Text="Sales:" Foreground="Black" FontSize="22" />
                         <HyperlinkButton Content="+91-xxxxxx" Foreground="Blue"/>
                     </StackPanel>
                     <StackPanel Orientation="Horizontal"  Margin="0,5,0,0" HorizontalAlignment="Center">
                         <TextBlock Text="Care:" Foreground="Black" FontSize="22" />
                         <HyperlinkButton Content="+91-xxxxxxxx" Foreground="Blue"/>
                     </StackPanel>
                     <StackPanel Orientation="Horizontal"  Margin="0,5,0,0" HorizontalAlignment="Center">
                         <TextBlock Text="HR:" Foreground="Black" FontSize="22" />
                         <HyperlinkButton Content="+91-xxxxxxxxxx" Foreground="Blue"/>
                     </StackPanel>
                 </StackPanel>
                 <Border Margin="0,10,0,0" Background="#E66729" Padding="5">
                     <TextBlock  Text="Support" HorizontalAlignment="Center" FontSize="25"/>
                 </Border>
                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                     <TextBlock Text="Care:" Foreground="Black" FontSize="22" ></TextBlock>
                     <HyperlinkButton Content="xxxxxxx"  Margin="0,5,0,0" Foreground="Blue"/>
                 </StackPanel>
                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                     <TextBlock Text="Email:" Foreground="Black" FontSize="22" />
                     <HyperlinkButton Content="xxxxxxxxxxxx"  Margin="0,5,0,0" Foreground="Blue"/>
                 </StackPanel>
                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                     <TextBlock Text="Skype ID:"  Margin="0,5,0,0" Foreground="Black" FontSize="22" />
                     <TextBlock Text="xxxxxxxx" FontSize="22" Foreground="Black"></TextBlock>
                 </StackPanel>
                 <Border Margin="0,10,0,0" Background="#E66729" Padding="5">
                     <TextBlock  Text="Human Resource" HorizontalAlignment="Center" FontSize="25"/>
                 </Border>
                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                     <TextBlock Text="Hr:" Foreground="Black" FontSize="22" />
                     <HyperlinkButton Content="xxxxxx" Foreground="Blue"/>
                 </StackPanel>
                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                     <TextBlock Text="Email:" Foreground="Black" FontSize="22" />
                     <HyperlinkButton Content="xxxxxxxx" Foreground="Blue"/>
                 </StackPanel>
                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                     <TextBlock Text="Skype ID:" Foreground="Black" FontSize="22" />
                     <TextBlock Text="orangemantra" Foreground="Black"/>
                 </StackPanel>
             </StackPanel>
         </Grid>
     </ScrollViewer>
 </Grid>

Also you can make use of Pivot control to organize your support content. This way a user can swipe through the information you need to provide. If there is anything let me know on the comments section

How to make adaptive UI in windows phone 8?

1 Answers1

Linked