x:Load 属性x:Load attribute

スタートアップ、ビジュアル ツリーの作成、XAML アプリのメモリ使用量を最適化するには、x:Load を使用します。You can use x:Load to optimize the startup, visual tree creation, and memory usage of your XAML app. x:Load の使用には、Visibility と同様の効果があります。ただし、要素が読み込まれていない場合はメモリが解放され、内部的に小さなプレースホルダーを使ってビジュアル ツリー内の場所がマークされます。Using x:Load has a similar visual effect to Visibility, except that when the element is not loaded, its memory is released and internally a small placeholder is used to mark its place in the visual tree.

x:Load 属性が指定された UI 要素の読み込み/アンロードには、コードを使用することも、x:Bind 式を使用することもできます。The UI element attributed with x:Load can be loaded and unloaded via code, or using an x:Bind expression. これは、表示頻度の低い要素や条件付きで表示される要素のコストを削減するのに役立ちます。This is useful to reduce the costs of elements that are shown infrequently or conditionally. Grid や StackPanel などのコンテナーに x:Load を使用した場合は、コンテナーおよびすべての子がグループとして読み込まれ、アンロードされます。When you use x:Load on a container such as Grid or StackPanel, the container and all of its children are loaded or unloaded as a group.

XAML フレームワークによる遅延要素の追跡では、x:Load 属性が指定された要素ごとに、プレースホルダー分として約 600 バイトがメモリ使用量に追加されます。The tracking of deferred elements by the XAML framework adds about 600 bytes to the memory usage for each element attributed with x:Load, to account for the placeholder. したがって、この属性を過剰に使うと実際のパフォーマンスが低下する可能性があります。Therefore, it's possible to overuse this attribute to the extent that your performance actually decreases. この属性は、非表示にする必要がある要素のみに対して使用することをお勧めします。We recommend that you only use it on elements that need to be hidden. コンテナーに対して x:Load を使用した場合、その効果があるのは x:Load 属性を指定した要素のみです。If you use x:Load on a container, then the overhead is paid only for the element with the x:Load attribute.

重要

X: 負荷属性では、Windows 10 バージョン 1703 (Creators Update) 以降を使用できます。The x:Load attribute is available starting in Windows 10, version 1703 (Creators Update). x:Load を使用するには、Visual Studio プロジェクトの対象とする最小バージョンを Windows 10 Creators Update (10.0、ビルド 15063) にする必要があります。The min version targeted by your Visual Studio project must be Windows 10 Creators Update (10.0, Build 15063) in order to use x:Load.

XAML 属性の使用方法XAML attribute usage

<object x:Load="True" .../>
<object x:Load="False" .../>
<object x:Load="{x:Bind Path.to.a.boolean, Mode=OneWay}" .../>

要素の読み込みLoading Elements

要素を読み込むには、いくつかの方法があります。There are several different ways to load the elements:

  • x:Bind 式を使用して読み込み状態を指定します。Use an x:Bind expression to specify the load state. この式は、要素を読み込む場合は true、アンロードする場合は false を返す必要があります。The expression should return true to load and false to unload the element.
  • 要素に対して定義した名前を指定して FindName を呼び出します。Call FindName with the name that you defined on the element.
  • 要素に対して定義した名前を指定して GetTemplateChild を呼び出します。Call GetTemplateChild with the name that you defined on the element.
  • VisualState で、x:Load をターゲットに設定している Setter または Storyboard アニメーションを使います。In a VisualState, use a Setter or Storyboard animation that targets the x:Load element.
  • 任意の Storyboard のアンロード済み要素をターゲットに設定します。Target the unloaded element in any Storyboard.

注: 要素のインスタンス化が開始されたら、UI 途切れたりすぎる場合、一度に多く作成することになるため、UI スレッドで作成されます。NOTE: Once the instantiation of an element has started, it is created on the UI thread, so it could cause the UI to stutter if too much is created at once.

上に示したいずれかの方法で遅延要素が作成されると、以下の動作が発生します。Once a deferred element is created in any of the ways listed previously, several things happen:

  • 要素の Loaded イベントが生成されます。The Loaded event on the element is raised.
  • x:Name のフィールドが設定されます。The field for x:Name is set.
  • 要素に対する任意の x:Bind バインドが評価されます。Any x:Bind bindings on the element are evaluated.
  • 遅延要素を含むプロパティに関するプロパティ変更通知を受信するように登録した場合は、通知が生成されます。If you have registered to receive property change notifications on the property containing the deferred element(s), the notification is raised.

要素のアンロードUnloading elements

要素をアンロードするには:To unload an element:

  • x:Bind 式を使用して読み込み状態を指定します。Use an x:Bind expression to specify the load state. この式は、要素を読み込む場合は true、アンロードする場合は false を返す必要があります。The expression should return true to load and false to unload the element.
  • Page または UserControl で UnloadObject を呼び出し、オブジェクト参照を渡します。In a Page or UserControl, call UnloadObject and pass in the object reference
  • Windows.UI.Xaml.Markup.XamlMarkupHelper.UnloadObject オブジェクト参照を渡します。Call Windows.UI.Xaml.Markup.XamlMarkupHelper.UnloadObject and pass in the object reference

オブジェクトが読み込まれると、ツリー内でプレース ホルダーに置き換えられます。When an object is unloaded, it will be replaced in the tree with a placeholder. オブジェクトのインスタンスは、すべての参照が解放されるまでメモリ内に残ります。The object instance will remain in memory until all references have been released. Page/UserControl に対する UnloadObject API は、codegen で確保されている参照が x:Name および x:Bind 用に解放されるように設計されています。The UnloadObject API on a Page/UserControl is designed to release the references held by codegen for x:Name and x:Bind. アプリ コードで追加の参照を確保している場合は、これらも解放する必要があります。If you hold additional references in app code they will also need to be released.

要素が読み込まれると、要素関連の状態がすべて破棄されるため、x:Load を Visibility の最適化バージョンとして使用する場合は、すべての状態をバインド経由で適用するか、コードによって Loaded イベントの発生時に再適用する必要があります。When an element is unloaded, all state associated with the element will be discarded, so if using x:Load as an optimized version of Visibility, then ensure all state is applied via bindings, or is re-applied by code when the Loaded event is fired.

制限Restrictions

x:Load を使う際の制限事項は次のとおりです。The restrictions for using x:Load are:

  • 定義する必要があります、 X:name 要素にそこにある必要がありますを後で、要素を見つけることです。You must define an x:Name for the element, as there needs to be a way to find the element later.
  • x:Load は、UIElement または FlyoutBase から派生した型に対してのみ使用できます。You can only use x:Load on types that derive from UIElement or FlyoutBase.
  • PageUserControl、または DataTemplate のルート要素に x:Load を使用することはできません。You cannot use x:Load on root elements in a Page, a UserControl, or a DataTemplate.
  • ResourceDictionary 内の要素に x:Load を使用することはできません。You cannot use x:Load on elements in a ResourceDictionary.
  • XamlReader.Load で読み込まれた Loose XAML に x:Load を使用することはできません。You cannot use x:Load on loose XAML loaded with XamlReader.Load.
  • 親要素を移動すると、読み込まれていない要素はすべて消去されます。Moving a parent element will clear out any elements that have not been loaded.

注釈Remarks

入れ子になった要素に x:Load を使用することはできますが、最も外側の要素から実体化する必要があります。You can use x:Load on nested elements, however they have to be realized from the outer-most element in.  親が実体化される前に子要素を実体化しようとすると、例外が生成されます。 If you try to realize a child element before the parent has been realized, an exception is raised.

通常は、最初のフレームに表示できないものを遅延させることをお勧めします。Typically, we recommend that you defer elements that are not viewable in the first frame. 遅延対象の候補を見つけるための指針の 1 つは、**Visibility** が折りたたまれた状態で作成されている要素を探すことです。 A good guideline for finding candidates to be deferred is to look for elements that are being created with collapsed **Visibility**. また、ユーザーの操作によってトリガーされる UI は、遅延できる要素がないか探す対象として適しています。Also, UI that is triggered by user interaction is a good place to look for elements that you can defer.

ListView の遅延要素に注意してください。この場合、遅延要素により起動時間が短縮しますが、作成する内容によっては、パンのパフォーマンスも低下することがあります。Be wary of deferring elements in a ListView, as it will decrease your startup time, but could also decrease your panning performance depending on what you're creating. パンのパフォーマンスを向上させる方法については、{x:Bind} マークアップ拡張 および x:Phase 属性 に関するドキュメントをご覧ください。If you are looking to increase panning performance, see the {x:Bind} markup extension and x:Phase attribute documentation.

x:Load と同時に x:Phase 属性を使った場合、要素または要素ツリーが実体化されると、バインディングが現在のフェーズまで (現在のフェーズを含めて) 適用されます。If the x:Phase attribute is used in conjunction with x:Load then, when an element or an element tree is realized, the bindings are applied up to and including the current phase. x:Phase に指定されたフェーズが、要素の読み込み状態に影響を与えたり、制御したりすることはありません。The phase specified for x:Phase does affect or control the loading state of the element. パンの一部としてリスト項目がリサイクルされると、実現した要素は、アクティブな他の要素と同じように機能し、コンパイル済みバインド ( {x:Bind} バインディング) は同じルール (フェージングを含む) を使って処理されます。When a list item is recycled as part of panning, realized elements will behave in the same way as other active elements, and compiled bindings ({x:Bind} bindings) are processed using the same rules, including phasing.

一般的なガイドラインでは、必要なパフォーマンスが得られていることを確認するために、作業の前と後にアプリのパフォーマンスを測定します。A general guideline is to measure the performance of your app before and after to make sure you are getting the performance that you want.

Example

<StackPanel>
    <Grid x:Name="DeferredGrid" x:Load="False">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <Rectangle Height="100" Width="100" Fill="Orange" Margin="0,0,4,4"/>
        <Rectangle Height="100" Width="100" Fill="Green" Grid.Column="1" Margin="4,0,0,4"/>
        <Rectangle Height="100" Width="100" Fill="Blue" Grid.Row="1" Margin="0,4,4,0"/>
        <Rectangle Height="100" Width="100" Fill="Gold" Grid.Row="1" Grid.Column="1" Margin="4,4,0,0"
                   x:Name="one" x:Load="{x:Bind (x:Boolean)CheckBox1.IsChecked, Mode=OneWay}"/>
        <Rectangle Height="100" Width="100" Fill="Silver" Grid.Row="1" Grid.Column="1" Margin="4,4,0,0"
                   x:Name="two" x:Load="{x:Bind Not(CheckBox1.IsChecked), Mode=OneWay}"/>
    </Grid>

    <Button Content="Load elements" Click="LoadElements_Click"/>
    <Button Content="Unload elements" Click="UnloadElements_Click"/>
    <CheckBox x:Name="CheckBox1" Content="Swap Elements" />
</StackPanel>
// This is used by the bindings between the rectangles and check box.
private bool Not(bool? value) { return !(value==true); }

private void LoadElements_Click(object sender, RoutedEventArgs e)
{
    // This will load the deferred grid, but not the nested
    // rectangles that have x:Load attributes.
    this.FindName("DeferredGrid"); 
}

private void UnloadElements_Click(object sender, RoutedEventArgs e)
{
     // This will unload the grid and all its child elements.
     this.UnloadObject(DeferredGrid);
}