参考ページを元に掲載しています。

Windows プラットフォーム (UWP) を対象にした単純な "Hello, world" アプリを Extensible Application Markup Language (XAML) を使って C# で作る方法について説明します。 Microsoft Visual Studio の 1 つのプロジェクトを使って、Windows 10 のすべてのデバイスで実行されるアプリを構築できます。ここでは、デスクトップとモバイル デバイスで同じように適切に実行されるアプリを作ることに焦点を合わせます。

重要   このチュートリアルは、Microsoft Visual Studio 2015 と Windows 10 で使うためのものです。 それ以前のバージョンでは正しく動作しません。

新規プロジェクトを作成します。メニューバーから「ファイル」をクリック→「新規作成」にマウスオーバー→「プロジェクト」をクリックします。

プロジェクト名はHelloWorld02という名前でプロジェクトを作成します。

<Page

    x:Class="HelloWorld02.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:HelloWorld02"

    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}">

        <!-- VisualStateManager -->

        <VisualStateManager.VisualStateGroups>

            <VisualStateGroup>

                <VisualState x:Name="wideState">

                    <VisualState.StateTriggers>

                        <AdaptiveTrigger MinWindowWidth="641" />

                    </VisualState.StateTriggers>

                </VisualState>

                <VisualState x:Name="narrowState">

                    <VisualState.StateTriggers>

                        <AdaptiveTrigger MinWindowWidth="0" />

                    </VisualState.StateTriggers>

                    <VisualState.Setters>

                        <Setter Target="inputPanel.Orientation" Value="Vertical"/>

                        <Setter Target="inputButton.Margin" Value="0,4,0,0"/>

                    </VisualState.Setters>

                </VisualState>

            </VisualStateGroup>

        </VisualStateManager.VisualStateGroups>

        <!-- StackPanel -->

        <StackPanel x:Name="contentPanel" Margin="8,32,0,0">

            <TextBlock Text="Hello, world!" Margin="0,0,0,40"/>

            <TextBlock Text="What's your name?"/>

            <StackPanel x:Name="inputPanel" Orientation="Horizontal" Margin="20,20,0,20">

                <TextBox x:Name="nameInput" Width="280" HorizontalAlignment="Left"/>

                <Button x:Name="inputButton" Content="Say &quot;Hello&quot;" Click="Button_Click"/>

            </StackPanel>

            <TextBlock x:Name="greetingOutput" Width="280" Margin="20,20,0,20" HorizontalAlignment="Left"/>

        </StackPanel>

    </Grid>

</Page>

VisualStateManager

画面のサイズに応じてVisualStateを自動で切り替える機能
これはVisualStateに新しくStateTriggersというプロパティが追加されていて、ここにAdaptiveTriggerを設定することで実現できます。因みにTriggerはAdaptiveTriggerしか無さそうです。
AdaptiveTriggerにはMinWindowWidthとMinWindowHeightというプロパティがあって、ここに設定した幅や高さよりも大きい時にそのVisualStateに遷移します。条件を満たすAdaptiveTriggerが設定されたVisualStateが複数ある場合は、より大きい値が設定されているほうが優先されるようです。

StackPanel

縦（Vertical)または横（Horizontal)に並べて表示する為のパネルです。

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;

// 空白ページのアイテム テンプレートについては、http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409 を参照してください

namespace HelloWorld02

{

    /// <summary>

    /// それ自体で使用できる空白ページまたはフレーム内に移動できる空白ページ。

    /// </summary>

    public sealed partial class MainPage : Page

    {

        public MainPage()

        {

            this.InitializeComponent();

        }

        private void Button_Click(object sender, RoutedEventArgs e)

        {

            greetingOutput.Text = "Hello, " + nameInput.Text + "!";

        }

    }

}

▫️参考ページ

"Hello, world" アプリを作成する (XAML)

Windows 10 TPのUAPのVisualStateManagerの新しい機能

WPレイアウト-StackPanelの基礎

XAMLを使用してパネルを定義する～2.StackPanel～

[C# WPF]StackPanel

目　次