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을 사용할 수 있으며 런타임 중에 열이 자동으로 할당되어 코드가 수정되고 모든 유형에 적용됩니다. 또한 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> 

은 또한 당신이 당신의 지원 콘텐츠를 구성하는 피벗 컨트롤을 사용할 수있다 : 다음은 수정 된 코드입니다. 이렇게하면 사용자가 제공해야하는 정보를 스 와이프 할 수 있습니다. 코멘트 섹션에 무엇이 있는지 알려주십시오.