Windows Phone 8でアダプティブUIを作成する方法は？

Question

小さな画面ではビューが小さくなり、大きくなると完全になるように見たいと思っています。たとえば、480x800の電話機で表示される画像では、サポートセクション（それ以外の部分はスクロール可能）になるはずですが、wxgaでは人事部門をカバーする必要があります。 XAMLコードは、私が評判を持っていけないとイメージを開いてください

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

です。 http://i.stack.imgur.com/lLQR7.png

Answer 1

適応レイアウトでは、余白を慎重に使用してください。各要素またはコンテナは、水平および垂直の配置に基づいて配置されます。エレメントがアライメントを使用して配置できない場合は、グリッドの行と列の定義を使用してエレメントを配置してください。マージンを使用して、要素を行または列の定義から正確な距離に配置します。マージンはハードコーディングされており、実行時には変更されないため、使用しないでください。行と列の定義では*を要素として使用するか、（コードに示すように）グリッドを分割します。*はスクリーンレイアウトのサイズを考慮し、この場合はグリッドサイズに係数12を掛けます。また、行の列または高さの幅を設定したくない場合は、*の代わりにAutoを使用できます。実行時に自動的にコードが編集され、すべてのscreentypeで機能します。また、scrollviewerを使用している間は、あなたのコードのように高さを与えないようにしてください。私はグリッドの行を追加し、スクロールビューアに画面をフルストレッチさせました。

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

また、サポートコンテンツを整理するためにピボットコントロールを使用することもできます。このようにして、ユーザーは必要な情報をスワイプできます。コメント欄に私に知らせてくれるものがあれば