Wie man adaptive UI in Windows Phone 8 machen?

Question

Ich möchte so sehen, dass in kleinen Bildschirmen die Ansicht weniger und in großen, sollte es voll kommen. zum Beispiel in der Abbildung unten in 480 × 800 Telefon Ansicht sollte bis Support Abschnitt (mit Rest davon scrollbar) kommen, während in WXGA sollte es die Personalabteilung abdecken. der XAML-Code ist

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

bitte das Bild öffnen, wie ich den Ruf nicht haben. http://i.stack.imgur.com/lLQR7.png

Answer 1

Für ein anpassungsfähiges Layout sollten Sie die Ränder sorgfältig verwenden. Und jedes Element oder jeder Container wird basierend auf seiner horizontalen und vertikalen Ausrichtung platziert. Wenn das Element nicht mithilfe der Ausrichtungen platziert werden kann, verwenden Sie die Raster- und Spaltendefinitionen, um Ihre Elemente besser zu platzieren. Verwenden Sie Ränder, um Elemente in exakter Entfernung von den Zeilen- oder Spaltendefinitionen zu platzieren. Verwenden Sie keine Margins, da sie fest codiert sind und sich zur Laufzeit nicht ändern. Verwenden Sie in Zeilen- und Spaltendefinitionen * als Faktor oder teilen Sie Ihre Raster (wie im Code gezeigt), da * die Bildschirmlayoutgröße berücksichtigt und in diesem Fall die Rastergröße mit dem Faktor 12 multipliziert. Auch wenn Sie nicht die Breite einer Spalte oder Höhe einer Zeile festlegen möchten, können Sie anstelle von * verwenden und während der Laufzeit würde die Spalte zugewiesen werden automatisch Ihren Code bearbeitet und es funktioniert für alle screentypes. Achten Sie auch darauf, dass Sie bei der Verwendung von scrollviewer keine Höhe angeben (wie in Ihrem Code). Ich habe eine Gitterreihe hinzugefügt und den Scrollviewer so eingerichtet, dass er den gesamten Bildschirm ausfüllt. Hier ist der modifizierte 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> 

Sie können auch Pivot-Steuerelement verwenden, um Ihre Support-Inhalte zu organisieren. Auf diese Weise kann ein Benutzer durch die Informationen blättern, die Sie bereitstellen müssen. Wenn es etwas gibt, lassen Sie es mich im Bereich Kommentare wissen