Windows 10 開發 - XAML 效能

上一頁
下一頁

應用程式的效能，例如應用程式啟動速度或導航顯示下一段內容的速度等，非常重要。

應用程式的效能可能會受到許多因素的影響，包括 XAML 渲染引擎解析應用程式中所有 XAML 程式碼的能力。XAML 是建立 UI 的強大工具，但透過使用 Windows 10 應用程式中現在可用的新技術，可以使其更強大。

例如，在您的應用程式中，某些內容您希望在頁面載入時顯示，之後不再需要。也可能在啟動時不需要載入所有 UI 元素。

在 Windows 10 應用中，XAML 中添加了一些新功能，這些功能提高了 XAML 效能。

可以使用以下技術提高任何通用 Windows 應用程式的效能：

  • 漸進式渲染
  • 延遲載入

漸進式渲染

在 Windows 10 中，XAML 引入了兩個全新且非常酷的功能。它們是：

x:Bind

這是 XAML 中引入的一種用於繫結的新語法，其工作方式與Binding語法幾乎相同。x:Bind有兩個主要區別：它提供編譯時語法驗證和更好的效能。

x:Phase

它提供了一種優先渲染資料模板中 XAML 控制元件的功能。每個 UI 元素只能指定一個階段。如果指定了階段，則該階段將應用於元素上的所有繫結。如果未指定階段，則假定為階段 0。

在通用 Windows 平臺 (UWP) 應用程式中，這兩個新功能可提高效能。它也可以用於遷移到 Windows 10 的現有 Windows 8.x 應用程式。

下面是一個示例，其中員工物件使用x:Bind關鍵字與GridView繫結。

<Page 
   x:Class = "XAMLPhase.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local = "using:XAMLPhase" 
   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}"> 
      <GridView Name = "Presidents" ItemsSource = "{Binding}" Height = "300" 
         Width = "400" Margin = "50"> 
			
         <GridView.ItemTemplate> 
            <DataTemplate x:DataType = "local:Employee"> 
				
               <StackPanel Orientation = "Horizontal" Margin = "2"> 
                  <TextBlock Text = "{x:Bind Name}" Width = "95" Margin = "2" /> 
                  <TextBlock Text = "{x:Bind Title}" Width = "95" Margin = "2"  
                     x:Phase = "1"/> 
               </StackPanel> 
					
            </DataTemplate> 
         </GridView.ItemTemplate>
			
      </GridView> 
		
   </Grid> 
	
</Page>

在上例 XAML 程式碼中，x:Phase = "1" 與 Title 一起定義。因此，在第一階段，將渲染Name，然後渲染Title。

下面是 C# 中Employee 類的實現。

using System.Collections.ObjectModel; 
using System.ComponentModel; 
using System.Runtime.CompilerServices; 
using Windows.UI.Xaml.Controls;
  
// The Blank Page item template is documented at
   http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409 
	
namespace XAMLPhase {

   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   public sealed partial class MainPage : Page {
      public MainPage() {
         this.InitializeComponent(); 
         DataContext = Employee.GetEmployees(); 
      } 
   } 
	
   public class Employee : INotifyPropertyChanged {
      private string name; 
		
      public string Name {
         get { return name; } 
			
         set {
            name = value; 
            RaiseProperChanged(); 
         } 
      } 
		
      private string title; 
		
      public string Title {
         get { return title; }
			
         set {
            title = value; 
            RaiseProperChanged(); 
         } 
      }
		
      public static Employee GetEmployee() {
       
         var emp = new Employee() {
            Name = "Waqas", 
            Title = "Software Engineer" 
         };  
			
         return emp; 
      } 
		
      public event PropertyChangedEventHandler PropertyChanged;
		
      private void RaiseProperChanged( 
         [CallerMemberName] string caller = "") {
			
         if (PropertyChanged != null) {
            PropertyChanged(this, new PropertyChangedEventArgs(caller)); 
         } 
			
      } 
		
      public static ObservableCollection<Employee> GetEmployees() {
         var employees = new ObservableCollection<Employee>(); 
			
         employees.Add(new Employee() { Name = "Ali", Title = "Developer" }); 
         employees.Add(new Employee() { Name = "Ahmed", Title = "Programmer" }); 
         employees.Add(new Employee() { Name = "Amjad", Title = "Desiner" }); 
         employees.Add(new Employee() { Name = "Waqas", Title = "Programmer" }); 
         employees.Add(new Employee() { Name = "Bilal", Title = "Engineer" }); 
         employees.Add(new Employee() { Name = "Waqar", Title = "Manager" }); 
			
         return employees; 
      } 
		
   }
	
}

執行上述程式碼後，您將看到以下視窗。

XAML Phase

X:Phase與x:Bind一起用於增量渲染ListView和GridView項，並改善平移體驗。

延遲載入

延遲載入是一種技術，可用於透過減少應用程式啟動時的 XAML UI 元素數量來最大限度地減少啟動載入時間。如果您的應用程式包含 30 個 UI 元素，而使用者在啟動時不需要所有這些元素，則所有不需要的元素都可以透過延遲載入來節省一些載入時間。

x:DeferLoadStrategy = "Lazy" 會延遲建立元素及其子元素，這會減少啟動時間，但會略微增加記憶體使用量。

可以使用在元素上定義的名稱呼叫FindName來實現/建立延遲元素。

建立延遲元素後，將發生以下幾件事：

  • 將引發元素上的 Loaded 事件。

  • 將評估元素上的任何繫結。

  • 如果應用程式註冊為接收包含延遲元素的屬性上的屬性更改通知，則將引發該通知。

下面是一個示例，其中x:DeferLoadStrategy = "Lazy"用於包含四個文字塊的網格，並且在應用程式啟動時不會載入這些文字塊，直到您載入它。

<Page 
   x:Class = "UWPDeferredLoading.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:UWPDeferredLoading" 
   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}"> 
      <Grid x:Name = "DeferredGrid" x:DeferLoadStrategy = "Lazy" Margin = "50"> 
         <Grid.RowDefinitions> 
            <RowDefinition Height = "Auto" /> 
            <RowDefinition Height = "Auto" /> 
         </Grid.RowDefinitions> 
			
         <Grid.ColumnDefinitions> 
            <ColumnDefinition Width = "Auto" /> 
            <ColumnDefinition Width = "Auto" /> 
         </Grid.ColumnDefinitions>
			
         <TextBlock Height = "100" Width = "100" Text = "TextBlock 1" Margin = "0,0,4,4" /> 
			
         <TextBlock Height = "100" Width = "100" Text = "TextBlock 2" 
            Grid.Column = "1" Margin = "4,0,0,4" /> 
				
         <TextBlock Height = "100" Width = "100" Text = "TextBlock 3" 
            Grid.Row = "1" Margin = "0,4,4,0" /> 
				
         <TextBlock Height = "100" Width = "100" Text = "TextBlock 4" 
            Grid.Row = "1" Grid.Column = "1" Margin = "4,4,0,0" /> 
      </Grid> 
		
      <Button x:Name = "RealizeElements" Content = "Show Elements"  
         Click = "RealizeElements_Click" Margin = "50"/> 
			
   </Grid>   
	
</Page>

以下程式是單擊事件的實現，其中網格載入到應用程式主頁面上。

using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
 
// The Blank Page item template is documented at
   http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409  
	
namespace UWPDeferredLoading {

   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   public sealed partial class MainPage : Page {
      public MainPage() {
         this.InitializeComponent(); 
      }  
		
      private void RealizeElements_Click(object sender, RoutedEventArgs e) {
         this.FindName("DeferredGrid"); // This will realize the deferred grid 
      } 
		
   } 
	
}

編譯並執行上述程式碼後，您只會看到一個按鈕。文字塊不會在啟動時載入。

UWP Different Loading

現在，當您單擊顯示元素按鈕時，它將載入文字塊，這將提高應用程式的啟動效能。

UWP Different Loading Exe
列印頁面
上一頁
下一頁
廣告
© . All rights reserved.