Xaml-environment-setup

XAML-環境設定

Microsoftは、XAMLに2つの重要なツールを提供しています-

• ビジュアルスタジオ
• 発現ブレンド

現在、両方のツールでXAMLを作成できますが、事実、Visual Studioは開発者により多く使用され、Expression Blendは依然としてデザイナーにより多く使用されています。

Microsoftは、https://www.visualstudio.com/en-us/downloads/download-visual-studio-vs.aspxからダウンロードできるVisual Studioの無料バージョンを提供しています

注-このチュートリアルでは、主にWPFプロジェクトとWindowsストアアプリを使用します。 ただし、Visual Studioの無料版はWindowsストアアプリをサポートしていません。 そのためには、Visual Studioのライセンスバージョンが必要になります。

インストール

以下の手順に従って、システムにVisual Studioをインストールします-

• ファイルをダウンロードした後、インストーラーを実行します。 次のダイアログボックスが表示されます。

Visual Studioダイアログボックス

• [インストール]ボタンをクリックすると、インストールプロセスが開始されます。

インストール

• インストールプロセスが正常に完了すると、次の画面が表示されます。

Visual Studioセットアップ完了

• このダイアログボックスを閉じて、必要に応じてコンピューターを再起動します。
• [スタート]メニューからVisual Studioを開き、次のダイアログボックスを表示します。 準備のためだけに、初めて時間がかかります。

Visual Studioの[スタートメニュー]

すべてが完了すると、Visual Studioのメインウィンドウが表示されます。

メインウィンドウ

実装に向けた最初のステップ

簡単な実装から始めましょう。 以下の手順に従ってください-

• [ファイル]→[新規]→[プロジェクト]メニューオプションをクリックします。

プロジェクトメニュー

• 次のダイアログボックスが表示されます-

ダイアログボックス

• [テンプレート]で、[Visual C＃]を選択し、[WPFアプリケーション]を選択します。 プロジェクトに名前を付けて、[OK]ボタンをクリックします。
• mainwindow.xamlファイルでは、デフォルトで次のXAMLタグが書き込まれます。 これらのタグはすべて、このチュートリアルの後半で理解します。

<Window x:Class = "FirstStepDemo.MainWindow"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:local = "clr-namespace:FirstStepDemo"
   mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604">

   <Grid>

   </Grid>
</Window>

デフォルトでは、グリッドはページの後の最初の要素として設定されます。

Grid要素の下にボタンとテキストブロックを追加しましょう。 これは object element syntax と呼ばれ、左山括弧の後にインスタンス化する名前（たとえばボタン）が続き、コンテンツプロパティを定義します。 コンテンツに割り当てられた文字列がボタンに表示されます。 次に、ボタンの高さと幅をそれぞれ30と50に設定します。 同様に、Textブロックのプロパティを初期化します。

次に、設計ウィンドウを見てください。 ボタンが表示されます。 次に、F5キーを押してこのXAMLコードを実行します。

<Window x:Class = "FirstStepDemo.MainWindow"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:local = "clr-namespace:FirstStepDemo"
   mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604">

   <Grid>
      <Button Content = "First Button" Height = "30" Width = "80"/>
      <TextBlock Text = "Congratulations you have successfully build your first app"
         Height = "30" Margin = "162,180,122,109"/>
   </Grid>

</Window>

上記のコードをコンパイルして実行すると、次のウィンドウが表示されます。

最初のボタン

おめでとうございます！ 最初のボタンを設計しました。