2016-07-14 11 views
1

Ich bin Anfänger bei UWP,UWP Element Dimensionierung

Wie können wir Größen zu Elementen geben, die sowohl in Telefonen als auch auf dem Desktop korrekt funktionieren?

. Das Textblockthema muss also 200 Pixel im Desktop und 100 Pixel im Telefon betragen.

Antwort

1

Es gibt einige Möglichkeiten, um ein schönes und reibungsloses Layoutverhalten auf dem Telefon und Desktop zu erreichen.

  1. Adaptive löst
  2. DeviceFamily Folders
  3. XAML Behaviors

veröffentlichte ich zwei Blog-Posts darüber, wie gutes Design Ergebnisse zu erzielen:

https://mobileprogrammerblog.wordpress.com/2015/10/23/universal-windows-10-application-with-tailored-design-part-1/

https://mobileprogrammerblog.wordpress.com/2015/11/23/universal-windows-10-application-with-tailored-design-part-2/

https://blogs.windows.com/buildingapps/2015/11/30/xaml-behaviors-open-source-and-on-uwp/

ich auf jeden Fall auch Channel9 Video watchin von Dante Gagne über maßgeschneiderte UWP Design empfehlen:

https://channel9.msdn.com/Events/Visual-Studio/Visual-Studio-2015-Final-Release-Event/Universal-Windows-Platform-Tailored-Experiences?ocid=SessionsInEvent

+0

Stackoverflow nicht der Ort ist, wo Sie leiten den Verkehr zu Ihrem privaten Blog. Stattdessen sollten die Antworten in sich geschlossen sein und relevant bleiben, sollten die externen Ressourcen nicht verfügbar sein. Bitte fassen Sie neben den Links auch die wichtigsten Punkte zusammen. – IInspectable

2

Lesen Sie mehr über die Adaptive Layout in UWP

Auf den Punkt gebracht, würden Sie die neue Adaptive-Trigger verwenden, um Ihre Benutzeroberfläche zu ändern basierend auf der Bildschirmbreite.

<VisualStateManager.VisualStateGroups> 
    <VisualStateGroup> 
     <VisualState x:Name="Narrow"> 
      <VisualState.StateTriggers> 
       <AdaptiveTrigger MinWindowWidth="0" /> 
      </VisualState.StateTriggers> 
      <VisualState.Setters> 
       <Setter Target="MyText.Width" Value="100" /> 
      </VisualState.Setters> 
     </VisualState> 
     <VisualState x:Name="WideScreen"> 
      <VisualState.StateTriggers> 
       <AdaptiveTrigger MinWindowWidth="500" /> 
      </VisualState.StateTriggers> 
      <VisualState.Setters> 
       <Setter Target="MyText.Width" Value="200" /> 
      </VisualState.Setters> 
     </VisualState> 
    </VisualStateGroup> 
</VisualStateManager.VisualStateGroups>