チュートリアル: アダプティブ レイアウト作成するTutorial: Create adaptive layouts

このチュートリアルでは、XAML のアダプティブなカスタム レイアウト機能の基本的な使い方について説明します。このレイアウト機能を使用すると、どのようなデバイスでもそのデバイス用に最適化されたアプリを作成できます。This tutorial covers the basics of using XAML's adaptive and tailored layout features, which let you create apps that look at home on any device. 新しい DataTemplate を作成する方法、ウィンドウ スナップ位置を追加する方法、VisualStateManager 要素および AdaptiveTrigger 要素を使用してアプリのレイアウトをカスタマイズする方法を学習します。You'll learn how to create a new DataTemplate, add window snap points, and tailor your app's layout using the VisualStateManager and AdaptiveTrigger elements. ここでは、これらのツールを使用して、より小さなデバイス画面向けにイメージ編集プログラムをカスタマイズします。We'll use these tools to optimize an image editing program for smaller device screens.

作業するイメージ編集プログラムには、次の 2 つのページ/画面があります。The image editing program you'll be working on has two pages/screens:

メイン ページ: フォト ギャラリー ビューが各イメージ ファイルに関する情報と共に表示されます。The main page, which displays a photo gallery view, along with some information about each image file.

MainPage

詳細ページ: 選択された単一の写真が表示されます。The details page, which displays a single photo after it has been selected. ポップアップの編集メニューにより、写真の編集、名前変更、保存を行うことができます。A flyout editing menu allows the photo to be altered, renamed, and saved.

DetailPage

前提条件Prerequisites

Part 0:Github からスタート コードを取得します。Part 0: Get the starter code from github

このチュートリアルでは、PhotoLab サンプルの簡易バージョンから開始します。For this tutorial, you'll start with a simplified version of the PhotoLab sample.

  1. 移動して https://github.com/Microsoft/Windows-appsample-photo-labします。Go to https://github.com/Microsoft/Windows-appsample-photo-lab. これで、サンプルの GitHub ページが表示されます。This takes you to the GitHub page for the sample.

  2. 次に、サンプルを複製またはダウンロードする必要があります。Next, you'll need to clone or download the sample. [Clone or download] (複製またはダウンロード) ボタンをクリックします。Click the Clone or download button. サブメニューが表示されます。A sub-menu appears.

    The Clone or download menu on GitHub
    PhotoLab サンプルの GitHub ページの [Clone or download] (複製またはダウンロード) メニュー。The Clone or download menu on the Photo lab sample's GitHub page.

    GitHub に精通していない場合は。If you're not familiar with GitHub:

    a. a. [Download ZIP] (ZIP をダウンロード) をクリックし、ファイルをローカルに保存します。Click Download ZIP and save the file locally. これで、必要なすべてのプロジェクト ファイルを含む .zip ファイルがダウンロードされます。This downloads a .zip file that contains all the project files you need. b. b. ファイルを展開します。Extract the file. エクスプローラーを使用して、ダウンロードした .zip ファイルに移動し、ファイルを右クリックして [すべて展開] を選択します.c Use the File Explorer to navigate to the .zip file you just downloaded, right-click it, and select Extract All.... c. サンプルのローカル コピーに移動し、Windows-appsample-photo-lab-master\xaml-basics-starting-points\adaptive-layout ディレクトリに移動します。Navigate to your local copy of the sample and go the Windows-appsample-photo-lab-master\xaml-basics-starting-points\adaptive-layout directory.

    GitHub に精通してする場合。If you are familiar with GitHub:

    a. a. リポジトリのマスター ブランチをローカルに複製します。Clone the master branch of the repo locally. b. b. Windows-appsample-photo-lab\xaml-basics-starting-points\adaptive-layout ディレクトリに移動します。Navigate to the Windows-appsample-photo-lab\xaml-basics-starting-points\adaptive-layout directory.

  3. Photolab.sln をクリックしてプロジェクトを開きます。Open the project by clicking Photolab.sln.

第 1 部:モバイル エミュレーターを実行します。Part 1: Run the mobile emulator

Visual Studio ツールバーで、ソリューション プラットフォームを必ず x86 または x64 (ARM は不可) に設定してから、ターゲット デバイスをローカル コンピューターから変更して、インストール済みのいずれかのモバイル エミュレーター (Mobile Emulator 10.0.15063 WVGA 5 inch 1GB など) に設定します。In the Visual Studio toolbar, make sure your Solution Platform is set to x86 or x64, not ARM, and then change your target device from Local Machine to one of the mobile emulators that you've installed (for example, Mobile Emulator 10.0.15063 WVGA 5 inch 1GB). F5 を押して、選択したモバイル エミュレーターで Photo Gallery アプリを実行します。Try running the Photo Gallery app in the mobile emulator you've selected by pressing F5.

アプリが開始すると、動作しているものの、このように小さなビューポートでは見栄えが良くないことに気付きます。As soon as the app starts, you'll probably notice that while the app works, it doesn't look great on such a small viewport. 限られた画面領域への対応として、可変の Grid 要素により表示する列の数が減っていますが、レイアウトはこのように小さなビューポートに適合せず、見づらい状態です。The fluid Grid element tries to accommodate for the limited screen real estate by reducing the number of columns displayed, but we are left with a layout that looks uninspired and ill-fitted to such a small viewport.

モバイル レイアウト: 変更後

パート 2:調整されたモバイル レイアウトを作成します。Part 2: Build a tailored mobile layout

より小さなデバイスでもこのアプリの見栄えを良くするには、モバイル デバイスが検出された場合にのみ使用される、別のスタイルを XAML ページに作成します。To make this app look good on smaller devices, we're going to create a separate set of styles in our XAML page that will only be used if a mobile device is detected.

新しい DataTemplate を作成するCreate a new DataTemplate

イメージの新しい DataTemplate を作成することで、アプリケーションのギャラリー ビューをカスタマイズしましょう。We're going to tailor the gallery view of the application by creating a new DataTemplate for the images. ソリューション エクスプ ローラーから MainPage.xaml を開き、Page.Resources タグ内に次のコードを追加します。Open MainPage.xaml from the Solution Explorer, and add the following code within the Page.Resources tags.

<DataTemplate x:Key="ImageGridView_MobileItemTemplate"
              x:DataType="local:ImageFileInfo">

    <!-- Create image grid -->
    <Grid Height="{Binding ItemSize, ElementName=page}"
          Width="{Binding ItemSize, ElementName=page}">
        
        <!-- Place image in grid, stretching it to fill the pane-->
        <Image x:Name="ItemImage"
               Source="{x:Bind ImagePreview}"
               Stretch="UniformToFill">
        </Image>

    </Grid>
</DataTemplate>

このギャラリー テンプレートでは、イメージの境界線を排除し、各サムネイルの下にあるイメージのメタデータ (ファイル名、評価など) を非表示にすることによって、画面領域を節約しています。This gallery template saves screen real estate by eliminating the border around images, and getting rid of the image metadata (filename, ratings, and so on.) below each thumbnail. 代わりに、各サムネイルは単純な正方形で表示します。Instead, we show each thumbnail as a simple square.

メタデータをヒントを追加するAdd metadata to a tooltip

ユーザーが各イメージのメタデータにアクセスできるように、各イメージ項目にヒントを追加します。We still want the user to be able to access the metadata for each image, so we'll add a tooltip to each image item. 先ほど作成した DataTemplate の Image タグ内に、次のコードを追加します。Add the following code within the Image tags of the DataTemplate you just created.

<Image ...>

    <!-- Add a tooltip to the image that displays metadata -->
    <ToolTipService.ToolTip>
        <ToolTip x:Name="tooltip">

            <!-- Arrange tooltip elements vertically -->
            <StackPanel Orientation="Vertical"
                        Grid.Row="1">

                <!-- Image title -->
                <TextBlock Text="{x:Bind ImageTitle, Mode=OneWay}"
                           HorizontalAlignment="Center"
                           Style="{StaticResource SubtitleTextBlockStyle}" />

                <!-- Arrange elements horizontally -->
                <StackPanel Orientation="Horizontal"
                            HorizontalAlignment="Center">

                    <!-- Image file type -->
                    <TextBlock Text="{x:Bind ImageFileType}"
                               HorizontalAlignment="Center"
                               Style="{StaticResource CaptionTextBlockStyle}" />

                    <!-- Image dimensions -->
                    <TextBlock Text="{x:Bind ImageDimensions}"
                               HorizontalAlignment="Center"
                               Style="{StaticResource CaptionTextBlockStyle}"
                               Margin="8,0,0,0" />
                </StackPanel>
            </StackPanel>
        </ToolTip>
    </ToolTipService.ToolTip>
</Image>

これにより、サムネイルにマウスを重ねると (または、タッチ スクリーンを長押しすると)、イメージのタイトル、ファイルの種類、サイズが表示されるようになります。This will show the title, file type, and dimensions of an image when you hover the mouse over the thumbnail (or press and hold on a touch screen).

VisualStateManager と StateTrigger を追加するAdd a VisualStateManager and StateTrigger

これで、新しいデータ レイアウトが作成されましたが、今のところ、どのようなときに既定のスタイルではなくこのレイアウトを使うのか、アプリに知らせる方法がありません。We've now created a new layout for our data, but the app currently has no way of knowing when to use this layout over the default styles. これを解決するには、VisualStateManager を追加する必要があります。To fix this, we'll need to add a VisualStateManager. ページのルート要素である RelativePanel に次のコードを追加します。Add the following code to the root element of the page, RelativePanel.

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>

        <!-- Add a new VisualState for mobile devices -->
        <VisualState x:Key="Mobile">

            <!-- Trigger visualstate when a mobile device is detected -->
            <VisualState.StateTriggers>
                <local:MobileScreenTrigger InteractionMode="Touch" />
            </VisualState.StateTriggers>

        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

これにより、新しい VisualState および StateTrigger が追加されます。これらは、アプリがモバイル デバイス上で実行中であると検出されるとトリガーされます (この動作のロジックは、PhotoLab ディレクトリにある MobileScreenTrigger.cs で確認できます)。This adds a new VisualState and StateTrigger, which will be triggered when the app detects that it is running on a mobile device (the logic for this operation can be found in MobileScreenTrigger.cs, which is provided for you in the PhotoLab directory). StateTrigger が起動されると、アプリは、この VisualState に割り当てられているレイアウト属性を使用します。When the StateTrigger starts, the app will use whatever layout attributes are assigned to this VisualState.

VisualState の setter を追加するAdd VisualState setters

次に、VisualState の setter を使用して、状態がトリガーされたときに適用する属性を VisualStateManager に伝えます。Next, we'll use VisualState setters to tell the VisualStateManager what attributes to apply when the state is triggered. 各 setter は、特定の XAML 要素の 1 つのプロパティを対象とし、指定された値に設定します。Each setter targets one property of a particular XAML element and sets it to the given value. 先ほど作成したモバイルの VisualState (VisualState.StateTriggers 要素の下) にこのコードを追加します。 Add this code to the mobile VisualState you just created, below the VisualState.StateTriggers element.

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>

        <VisualState x:Key="Mobile">
            ...

            <!-- Add setters for mobile visualstate -->
            <VisualState.Setters>

                <!-- Move GridView about the command bar -->
                <Setter Target="ImageGridView.(RelativePanel.Above)"
                        Value="MainCommandBar" />

                <!-- Switch to mobile layout -->
                <Setter Target="ImageGridView.ItemTemplate"
                        Value="{StaticResource ImageGridView_MobileItemTemplate}" />

                <!-- Switch to mobile container styles -->
                <Setter Target="ImageGridView.ItemContainerStyle"
                        Value="{StaticResource ImageGridView_MobileItemContainerStyle}" />

                <!-- Move command bar to bottom of the screen -->
                <Setter Target="MainCommandBar.(RelativePanel.AlignBottomWithPanel)"
                        Value="True" />
                <Setter Target="MainCommandBar.(RelativePanel.AlignLeftWithPanel)"
                        Value="True" />
                <Setter Target="MainCommandBar.(RelativePanel.AlignRightWithPanel)"
                        Value="True" />

                <!-- Adjust the zoom slider to fit mobile screens -->
                <Setter Target="ZoomSlider.Minimum"
                        Value="80" />
                <Setter Target="ZoomSlider.Maximum"
                        Value="180" />
                <Setter Target="ZoomSlider.TickFrequency"
                        Value="20" />
                <Setter Target="ZoomSlider.Value"
                        Value="100" />
            </VisualState.Setters>

        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

これらの setter は、イメージ ギャラリーの ItemTemplate を、先ほど作成した新しい DataTemplate に設定します。さらに、携帯電話の画面で親指によってアクセスしやすくなるように、コマンド バーとズーム スライダーを画面の下端に揃えます。These setters set the ItemTemplate of the image gallery to the new DataTemplate that we created in the first part, and align the command bar and zoom slider with the bottom of the screen, so they are easier to reach with your thumb on a mobile phone screen.

アプリを実行するRun the app

では、モバイル エミュレーターを使用してアプリを実行してみましょう。Now try running the app using a mobile emulator. 新しいレイアウトは正しく表示されますか? Does the new layout display successfully? 次のように、グリッド状に並んだ小さなサムネイルが表示されるはずです。You should see a grid of small thumbnails as below. まだ以前のレイアウトが表示される場合は、VisualStateManager コードにスペルの間違いがないか確認してください。If you still see the old layout, there may be a typo in your VisualStateManager code.

モバイル レイアウト: 変更後

パート 3:1 つのデバイス上の複数のウィンドウ サイズに適応します。Part 3: Adapt to multiple window sizes on a single device

新しいカスタム レイアウトを作成すると、モバイル デバイスのレスポンシブ デザインに関する問題が解決しますが、デスクトップとタブレットの場合はどうでしょうか? Creating a new tailored layout solves the challenge of responsive design for mobile devices, but what about desktops and tablets? アプリは、全画面では見栄え良く表示されても、ユーザーがウィンドウ サイズを縮小すると、インターフェイスが使いづらくなることがあります。The app may look good at full screen, but if the user shrinks the window, they may end up with an awkward interface. エンド ユーザーが常に適切な外観および操作性を得ることができるように、VisualStateManager を使用して、単一デバイスのさまざまなウィンドウサイズに対応することができます。We can ensure that the end-user experience always looks and feels right by using the VisualStateManager to adapt to multiple window sizes on a single device.

小さなウィンドウ: 変更前

ウィンドウ スナップ位置を追加するAdd window snap points

最初のステップは、さまざまな VisualStates がトリガーされる "スナップ位置" を定義することです。The first step is to define the "snap points" at which different VisualStates will be triggered. ソリューション エクスプ ローラーから App.xaml を開き、2 つの Application タグの間に次のコードを追加します。Open App.xaml from the Solution Explorer, and add the following code between the Application tags.

<Application.Resources>
    <!--  window width adaptive snap points  -->
    <x:Double x:Key="MinWindowSnapPoint">0</x:Double>
    <x:Double x:Key="MediumWindowSnapPoint">641</x:Double>
    <x:Double x:Key="LargeWindowSnapPoint">1008</x:Double>
</Application.Resources>

これにより 3 つのスナップ位置が追加され、3 種類のウィンドウ サイズ範囲に対する新しい VisualStates を作成できます。This gives us three snap points, which allow us to create new VisualStates for three ranges of window sizes:

  • 小 (0 ~ 640 ピクセル幅)Small (0 - 640 pixels wide)
  • 中 (641 ~ 1007 ピクセル幅)Medium (641 - 1007 pixels wide)
  • 大 (1008 ピクセル幅以上)Large (> 1007 pixels wide)

新しい VisualStates と StateTriggers を作成するCreate new VisualStates and StateTriggers

次に、各スナップ位置に対応する VisualStates および StateTriggers を作成します。Next, we create the VisualStates and StateTriggers that correspond to each snap point. MainPage.xaml.cpp の VisualStateManager (パート 2 で作成) に次のコードを追加します。In MainPage.xaml, add the following code to the VisualStateManager that you created in Part 2.

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
    ...

        <!-- Large window VisualState -->
        <VisualState x:Key="LargeWindow">

            <!-- Large window trigger -->
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="{StaticResource LargeWindowSnapPoint}"/>
            </VisualState.StateTriggers>
     
        </VisualState>

        <!-- Medium window VisualState -->
        <VisualState x:Key="MediumWindow">

            <!-- Medium window trigger -->
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="{StaticResource MediumWindowSnapPoint}"/>
            </VisualState.StateTriggers>
        
        </VisualState>

        <!-- Small window VisualState -->
        <VisualState x:Key="SmallWindow">

            <!-- Small window trigger -->
            <VisualState.StateTriggers >
                <AdaptiveTrigger MinWindowWidth="{StaticResource MinWindowSnapPoint}"/>
            </VisualState.StateTriggers>

        </VisualState>

    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

setter を追加するAdd setters

最後に、これらの setter を SmallWindow の状態に追加します。Finally, add these setters to the SmallWindow state.


<VisualState x:Key="SmallWindow">
    ...

    <!-- Small window setters -->
    <VisualState.Setters>

        <!-- Apply mobile itemtemplate and styles -->
        <Setter Target="ImageGridView.ItemTemplate"
                Value="{StaticResource ImageGridView_MobileItemTemplate}" />
        <Setter Target="ImageGridView.ItemContainerStyle"
                Value="{StaticResource ImageGridView_MobileItemContainerStyle}" />

        <!-- Adjust the zoom slider to fit small windows-->
        <Setter Target="ZoomSlider.Minimum"
                Value="80" />
        <Setter Target="ZoomSlider.Maximum"
                Value="180" />
        <Setter Target="ZoomSlider.TickFrequency"
                Value="20" />
        <Setter Target="ZoomSlider.Value"
                Value="100" />
    </VisualState.Setters>

</VisualState>

これらの setter では、ビューポートが 641 ピクセル幅を下回る場合に、モバイルの DataTemplate およびスタイルがデスクトップ アプリに適用されます。These setters apply the mobile DataTemplate and styles to the desktop app, whenever the viewport is less than 641 pixels wide. また、小さい画面に合わせて、ズーム スライダーの調整も行われます。They also tweak the zoom slider to better fit the small screen.

アプリを実行するRun the app

Visual Studio ツール バーで、ターゲット デバイスを Local Machine に設定し、アプリを実行します。In the Visual Studio toolbar set the target device to Local Machine, and run the app. アプリが読み込まれたら、ウィンドウのサイズを変更してみてください。When the app loads, try changing the size of the window. ウィンドウを小さなサイズに縮小すると、パート 2 で作成したモバイル レイアウトにアプリが切り替わることがわかります。When you shrink the window to a small size, you should see the app switch to the mobile layout you created in Part 2.

小さなウィンドウ: 変更後

追加情報Going further

これで、この演習は終わりです。自身でさらに試すために必要な、レイアウトに関する知識を身につけることができました。Now that you've completed this lab, you have enough adaptive layout knowledge to experiment further on your own. 以前に追加したモバイル専用のヒントに、評価コントロールを追加してみてください。Try adding a rating control to the mobile-only tooltip you added earlier. または、さらに大きな課題として、大きな画面サイズ用にレイアウトを最適化してみてください (テレビ画面や Surface Studio を想定)。Or, for a bigger challenge, try optimizing the layout for larger screen sizes (think TV screens or a Surface Studio)

行き詰まった場合は、「XAML を使ったページ レイアウトの定義」の以下のセクションで、詳しいガイダンスを参照できます。If you get stuck, you can find more guidance in these sections of Define page layouts with XAML.

当初の写真編集アプリの作成方法を学習するには、XAML のユーザー インターフェイスデータ バインディングに関するチュートリアルをご覧ください。Alternatively, if you want to learn more about how the initial photo editing app was built, check out these tutorials on XAML user interfaces and data binding.

PhotoLab サンプルの最終バージョンを入手するGet the final version of the PhotoLab sample

このチュートリアルで完全な写真編集アプリは作成されません。必ず最終バージョンでカスタム アニメーションやスマートフォン サポートなど、他の機能を確認してください。This tutorial doesn't build up to the complete photo editing app, so be sure to check out the final version to see other features such as custom animations and phone support.