• [アーティクル]

この記事は機械翻訳されたものです。

XAML と C++

C++/CX と XAML の概要 (機械翻訳)

Andy Rich

コード サンプルのダウンロード

コードは、まず並べ替えの高速アルゴリズムを設計するために素晴らしいですしかし、それは必ずしも、見た目のよい UI を作成する最良の方法ではないし、C++ 開発者のためのマイクロソフトによって提供される UI 技術はこの設定を反映しています。 Microsoft UI 技術に最後の重要なアップグレード 2008 年にリリース、c++ スタイルのリボン コントロールを提供する MFC コントロールの新しいセットでした。 その前に Windows フォームは、Microsoft .NET Framework ベースの UI 技術最初に Visual Studio .NET 2002 年 2 月リリースされました。 強力ですが、両方これらの技術は主に UI 要素の作成し、データの密結合と UI 要求した基になるコードに集中しました。

近年では、c# および Visual Basic の開発者にその UI 技術 XAML ベースの UI フレームワーク (Windows Presentation Foundation または WPF と Silverlight) の形での重要なアップグレードを楽しんだ。 これらのフレームワークの開発者は新しいオプションの UI デザイン、それらは UI が提示されるだろう方法について、心配することなくが、自分たちのアルゴリズムをコードする自由を与えて、その背後にあるコードを心配することがなく、UI を設計する自由をもたらした。 最後に、Windows 8 では、C++ 開発者 Windows 8 のためのアプリケーションを構築する、現代、XAML ベースの UI フレームワークの利点を取ることができます。

なぜ XAML ですか？

XAML は、コードでの UI の構築方法を理解することなくがアプリケーションの外観を定義することができる XML ベースのマークアップ言語です。 Windows ランタイム (WinRT) は、実行時にこの情報を解析し、適切なコントロールのクラスを作成および UI ツリー構築します。 コードをこれらのオブジェクトを操作することができ、正しく作成されて場合、UI の外観を大幅にすべて分離コードに触れることがなく変更できます。 これは、シーンの背後のコード上で動作する開発者とアプリケーション自体の外観に焦点を当てて UI デザイナー間の分業を容易にします。

Visual Studio 2012 または緊密に統合されてブレンドでは、電源­ful デザイナー ツールを具体的には、XAML と HTML の操作に最適化されました。 ブレンドは、(アニメーションのデザインを含む) 複数の WYSIWYG コントロールを提供しますより多くのプロパティ XAML オブジェクトを Visual Studio 統合デザイナーよりも公開します。

なぜ C + + CX ですか？

開発者は、Windows ストア アプリケーションを書くときから選ぶべき技術の範囲がある：HTML と JavaScript、c# または Visual Basic を XAML、および C++。 C++ では、C + アプリを構築することができます + CX と XAML または DirectX、または両方の組み合わせ。 さらに、C + ではコンポーネントの書き込みなど、これらの技術のハイブリッド アプリケーションを作成できます c++/cli JavaScript/HTML が組み込まれて Windows ストア アプリケーションから使用して CX。

Windows ストア アプリケーションを記述するために C++ を選択するための理由の数です。 最初に、C + + CX にバインドする Windows ランタイムは 100 ％ ネイティブおよび参照カウントします。 これは非常に少ないオーバーヘッドを意味します。 第二に、C++ (ブースト) などの既存のライブラリを活用する機能があります。 最後に、C++ Windows ストアのアプリ内のネイティブの Direct2D と Direct3D サーフェス、ゲームや他のグラフィックを多用アプリケーションの優れたパフォーマンスを構築することができますをサポートします。 低オーバーヘッドと高パフォーマンスを持つのみアプリケーションをより速く実行することを意味しない; 消費電力を低減しより良いバッテリー寿命をユーザーを与えるスリムより少ない手順を使用して、同じタスクを達成するためにもできます。

こんにちは世界から C + + CX と XAML

Visual Studio 2012 Windows ストア アプリケーションの高度な機能を示すテンプレートの数を提供します。 グリッド テンプレートは機能満載のアプリケーションを複数のビューは、データ バインディング、高度な風景や肖像画の遷移をサポートし中断、機能を再開します。 しかし、基本原則を示すために非常に適していません。 代わりに、空白のアプリケーション (XAML) テンプレートを使用して新しい C++ Windows ストア アプリケーションを作成します。

アプリケーションが作成されたら、MainPage.xaml ソリューション エクスプ ローラーで検索してそれを開きます。 それ 2 つのペインに分割されて統合された XAML デザイナーで編集用に開きます。デザイン ビューは、UI のレンダリングと XAML ビューのコードを示しています。 どちらかのウィンドウを更新すると、他にも更新されます。 これは編集の容易にするためのコントロールをドラッグまたは正確にコードを編集して、レイアウトをコントロールする自由を与えます。

ツールボックスを開く一般的な XAML コントロールを展開して、TextBlock コントロールをデザイン サーフェイスにドラッグします。 [プロパティ] ウィンドウを開き、TextBlock コントロールのこのインスタンスをスタイリングのオプションを見つけることができます。 [名前] フィールドに名前を TextBlock"myText"これは XAML の X:name 属性に関連します。 この属性に TextBlock 名、他の場所での XAML ファイルと分離コードで参照できます。 そして、これが唯一のコントロール ページなので、あなたにもそれ非常に大きくする可能性があります：テキスト カテゴリを展開し、72px にフォント サイズを変更します。 最終的な結果のようになります図 1。 プロパティインスペクターでこれらの変更を行うと、XAML マークアップも更新されることがわかります。

TextBlock Control and Related XAML
図 1 TextBlock コントロールと関連する XAML

次に、Button コントロールをツールボックスからドラッグし、TextBlock の左にそれを置きます。 [プロパティ] ウィンドウで、[名] フィールドの右側にある稲妻アイコンをクリックして、ボタン コントロールの使用可能なイベントを表示し、クリック イベントのフィールドをダブルクリックします。 Visual Studio は、自動的に、適切なコールバックを生成し、分離コードをこのイベントに表示を切り替えます。 XAML ソース ビューでは、生成されるタグは次のようになります。

<Button Click="Button_Click_1" />

クリックを追加することによって、コードで同じことを達成できる = 属性は、XAML タグとその名前を提供するまたはオートコンプリートはあなたのための 1 つを選択することができます。 いずれかの方法では、イベントを右クリックし、移動する分離コードに移動するイベント ハンドラーを選択できます。

今、次のコードへのコールバックを追加します。

this->myText->Text =
    "Hello World from XAML!";

ビルドして、ボタンをクリックすると、コールバックが、TextBlock 内のテキストを変更することを確認するアプリケーションを実行 (図 2)。

Updated TextBlock
図 2 TextBlock を更新

これを起こらせる魔法を脱構築するいくつかの時間を過ごすので多くはここでは、舞台裏で行きます。

何は C + + CX ですか？

C + + CX はネイティブ C++ と Windows ランタイムとの相互運用性、言語の拡張機能です。 それを定義し、インスタンス化およびまだネイティブの C++ 機能と構文に精通しているへのアクセスを提供しながら、実行時にオブジェクトを使用することができます完全にネイティブのバインドです。 図 3 の基本的な概念を示します。 (C + が c++/cli CX は多くの類似点を C + +/共通言語インフラストラクチャまたは CLI 構文は、それ別々 と 100 ％ ネイティブの言語の拡張機能です)。

図 3 C + + CX の概念

概念 Description
インターフェイス クラス インターフェイスを実装するオブジェクトへの呼び出しをサポートする abstract メソッドの宣言。
ref クラス C + + を使用して宣言参照カウントのクラス インターフェイスを実装するために使用される Windows ランタイムで CX キーワード。
^ 「帽子」または「ハンドル」と呼ばれる、ref クラスおよびインターフェイスで使用するためのスマート ポインターです; それを自動的にインクリメント、デクリメント カウントを適切に参照します。
ref の新しい 式「(構成要素) は、WinRT クラスをアクティブに」。
既定の名前空間 基本型の定義 (uint32、float64) WinRT 型にマップが含まれます。
プラットフォームの名前空間 基本的な相互運用モデル Windows ランタイムを提供する型定義が含まれている (オブジェクト ^、文字列 ^)。
影響を受けるもの クラスのフイールド; それはゲッターとセッターのオプション機能の構成され、フィールドのように動作します。 (たとえば、TextBlock オブジェクト テキスト プロパティもあります。)

部分クラスと XAML コードの生成でソリューション エクスプ ローラーで XAML MainPage クラスの部分定義を含む MainPage.xaml.h に移動します。

public ref class MainPage sealed
{
public:
  MainPage();
protected:
  virtual void OnNavigatedTo(
    Windows::UI::Xaml::Navigation::NavigationEventArgs^ e) override;
private:
  void Button_Click_1(
    Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
};

これは、編集したり (たとえば、Page クラスにいくつかのデータ メンバーを追加する場合は) 変更定義の部分です。 以前のクリック イベントをダブルクリックしたときの Button_Click_1 イベント ハンドラーの宣言がこのクラスの定義に Visual Studio によって挿入されたことに注意してください。

MainPage クラス名を右クリックし、定義へ移動] を選択します。 2 つの結果を参照してくださいする必要があります。MainPage.xaml.h と MainPage.g.h の部分定義で定義します。 XAML コンパイラ MainPage.xaml を解析し、MainPage.g.h を生成する場合、ビルド中に 2 番目の定義が生成されます。 MainPage.xaml.cpp には MainPage.xaml.h には、順番にこの生成されたファイルが含まれていますが含まれます。 これらのクラス定義は、最後のクラスを生成するために結合されます。 この手法は、両方のユーザーとコード ジェネレーターのクラス定義に情報を挿入する許可します。

MainPage.g.h で発見 MainPage の部分の定義に移動します。

partial ref class MainPage : public ::Windows::UI::Xaml::Controls::Page,
  public ::Windows::UI::Xaml::Markup::IComponentConnector
{
public:
  void InitializeComponent();
  virtual void Connect(int connectionId, ::Platform::Object^ target);
private:
  bool _contentLoaded;
  private: ::Windows::UI::Xaml::Controls::TextBlock^ myText;
};

この x: 名前ファイルを生成することを見ることができます"myText"= 属性には TextBlock myText という名前のクラス メンバーを生成するために XAML コンパイラを起こしています。 ここでも MainPage ページ Windows XAML 基本クラスから継承し、IComponentConnector インターフェイスを実装を観察することができます。 (IComponent­コネクタと接続の関連のメソッドはその何のクリック イベントを Button_Click_1 コールバックにワイヤーです)。

データ バインディングでは C + + CX データ バインディングは、コードとデータをあなたの UI を簡単に配線できるように、強力な概念です。 また、データ、コード、UI 間の優れた抽象化を提供する高度な設計パターン モデル-ビュー-ビューモデル (MVVM) などもできます。

C + + CX、データをさまざまな方法でバインドするためのクラスを有効にすることができます。

  • 属性クラスをバインド可能な属性
  • ICustomPropertyProvider インターフェイスを実装します。
  • IMap を実装する < 文字列 ^、オブジェクト ^ > インターフェイス

バインド可能な属性に焦点を当てるでしょうが、一部のシナリオではより適切なために、他のインタ フェースを述べた。 特に、のみデータ バインド クラスはパブリックとしてマークされている場合、バインド可能な属性は適切なデータ バインディング情報を生成します。 バインドできるプライベート クラスをするたびに、記載されているその他のインターフェイスの 1 つを実装する必要があります。

アプリケーションでは、プロジェクトを右クリックして追加クラスの追加ウィザードを表示するクラスを選択する新しいクラスを追加します。 ないオプションの C + +/（これは何が必要） CX クラスので、人の名前を付け、ネイティブ クラスを追加。 Visual Studio は、Person.h と Person.cpp のクラスを生成し、それらをプロジェクトに追加する必要があります。

Person クラスにいくつかの変更が必要 (で実証図 4)。

図 4 の Person クラスの定義

// person.h
#pragma once
namespace App12 {
  [Windows::UI::Xaml::Data::Bindable]
  public ref class Person sealed
  {
  public:
    Person(void);
    property Platform::String^ Name;
    property Platform::String^ Phone;
  };
}
// person.cpp
#include "pch.h"
#include "person.h"
using namespace App12;
Person::Person(void)
{
  Name = "Maria Anders";
  Phone = "030-0074321";
}
  • クラス定義は ref クラスにクラスから変更されます。
  • Ref クラスはパブリックと sealed としてマークされます。 「パブリック」XAML コンパイラがこのクラスの検索し、データ バインディング情報を生成する必要があります。 また、C + + CX パブリック シールされていないクラス、基本クラスなしをサポートしていないので、クラスをシールする必要があります。
  • デストラクターはこのクラスでは必要ないためデストラクター ~Person(void) が削除されます。
  • クラスは、アプリケーションによって使用される名前空間に移動されます (に示す例では図 4、名前空間"App12、"ですが、これによって異なります名前でプロジェクトを与えた）。 ため、連結するには (WinRT メタデータ ルールを満たすために） 属性、クラス、名前空間である必要があります。
  • クラスのクラス [Windows::UI::Xaml::Data::Bin­カリ]。 この属性に XAML コンパイラがデータ バインド情報のクラスを生成することを示します。
  • 2 つのプロパティの型 Platform::String ^。名前と電話番号が追加されます。 (プロパティのみデータ バインドすることができます)。

今、MainPage.xaml、最初の下の 2 番目の TextBlock を追加、同様にスタイルします。 XAML では、2 つの Textblock の Text 属性のテキストに変更「{バインディング名}」= 本文「{バインド電話}」=。 これは、名前、電話上のデータ バインドされたオブジェクトという名前のプロパティを見つけるために UI を指示、それらに、クラスのテキスト フィールドに適用。 XAML がするようになります図 5。 (テキスト属性にデータ バインディングを変更すると、彼らは、デザイナーには; を表示しているとき彼らはもはやが内容あります。 これは予想です。)

Data Binding in XAML
図 5 データ バインドを XAML

次に、MainPage.xaml.h、Person.h を含む、プライベートの datamember Person 型の追加 ^ MainPage クラスへ。 それは m_Person 名前します。 最後に、MainPage.xaml.cpp では OnNavigatedTo メソッドでは、次のコードを追加します。

m_Person = ref new Person;
this->DataContext = m_Person;

この datacontext を設定して適切な場所であるのでちょうどこのページが画面に表示される前に XAML ランタイム OnNavigatedTo メソッドを呼び出します。 このコードは、Person クラスの新しいインスタンスを作成し、MainPage オブジェクトにバインドします。 アプリケーションを再度実行し、名前と電話番号のプロパティを TextBlock のテキスト属性に適用されていることを参照してくださいする必要があります。

データ バインド インフラストラクチャは、データ バインド オブジェクトのプロパティの内容を変更した場合に通知するも提供します。 Button_Click_1 メソッドは、次のコードを変更します。

this->m_Person->Name = "Anders, Maria";

アプリケーションを再度実行し、ボタンをクリックした場合は、TextBlock のコンテンツが変更されないことがわかります。 これらの内容が更新される人のクラスが INotify を実装する必要­PropertyChanged インターフェイス。

INotifyPropertyChanged 1 つの項目があります。PropertyChanged 型 PropertyChangedEventHandler のという名前のイベント ^。 Name プロパティ、trivial プロパティから (ユーザー指定のバッキング ストアを含む) を完全に定義されたプロパティにプロパティが変更されたときにこのイベントを発生させるをサポートする変更する必要もあります。 また、それが呼び出されたときにこのイベントが発生する NotifyPropertyChanged という名前に便利な関数を追加します。 これは、複数のプロパティは、多くの場合の通知が必要ために、リファクタリングを平凡です。 実装したものを図 6 に示します。 (この例はのみに全数の Name プロパティを提供します。 同様の変更電話プロパティのようにする必要があります。)

図 6 人全数の名前プロパティ クラス

// person.h
#pragma once
namespace App12 {
  namespace WUXD = Windows::UI::Xaml::Data;
  [WUXD::Bindable]
  public ref class Person sealed : WUXD::INotifyPropertyChanged
  {
  public:
    Person(void);
    property Platform::String^ Name {
      Platform::String^ get();
      void set(Platform::String^ value);
    }
    property Platform::String^ Phone;
    virtual event WUXD::PropertyChangedEventHandler^ PropertyChanged;
  private:
    void NotifyPropertyChanged(Platform::String^ prop);
    Platform::String^ m_Name;
  };
}
// person.cpp
#include "pch.h"
#include "person.h"
using namespace App12;
using namespace Platform;
using namespace WUXD;
Person::Person(void)
{
  Name = "Maria Anders";
  Phone = "030-0074321";
}
String^ Person::Name::get(){ return m_Name; }
void Person::Name::set(String^ value) {
  if(m_Name != value) {
    m_Name = value;
    NotifyPropertyChanged("Name");
  }
}
void Person::NotifyPropertyChanged(String^ prop) {
  PropertyChangedEventArgs^ args = 
    ref new PropertyChangedEventArgs(prop);
  PropertyChanged(this, args);
}

ボタンがクリックしてされたとき INotifyPropertyChanged 変更と、アプリケーションを再度実行で名前の変更が結果する必要があります。

Itemscontrol とコレクションの C + + CX と XAML

XAML は、豊富なデータことができますコントロールなどの UI コントロール オブジェクトのコレクションにバインドできます。 これらは総称して Itemscontrol として呼ばれます。 私は上の 1 つ特に、ListView と呼ばれる焦点を合わせます。

MainPage.xaml を開き、ListView クラスがそれを取り付け、ルート グリッド オブジェクトの内容を削除します。 そのクラスの myListView ここに示すように名前を付けます。

<!-- ListView inside MainPage -->
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">*
  <ListView x:Name="myListView" />
</Grid>

コレクションの C + + CX 、Windows のランタイム コレクション クラス; を提供しません。 のみ、その他のコレクション用インターフェイスを提供します。 各投影法 (JavaScript、c#/Visual Basic と C + +/CX)、独自のコレクション クラスを提供します。 C + + CX、これらの実装 （これはすでに空のアプリケーション テンプレートの pch.h に含まれている） collection.h ヘッダーで発見します。 Platform::Collections 名前空間で定義する 2 つの主要なコレクション クラスがあります。Platform::Collections::Vector <T> リストのデータ、および < T, U > Platform::Collections::Map を表すため 辞書を表現するため。 Itemscontrol は、一般的に、iterable リスト オブジェクトを期待して、ベクター <T> このシナリオでは適切です。

MainPage.xaml.cpp に、OnNavigatedTo メソッド"ref に新しい"ベクトル変更 < 人 ^ > いくつかのクラスの人とそれを埋めます。 それは myListView の ItemsSource プロパティを割り当てます。

void MainPage::OnNavigatedTo(NavigationEventArgs^ e)
{
  (void) e; // Unused parameter
  auto vec =
    ref new Platform::Collections::Vector<Person^>;
  vec->Append(ref
    new Person("Maria Anders","030-0074321"));
  vec->Append(ref new Person("Ana Trujillo","(5) 555-4729"));
  // etc.
...
myListView->ItemsSource = vec;
}

ListView のスタイリング最後に、我々 それぞれの個々 の要素のスタイルを設定する方法、ListView を伝える必要があります。 ListView の ItemsSource をコレクション内の各要素を反復処理、適切な UI を生成し、その DataContext はその要素にバインドします。 ListView のスタイルには、その ItemTemplate に示すように定義する必要があります図 7。 テンプレート内のテキストのプロパティがデータ バインドの人物オブジェクトを適切な必要があります。

図 7 ListView 内側 MainPage スタイル ItemTemplate で

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
  <ListView x:Name="myListView">
    <ListView.ItemTemplate>
      <DataTemplate>
        <StackPanel Orientation="Vertical">
          <TextBlock Text="{Binding Name}" FontSize="20" />
          <TextBlock Text="{Binding Phone}" FontSize="12" />
        </StackPanel>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>
</Grid>

ビルドしてこのアプリケーションを実行すると、それのようになります図 8。

The Finished ListView
図 8 完成 ListView

その他の詳細

参照を XAML の Windows 8 と C + + CX は、現時点でやや不足しています。 詳細については、XAML には、多くの同じ概念を適用し、多くのコントロールと同様に呼ばれる XAML Silverlight では、話の参照、または同じを探してお勧めし、同じ機能があります。 いくつかの翻訳や通訳が必要なので、分離コードこれらの参照を c# では、されます。 これは主には機械的な操作ですが、.NET 基本クラス ライブラリで表される機能に実行に C ランタイム ライブラリ、標準テンプレート ライブラリやその他の C++ ライブラリ (または Windows ランタイム) これらのタスクを達成するために調べる必要があります。 幸いにも、これらのライブラリのすべての素敵な C + でプレイ c++/cli CX。

Windows ストアのアプリは特にグリッド アプリケーションと分割アプリケーションを作成する他の偉大なリソース テンプレートの Visual Studio の 2012 年に利用可能です。 これらのテンプレートはうまく作られているアプリケーションの多くの高度な機能を示し、彼らの秘密を解読する基になるフレームワークの理解の促進につながることができます。

最後に、プロジェクト「ヒロで、」C++ と XAML を使用して書かれて大規模なアプリケーションを見ることをお勧めします。 コードとドキュメントのこのアプリケーションで見つけることができます hilo.codeplex.com。 このプロジェクトは、Microsoft パターンによって開発された ＆ チームの慣行し、近代的な標準の C++ を示します; 彼らは Windows ストア アプリケーションで使用できるように、既存の C++ ライブラリの移植。 C + を使用するとき多くのベスト プラクティスと c++/cli CX。

C + で何ができるを垣間見ることを与えてくれたを願って c++/cli CX と XAML、しかし、これは表面だけです。 任意の新しい技術では、マニュアルやフォーラムを閲覧多く夜遅くまでを過ごすに期待できるようにとあなたの鼻の技術的な本で埋められます。 しかし、パワーと機能の C + +/CX と XAML はもっと学ぶ価値があります。 彼らははるかに少ない時間で豊かな、高速なアプリケーションを作成できます。

Andy Richマイクロソフトのソフトウェア開発エンジニアで、C++ フロント エンド コンパイラをテストする最後の 9 年間を費やしてきた。 最も最近、彼は 1 つのプライマリのテスターの C + だった c++/cli 言語拡張機能の CX と結合された XAML と C++ シナリオのテストで XAML チームと密接に働いた。

この記事のレビュー、次技術専門家のおかげで。ティム ・ ホイヤー、マリアン Luparu、タレク ・ Madkour