การพัฒนา Windows 10 - Adaptive UI

แอปพลิเคชัน Universal Windows Platform (UWP) สามารถทำงานบนอุปกรณ์ต่างๆได้มากมายและแต่ละอุปกรณ์จะมีรูปแบบการป้อนข้อมูลความละเอียดหน้าจอความหนาแน่น DPI และคุณลักษณะเฉพาะอื่น ๆ

ใน Windows 10 ด้วยความช่วยเหลือของการควบคุมสากลแผงเค้าโครงและเครื่องมือใหม่คุณสามารถปรับ UI ของคุณให้เข้ากับอุปกรณ์ที่แอปพลิเคชันของคุณอาจทำงานได้อย่างง่ายดาย ตัวอย่างเช่นเมื่อแอปพลิเคชัน UWP ของคุณทำงานบนคอมพิวเตอร์เดสก์ท็อปอุปกรณ์เคลื่อนที่หรือบนแท็บเล็ตคุณสามารถปรับแต่ง UI เพื่อใช้ประโยชน์จากความละเอียดหน้าจอขนาดหน้าจอและความหนาแน่น DPI ที่แตกต่างกัน

ใน Windows 10 คุณสามารถกำหนดเป้าหมาย UI ของคุณไปยังอุปกรณ์ต่างๆได้อย่างง่ายดายด้วยคุณสมบัติดังต่อไปนี้ -

  • คุณสามารถปรับปรุง UI ของคุณสำหรับความละเอียดหน้าจอและขนาดหน้าจอที่แตกต่างกันโดยใช้แผงควบคุมแบบสากลและแผงเค้าโครง

  • การจัดการอินพุตทั่วไปช่วยให้คุณรับอินพุตผ่านทัชแพดปากกาเมาส์คีย์บอร์ดหรือคอนโทรลเลอร์เช่นคอนโทรลเลอร์ Microsoft Xbox

  • ด้วยความช่วยเหลือของเครื่องมือคุณสามารถออกแบบ UI แอปพลิเคชันของคุณที่สามารถปรับให้เข้ากับความละเอียดหน้าจอต่างๆได้

  • Adaptive scaling ปรับตามความละเอียดและความแตกต่างของ DPI ในอุปกรณ์ต่างๆ

ใน Windows 10 คุณสามารถจัดเรียงปรับขนาดและวางตำแหน่งแอปพลิเคชันในแบบที่คุณต้องการได้อย่างง่ายดาย นอกจากนี้ยังช่วยให้ผู้ใช้มีความยืดหยุ่นในการใช้แอปพลิเคชันของคุณในแบบที่ต้องการ ใน Windows 10 มีหลายวิธีในการนำเทคนิคการตอบสนองไปใช้ในแอปพลิเคชัน UWP ของคุณดังนั้นจึงดูดีไม่ว่าขนาดหน้าจอหรือหน้าต่างจะเป็นเท่าใดก็ตาม

VisualStateManager

ใน Windows 10 ไฟล์ VisualStateManagerคลาสมีกลไกใหม่สองแบบด้วยความช่วยเหลือซึ่งคุณสามารถใช้การออกแบบที่ตอบสนองในแอปพลิเคชัน UWP ของคุณได้ ใหม่VisualState.StateTriggers อนุญาตให้นักพัฒนาตรวจสอบเงื่อนไขบางอย่างเช่นความสูงของหน้าต่างหรือความกว้างของหน้าต่างแล้ว VisualState.Setters API กำหนดสถานะภาพเพื่อตอบสนองต่อเงื่อนไขบางประการเหล่านั้น

ให้เราดูตัวอย่างที่ระบุด้านล่างซึ่งมีการเพิ่มการควบคุมบางอย่างในแผงสแต็ก

<Page 
   x:Class = "UWPAdaptiveUI.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:UWPAdaptiveUI" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d"> 
	
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}">
      <VisualStateManager.VisualStateGroups>
		
         <VisualStateGroup>
			
            <VisualState>
				
               <VisualState.StateTriggers>
                  <!-- VisualState to be triggered when window 
                     width is >=720 effective pixels. -->
                  <AdaptiveTrigger MinWindowWidth = "720" />
               </VisualState.StateTriggers>
					
               <VisualState.Setters>
                  <Setter Target = "myPanel.Orientation" Value = "Horizontal" />
               </VisualState.Setters>
					
            </VisualState>
				
         </VisualStateGroup>
			
      </VisualStateManager.VisualStateGroups>
		
      <StackPanel x:Name = "myPanel" Orientation = "Vertical">
		
         <TextBlock Text = "Windows 10 Tutorials: Text block 1. " 
            Style = "{ThemeResource BodyTextBlockStyle}"/>
				
         <TextBlock Text = "Windows 10 Tutorials: Text block 2. " 
            Style = "{ThemeResource BodyTextBlockStyle}"/>
				
         <TextBlock Text = "Windows 10 Tutorials: Text block 3. " 
            Style = "{ThemeResource BodyTextBlockStyle}"/>
				
      </StackPanel> 
		
   </Grid>
	
</Page>

ตอนนี้ VisualStateManagerจะปรับการวางแนวของแผงสแต็กตามความกว้างของหน้าต่าง ถ้าความกว้าง> = 720 การวางแนวจะกลายเป็นแนวนอนมิฉะนั้นจะยังคงเป็นแนวตั้ง เมื่อรวบรวมและเรียกใช้โค้ดด้านบนคุณจะเห็นหน้าต่างต่อไปนี้ซึ่งมีบล็อกข้อความสามบล็อกตามลำดับแนวตั้ง

ให้เราปรับขนาดความกว้างของหน้าต่างด้านบนและคุณจะเห็นหน้าต่างต่อไปนี้ -

ตอนนี้คุณจะเห็นว่าบล็อกข้อความอยู่ในลำดับแนวนอน

RelativePanel

RelativePanelสามารถใช้เพื่อจัดวางองค์ประกอบ UI โดยแสดงความสัมพันธ์เชิงพื้นที่ระหว่างองค์ประกอบต่างๆ ให้เรายกตัวอย่างที่สร้างรูปสี่เหลี่ยมในแผงสัมพัทธ์

<Page 
   x:Class = "UWPAdaptiveUI.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:UWPAdaptiveUI" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d"> 
	
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
	
      <VisualStateManager.VisualStateGroups> 
		
         <VisualStateGroup> 
			
            <VisualState> 
				
               <VisualState.StateTriggers> 
                  <AdaptiveTrigger MinWindowWidth = "720" /> 
               </VisualState.StateTriggers> 
					
               <VisualState.Setters> 
                  <Setter Target = "GreenRect.(RelativePanel.RightOf)"
                     Value = "BlueRect" /> 
                  <Setter Target = "GreenRect.(RelativePanel.AlignRightWithPanel)" 
                     Value = "True" /> 
               </VisualState.Setters> 
					
            </VisualState> 
				
         </VisualStateGroup>
			
      </VisualStateManager.VisualStateGroups>
		
      <RelativePanel BorderBrush = "Gray" BorderThickness = "10"> 
         <Rectangle x:Name = "RedRect" Fill = "Red" MinHeight = "100" 
            MinWidth = "100"/> 
				
         <Rectangle x:Name = "BlueRect" Fill = "Blue" MinHeight = "100" 
            MinWidth = "100" RelativePanel.RightOf = "RedRect" /> 
				
         <!-- Width is not set on the green and yellow rectangles. 
            It's determined by the RelativePanel properties. --> 
				
         <Rectangle x:Name = "GreenRect" Fill = "Green" MinHeight = "100" 
            RelativePanel.Below = "BlueRect" RelativePanel.AlignLeftWith = "RedRect" 
            RelativePanel.AlignRightWith = "BlueRect"/> 
				
         <Rectangle Fill = "Yellow" MinHeight = "100" RelativePanel.Below = "GreenRect" 
            RelativePanel.AlignLeftWith = "BlueRect"
            RelativePanel.AlignRightWithPanel = "True"/> 
				
      </RelativePanel> 
		
   </Grid> 
	
</Page>

เมื่อโค้ดด้านบนถูกคอมไพล์และรันคุณจะเห็นหน้าต่างต่อไปนี้

เมื่อคุณปรับขนาดหน้าต่างด้านบนคุณจะเห็นว่าขณะนี้สี่เหลี่ยมผืนผ้าสีเขียวถูกปรับในแถวบนสุดทางด้านซ้ายของสี่เหลี่ยมผืนผ้าสีน้ำเงินดังที่แสดงด้านล่าง