Wie programmiert man mehrere Größen von Bildschirmen in uwp?

Question

Hallo, ich entwickle eine App auf Universal Windows 10 App-Plattform, und wenn ich einige Objekte auf dem XAML-Fenster und wenn die Bildschirmgröße ändern bleibt es wie es war, so ist es die neue Bildschirmgröße passt und wenn ich es beheben, ist es passen Sie die alte Bildschirmgröße an und ich brauche die APP, um universell zu sein.

mein XAML-Code:

<Page 
x:Class="App17.MainPage" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="using:App17" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d"> 

<Grid Loaded="Grid_Loaded"> 

    <Grid.Background> 
     <ImageBrush Stretch="UniformToFill" ImageSource="Assets/backPHONE.jpg"/> 
    </Grid.Background> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="55*"/> 
     <RowDefinition Height="9*"/> 
    </Grid.RowDefinitions> 
    <RelativePanel> 
    <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="41,155,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="128" Width="360" Text="test 123" FontFamily="Century Gothic" FontStretch="UltraExpanded" FontStyle="Italic" FontSize="26" Tapped="textBlock_Tapped" TextAlignment="Center"/> 
    <ComboBox x:Name="comboBox" HorizontalAlignment="Left" Margin="84,700,0,-666.8" VerticalAlignment="Top" Width="264" SelectionChanged="comboBox_SelectionChanged" Height="32" Grid.Row="1"> 
     <ComboBoxItem Content="test" IsSelected="True"/> 
    </ComboBox> 
    <TextBlock x:Name="textBlock2" HorizontalAlignment="Left" Margin="164,675,-2.8,-665" TextWrapping="Wrap" Text="test" VerticalAlignment="Top" Height="20" Width="120" Grid.Row="1" SelectionHighlightColor="#FFF10000" FontFamily="Century Gothic" FontSize="12" FontStretch="UltraExpanded" FontStyle="Italic" Foreground="White"/> 
    </RelativePanel> 
</Grid> 

dank

Answer 1

Sie mit

http://www.wintellect.com/devcenter/jprosise/using-adaptivetrigger-to-build-adaptive-uis-in-windows-10

Answer 2

Lassen Sie mich zwei Möglichkeiten vorstellen, um verschiedene Bildschirmgrößen handhaben im Zusammenhang verwenden AdaptiveTriggers müssen Universal Windows 10 Apps.

1. Adaptive Trigger - Sie können sie verwenden, um Ihr Layout an verschiedene Gerätefamilien anzupassen - zum Beispiel können Sie festlegen, wie Ihre Seite auf dem Smartphone aussieht und während die App auf dem PC gestartet wird. Im Folgenden habe ich versucht, einige kurze Anweisungen hinzuzufügen, wie Sie sie verwenden können.

a) Wenn Sie Visual Studio geöffnet haben, klicken Sie bitte rechts auf den MainPage.xaml und wählen Sie "Design in Mischung ...":

b) Gehen Sie auf "Staaten" -Reiter und Auswahlsymbol (rot markierte Rechteck unten) als „Statusgruppe hinzufügen“:

c) Nun müssen Sie Zustand hinzufügen, so klicken Sie auf das Symbol neben „Visuelles Nehmensgruppe“, wie unten gezeigt:

d) Fügen Sie nun zwei Zustand: "Mobile" und "Desktop", wie unten dargestellt:

e) Der letzte Schritt ist minimale Fensterbreite einzustellen, wenn die Bildschirmgröße zu erfassen, geändert wird:

f) Jetzt können Sie minimale Fensterbreite für die "mobile" Zustand gesetzt: Typ wie unten Bitte 320 (denken Sie daran, dass diese effektive Pixel nicht physisch sind)

Sobald Sie auf „OK“ Visuelles Staat für „Mobile“ klicken wird konfiguriert. die gleichen oben genannten Schritte tun, sondern für „Desktop“ Zustand und Typ 1024 für minimale Fensterbreite:

Jetzt kann ich zwischen zwei Zuständen umschalten und das Design für jeden von ihnen einstellen: (Beachten Sie, dass zur Zeit ausgewählter Zustand ist mit roten rectange markiert):

1. Gerätefamilienordner - Sie können zwei separate Ansichten für Pages angeben, jedoch mit einem Code dahinter. Dies kann hilfreich sein, wenn Sie Ihr Design speziell für mobile Geräte und zum Beispiel für PCs erstellen müssen.

a) Recht auf das Projekt klicken und neue falder hinzufügen namens "DeviveFamily-Mobile":

b) Neuen XAML-Ansicht genannt die gleiche wie Ihre vorherigen Seite - in meinem Fall ist „Mainpage“:

c) Jetzt haben Sie eine Code-behind-Klasse, aber zwei getrennte Ansichten, die entsprechende Gerätefamilie angewandt werden:

Ich hoffe, dass es Ihnen hilft, zu beginnen. Sie können auch sehr gut Channel9 Video anschauen oder my blog besuchen, wo ich versuche, eine Menge hilfreicher Proben im Zusammenhang mit UWP zu präsentieren.