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

コード

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>

画面デザイナ

PC (Windows 10)

モバイル (Windows 10 Mobile)

縦

横