如何在Windows Phone 8中創建自適應UI？

Question

我想要製作視圖，以便在小屏幕中視圖更少，更大更完整。例如在下面給出的480×800手機視圖中的圖像應該到支持部分（其餘部分可滾動），而在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而不是*，並且在運行時期間，該列將被分配，自動編輯您的代碼並使其適用於所有的screentypes。同時使用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> 

此外，您還可以使用Pivot控件組織您的支持內容。這樣用戶就可以滑過您需要提供的信息。如果有任何東西讓我知道評論部分