Windows 10開発-最初のアプリ

この章では、Windows 10でXAMLとC＃を使用して、ユニバーサルWindowsプラットフォーム（UWP）で最初のシンプルなアプリケーション "Hello world" を作成します。 Visual Studioで作成された単一のUWPアプリケーションをWindows 10デバイスで実行および実行する方法を示します。

以下の手順に従って、アプリの作成を開始しましょう。

Visual Studio 2015を起動します。
*ファイル*メニューをクリックし、*新規>プロジェクト*を選択します。

最初のアプリ

次の[新しいプロジェクト]ダイアログウィンドウが表示されます。ダイアログボックスの左ペインにさまざまなタイプのテンプレートが表示されます。

ブランクアプリ

 *左ペインに、ツリービューが表示されます。* [テンプレート]> [Visual C＃]> [Windows *]から[*ユニバーサルテンプレート*]を選択します。
* 中央のペインから、* Blank App（Universal Windows）*テンプレートを選択します
* [*名前]フィールドに *UWPHelloWorld* と入力して、プロジェクトに名前を付けます。
* [OK]をクリックして、新しいUWPプロジェクトを作成します。

UWPプロジェクト

Solution Explorer で新しく作成されたプロジェクトを確認できます。
これは空のアプリですが、多くのファイルが含まれているため、UWPアプリケーションの最小要件です。
MainPage.xaml および MainPage.xaml.cs は、アプリケーションの実行時に実行されます。
デフォルトでは、 MainPage.xaml ファイルには次の情報が含まれています。

<Page
   x:Class = ”UWPHellowWorld.MainPage”
   xmlns = ”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
   xmlns:x = ”http://schemas.microsoft.com/winfx/2006/xaml”
   xmlns:local = ”using:UWPHellowWorld”
   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>

</Page>

以下に示すのは、 MainPage.xaml.cs で利用可能なデフォルト情報です。

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;

using Windows.Foundation;
using Windows.Foundation.Collections;

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

//The Blank Page item template is documented at
   http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409

namespace UWPHellowWorld {

  ///<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();
      }
   }

}

以下のXAMLコードに示すように、テキストブロック、テキストボックス、ボタンを追加してみましょう。

<Page
   x:Class = ”UWPHellowWorld.MainPage”
   xmlns = ”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
   xmlns:x = ”http://schemas.microsoft.com/winfx/2006/xaml”
   xmlns:local = ”using:UWPHellowWorld”
   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}”>

      <StackPanel HorizontalAlignment = ”Center”>
         <TextBlock Text = ”Hello, world!”  Margin = ”20”  Width = ”200”
            HorizontalAlignment = ”Left”/>

         <TextBlock Text = ”Write your name.” Margin = ”20” Width = ”200”
            HorizontalAlignment = ”Left”/>

         <TextBox x:Name = ”txtbox”  Width = ”280” Margin = ”20”
            HorizontalAlignment = ”Left”/>

         <Button x:Name = ”button” Content = ”Click Me” Margin = ”20”
            Click = ”button_Click”/>

         <TextBlock x:Name = ”txtblock” HorizontalAlignment = ”Left”
            Margin = ”20”/>
      </StackPanel>

   </Grid>

</Page>

C＃のクリックイベントボタンを以下に示します。

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;

using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

//The Blank Page item template is documented at
   http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409

namespace UWPHellowWorld {

  ///<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 button_Click(object sender, RoutedEventArgs e) {
         if (txtbox.Text != “”)
            txtblock.Text = “Hello: “ + txtbox.Text;
         else
            txtblock.Text = “You have not write your name”;
      }

   }

}

UWPプロジェクトでは、 Design Window で device preview オプションを使用できます。このオプションを使用して、レイアウトを簡単に変更し、対象とするデバイスファミリのすべてのデバイスの画面サイズに合わせることができます。応用。

デバイスプレビュー

ローカルマシン、シミュレーター、エミュレーター、またはリモートデバイスでアプリを実行およびテストできます。以下に示すように、次のメニューからターゲットデバイスを選択できます-

UWPローカルマシン

ローカルマシンで上記のコードを実行すると、次のウィンドウが表示されます。ここで、テキストボックスに任意の名前を入力し、 Click Me ボタンをクリックします。

ローカルマシン

これで、エミュレータでアプリをテストする場合、メニューから特定のエミュレータを選択して、アプリケーションを実行できます。次のエミュレータが表示されます-

エミュレータ

上記のアプリケーションを異なるデバイスで実行することをお勧めします。

Windows10-development-first-app

Windows 10開発-最初のアプリ