UWPメモ　PCとモバイルの画面の見え方

# <i class="fa fa-file-text-o" style="font-size:1em;"></i> コード

```Xml:MainPage.xaml
<Page
    x:Class="UWPControl.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UWPControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <!-- 共通スタイル定義 -->
        <Style x:Key="BaseStyle" TargetType="FrameworkElement">
            <Setter Property="Margin" Value="15,15,15,0" />
        </Style>
        <!-- 各コントロールのスタイル定義 -->
        <Style TargetType="DatePicker" BasedOn="{StaticResource BaseStyle}" />
        <Style TargetType="TimePicker" BasedOn="{StaticResource BaseStyle}" />
        <Style TargetType="ProgressBar" BasedOn="{StaticResource BaseStyle}" />
        <Style TargetType="Slider" BasedOn="{StaticResource BaseStyle}" />
        <Style TargetType="Button" BasedOn="{StaticResource BaseStyle}" />
        <Style TargetType="HyperlinkButton" BasedOn="{StaticResource BaseStyle}" />
        <Style TargetType="ToggleSwitch" BasedOn="{StaticResource BaseStyle}" />
        <Style TargetType="ComboBox" BasedOn="{StaticResource BaseStyle}" />
        <Style TargetType="TextBlock" BasedOn="{StaticResource BaseStyle}" />
        <Style TargetType="TextBox" BasedOn="{StaticResource BaseStyle}" />
        <Style TargetType="CheckBox" BasedOn="{StaticResource BaseStyle}" />
        <Style TargetType="RadioButton" BasedOn="{StaticResource BaseStyle}" />
        <Style TargetType="Rectangle" BasedOn="{StaticResource BaseStyle}" />
        <Style TargetType="Ellipse" BasedOn="{StaticResource BaseStyle}" />
    </Page.Resources>
    
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <!-- グリッド行数定義 -->
        <Grid.RowDefinitions>
            <!-- 1段目：内容に合わせて自動調整 -->
            <RowDefinition Height="auto" />
            <!-- 2段目：残りを埋めるように自動調整 -->
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        
        <!-- グリッドカラム数定義 -->
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        
        <!-- 1段目 -->
        <StackPanel Grid.ColumnSpan="2">
            <DatePicker />
            <TimePicker />
            <ProgressBar Height="10" Value="75" />
            <Slider Value="30"/>
        </StackPanel>
        
        <!-- 2段目、左 -->
        <ScrollViewer Grid.Row="1">
            <StackPanel>
                <Button Content="Button"/>
                <HyperlinkButton Content="HyperlinkButton" />
                <ToggleSwitch Header="ToggleSwitch" IsOn="True" />
                <ComboBox SelectedIndex="0">
                    <ComboBoxItem Content="選択肢1" />
                    <ComboBoxItem Content="選択肢2" />
                </ComboBox>
                <TextBlock Text="TextBlock" />
                <TextBox Text="TextBox" />
            </StackPanel>
        </ScrollViewer>
        
        <!-- 2段目、右 -->
        <ScrollViewer Grid.Row="1" Grid.Column="1">
            <StackPanel>
                <CheckBox x:Name="checkBox" Content="CheckBox" IsChecked="True"/>
                <RadioButton x:Name="radioButton" Content="RadioButton" IsChecked="True"/>
                <!-- 赤枠、黄色で四角を塗りつぶし -->
                <Rectangle Fill="Yellow" Height="50" Stroke="Red" Width="50" />
                <!-- アクセントカラーで塗りつぶし -->
                <Ellipse Fill="{StaticResource SystemControlHighlightAccentBrush}" Height="50" Stroke="Black" Width="50"/>
            </StackPanel>
        </ScrollViewer>
    </Grid>
</Page>
```

# <i class="fa fa-cubes" style="font-size:1em;"></i> 画面デザイナ
![uwp10.PNG](https://qiita-image-store.s3.amazonaws.com/0/142879/9b276798-82cd-de67-7fb0-74c1535b9a06.png)

# <i class="fa fa-cubes" style="font-size:1em;"></i> PC (Windows 10)
![uwp11.png](https://qiita-image-store.s3.amazonaws.com/0/142879/a687aeba-618f-8a6e-cf9f-3e86c3ec3276.png)

# <i class="fa fa-cubes" style="font-size:1em;"></i> モバイル (Windows 10 Mobile)
## <i class="fa fa-cube" style="font-size:1em;"></i> 縦
![uwp12.png](https://qiita-image-store.s3.amazonaws.com/0/142879/b64197b4-25ab-51cb-6af5-a9d8922c58c8.png)

## <i class="fa fa-cube" style="font-size:1em;"></i> 横
![uwp13.png](https://qiita-image-store.s3.amazonaws.com/0/142879/b0058c18-0a4e-d8c5-da35-2aad3cc14073.png)