Windows 10 Dev - XAML性能

应用程序的性能,例如应用程序在启动时出现的速度或导航以显示下一个内容等非常重要.

应用程序的性能可能受到许多人的影响事情,包括XAML渲染引擎解析你的应用程序中的所有XAML代码的能力. XAML是一个非常强大的用于创建UI的工具,但是通过使用现在可在Windows 10应用程序中使用的新技术,它可以更加强大.

例如,在您的应用程序中,是某些东西,你想在页面加载时显示,然后不需要它.在启动时,您也可能不需要加载所有UI元素.

在Windows 10应用程序中,XAML中添加了一些新功能,从而提高了XAML性能.

通过以下技术可以改善任何通用Windows应用程序的性能;

  • Progressive渲染

  • 延迟加载

渐进式渲染

在Windows 10中, XAML中引入了两个新的非常酷的功能.它们是 :

x:Bind

这是用于绑定的XAML中引入的新语法,其工作方式与绑定语法. x:Bind 有两个关键区别;它提供了编译时语法验证和更好的性能.

X:阶段

它提供了在数据中优先处理XAML控件呈现的功能模板.每个UI元素可能只指定了一个阶段.如果是这样,那将适用于元素上的所有绑定.如果未指定阶段,则假定阶段为0.

在通用Windows平台(UWP)应用程序中,这两个新功能可提高性能.它也可以用于迁移到Windows 10的现有Windows 8.x应用程序.

以下是雇员对象与 GridView 绑定的示例使用 x:Bind 关键字.

<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定义的.因此,在第一阶段,将呈现名称,然后将呈现标题.

以下是 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:阶段 x:Bind 用于逐步呈现 ListView GridView 项目并改善平移体验.

延迟加载

延迟加载是一种技术,可以通过减少启动时XAML UI元素的数量来最小化启动加载时间.一个应用程序.如果您的应用程序包含30个UI元素,并且用户在启动时不需要所有这些元素,则所有这些不需要的元素可以通过延迟来节省一些加载时间.

x:DeferLoadStrategy ="Lazy"延迟元素及其子元素的创建,这会减少启动时间,但会略微增加内存使用量.

可以实现延迟元素/通过使用在元素上定义的名称调用 FindName 创建.

创建延迟元素后,会发生几件事情并减去;

  • 元素上的Loaded事件将被引发.

  • 任何将评估元素上的绑定.

  • 如果应用程序已注册为在包含延迟元素的属性上接收属性更改通知,则通知将被提出.

以下是一个例子,其中 x:DeferLoadStrategy ="Laz y"用于包含四个文本块的网格,在您加载它之前不会在应用程序启动时加载.

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

以下程序是click事件实现,其中网格加载在应用程序主页上.

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

上面的代码在编译和执行时,你只会看到一个按钮. Textblocks 未在启动时加载.

UWP Different Loading

现在,当您单击显示元素按钮时,它将加载文本块,这将提高应用程序的启动性能.

UWP Different Loading Exe