【C#】①MicrosoftのXamarinチュートリアルを進めつつ補足する

Microsoftが公開しているXamarinチュートリアルを進めつつ、
初心者(私)が詰まりやすいところを、備忘録もかねて補足していきます。

[Xamarinチュートリアル:Microsoft]
(https://docs.microsoft.com/ja-jp/xamarin/get-started/tutorials/stacklayout/?tutorial-step=1&tabs=vswin)

#### そもそも Xamarinって何？って方は[こちら](https://qiita.com/amay077/items/38ee79b3e3e88cf751b9)

ざっくりいうと、
・<b>Vidual Studio</b>というエディタで、
・<b>Xamarin.Forms</b>というフレームワークを選択し、
・<b>C#</b>という言語を用いることで、
　お気軽に<b>Android、iOS</b>アプリの開発体験をしようという企画です。

~~私はMac難民のため、~~以下の条件で進めていきます。

OS：Windows 10
空き容量：40GB以上推奨

てことで、さっそくチュートリアルを実践しながら
いざやると「むむむ？」な行間を補足していこうと思います。

今回は初心者向けに、Vidual Studioのインストールから、
StackLayoutの作成までを進めていきます。

##### <こっそりコラム>　Stack Layoutとは？
名前の通り、要素を積み上げて(<b>Stack</b>)画面の見た目を作ること(<b>Layout</b>)
↓イメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445854/c43951f8-8a93-7db3-5094-d416ea758093.png)
アプリの画面を形作るやり方の一つです！


## 1.[Vidual Studio Community](https://visualstudio.microsoft.com/ja/free-developer-offers/)のインストール
(初心者の方へ：リンクでMS公式に飛んだ後、左のロケットマークをクリック）

##2.インストール完了後、VSCommunity.exeを起動
・「ワークロード」タブから下画像の項目にチェック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445854/4389e81c-23b2-a733-6bee-6974029c5937.png)
・「個別コンポーネント」タブから、下画像の項目にチェック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445854/bc0d0823-cfa9-222d-ddda-c7dffc3a6d07.png)
・右下の「インストール」からインストールを実行
（インストール後に追加する場合は「変更」から実行できる）

##3.Vidual Studioを起動
・右下にある「新しいプロジェクトの作成」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445854/64998633-cc77-c42f-433f-ccf1bb7e05cc.png)
・「モバイルアプリ」のテンプレートを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445854/a507b255-354c-3c2d-87b5-56ab4d61678c.png)
・プロジェクト名を「App1」から「StackLayoutTutorial」に変更して作成完了


##4.「MainPage.xaml」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445854/7bff8361-c092-76c2-2c9a-7fc02951af8a.png)
・MainPage.xamlに既述されたコードを全て削除し、下記コードを貼り付ける

```MainPage.xaml

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutTutorial.MainPage">
    <StackLayout Margin="20,35,20,25">
        <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
        <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
        <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
    </StackLayout>
</ContentPage>

```
・さあ、Debug>Any CPU >StackLayoutTutorial.Android>my_deviceを選んで
　実行マーク▷を押してみましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445854/a0bd19ef-5dc2-4a72-4903-0f5651e0a699.png)

すると・・・
### パ、パソコンの中にAndroidが！！！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445854/ce239243-91eb-e0b6-01eb-2894ef4d3864.png)
はい、ここまで無事にこれたでしょうか。
PC上でスマホアプリのデバッグができるなんて、流石のMSですよね。

今回はここまでになります。
[②はこちら](https://qiita.com/cortexxxxxx/items/93e3f0eb17740123da13)

スムーズにここまでこれるよう書いたつもりではありますが、
「こんなエラーが出てきた！助けて！」という方いらっしゃれば、
QiitaかTwitterでコメント頂けると嬉しいです。~~助けます~~

＜参考>
[Xamarinとはなんぞや](https://qiita.com/amay077/items/38ee79b3e3e88cf751b9)
[C#Xamarin.Formsでスマホ開発#06 StackLayoutの使い方を解説](https://anderson02.com/cs/xamarin1/xamarin-6/)
[MS公式：StackLayout を作成する](https://docs.microsoft.com/ja-jp/xamarin/get-started/tutorials/stacklayout/?tutorial-step=1&tabs=vswin)