Windows10-development-xaml-performance

提供:Dev Guides
移動先:案内検索

Windows 10開発-XAMLパフォーマンス

起動時のアプリケーションの表示速度や、次のコンテンツを表示するためにナビゲートする速度など、アプリケーションのパフォーマンス。 はとても重要です。

アプリケーションのパフォーマンスは、アプリケーション内にあるすべてのXAMLコードを解析するXAMLレンダリングエンジンの機能など、多くの影響を受けます。 XAMLはUIを作成するための非常に強力なツールですが、Windows 10アプリケーションで利用できるようになった新しい手法を使用すると、より堅牢になります。

たとえば、アプリケーションには特定のものがあり、ページが読み込まれたときに表示したいが、後で必要にならないものがあります。 また、起動時にすべてのUI要素をロードする必要がない場合もあります。

Windows 10アプリでは、XAMLにいくつかの新機能が追加され、XAMLのパフォーマンスが向上しました。

ユニバーサルWindowsアプリケーションのパフォーマンスは、次の手法によって改善できます。

  • プログレッシブレンダリング
  • 遅延読み込み

プログレッシブレンダリング

Windows 10では、2つの新しい非常に優れた機能がXAMLに導入されています。 彼らは-

x:バインド

これは、バインディングに使用されるXAMLで導入された新しい構文で、 Binding 構文とほぼ同じように機能します。 x:Bind には2つの重要な違いがあります。コンパイル時の構文検証とパフォーマンスの向上を提供します。

X:フェーズ

データテンプレート内のXAMLコントロールのレンダリングを優先する機能を提供します。 各UI要素には、1つのフェーズのみを指定できます。 その場合、それは要素のすべてのバインディングに適用されます。 フェーズが指定されていない場合、フェーズ0が想定されます。

ユニバーサルWindowsプラットフォーム(UWP)アプリケーションでは、これら2つの新機能によりパフォーマンスが向上します。 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フェーズ

*X:Phase* と *x:Bind* を使用して、 *ListView* および *GridView* アイテムをインクリメンタルにレンダリングし、パン操作を改善します。

遅延読み込み

遅延読み込みは、アプリケーションの起動時にXAML UI要素の数を減らすことで起動読み込み時間を最小限に抑えるために使用できる手法です。 アプリケーションに30個のUI要素が含まれていて、ユーザーが起動時にこれらすべての要素を必要としない場合、必要のないすべての要素は、延期することでロード時間を節約できます。

*x:DeferLoadStrategy = "Lazy"* は、要素とその子の作成を遅らせます。これにより、起動時間が短縮されますが、メモリ使用量がわずかに増加します。

遅延要素は、要素で定義された名前で FindName を呼び出すことで実現/作成できます。

遅延要素が作成されると、いくつかのことが起こります-

  • 要素のLoadedイベントが発生します。
  • 要素上のすべてのバインディングが評価されます。
  • 遅延要素を含むプロパティのプロパティ変更通知を受信するようにアプリケーションが登録されている場合、通知が発生します。

以下に、4つのテキストブロックを含むグリッドに 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
      }

   }

}

上記のコードをコンパイルして実行すると、ボタンのみが表示されます。 Textblocks は起動時にロードされません。

UWPの異なるロード

[*要素の表示]ボタンをクリックすると、テキストブロックが読み込まれ、アプリケーションの起動パフォーマンスが向上します。

UWP Different Loading Exe