クロスプラットフォームの Xamarin.Forms アプリケーションのスタイルを適用するStyle a Cross-Platform Xamarin.Forms Application

サンプルのダウンロードサンプルのダウンロードDownload Sample Download the sample

このクイックスタートでは、次の方法について説明します。In this quickstart, you will learn how to:

  • XAML スタイルを使用して Xamarin アプリケーションのスタイルを適用します。Style a Xamarin.Forms application using XAML styles.

クイックスタートでは、XAML スタイルを使用してクロスプラットフォームの Xamarin.Forms アプリケーションのスタイルを適用する方法を説明します。The quickstart walks through how to style a cross-platform Xamarin.Forms application with XAML styles. 最終的なアプリケーションは、次のとおりです。The final application is shown below:

)

必須コンポーネントPrerequisites

このクイックスタートを試行する前に、前のクイックスタートを正常に完了している必要があります。You should successfully complete the previous quickstart before attempting this quickstart. または、前のクイックスタートサンプルをダウンロードし、このクイックスタートの出発点として使用してください。Alternatively, download the previous quickstart sample and use it as the starting point for this quickstart.

Visual Studio でアプリを更新するUpdate the app with Visual Studio

  1. Visual Studio を起動し、Note ソリューションを開きます。Launch Visual Studio and open the Notes solution.

  2. ソリューションエクスプローラーNotesプロジェクトで、 app.xamlをダブルクリックして開きます。In Solution Explorer, in the Notes project, double-click App.xaml to open it. 次に、既存のコードを次のコードに置き換えます。Then replace the existing code with the following code:

    <?xml version="1.0" encoding="utf-8"?>
    <Application xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="Notes.App">
        <Application.Resources>
    
            <Thickness x:Key="PageMargin">20</Thickness>
    
            <!-- Colors -->
            <Color x:Key="AppBackgroundColor">WhiteSmoke</Color>
            <Color x:Key="iOSNavigationBarColor">WhiteSmoke</Color>
            <Color x:Key="AndroidNavigationBarColor">#2196F3</Color>
            <Color x:Key="iOSNavigationBarTextColor">Black</Color>
            <Color x:Key="AndroidNavigationBarTextColor">White</Color>
    
            <!-- Implicit styles -->
            <Style TargetType="{x:Type NavigationPage}">
                <Setter Property="BarBackgroundColor"
                        Value="{OnPlatform iOS={StaticResource iOSNavigationBarColor},
                                           Android={StaticResource AndroidNavigationBarColor}}" />
                 <Setter Property="BarTextColor"
                        Value="{OnPlatform iOS={StaticResource iOSNavigationBarTextColor},
                                           Android={StaticResource AndroidNavigationBarTextColor}}" />           
            </Style>
    
            <Style TargetType="{x:Type ContentPage}"
                   ApplyToDerivedTypes="True">
                <Setter Property="BackgroundColor"
                        Value="{StaticResource AppBackgroundColor}" />
            </Style>
    
        </Application.Resources>
    </Application>
    

    このコードはThickness 、値、一連のColor値、 NavigationPageおよびContentPageの暗黙的なスタイルを定義します。This code defines a Thickness value, a series of Color values, and implicit styles for the NavigationPage and ContentPage. アプリケーションレベルResourceDictionaryのこれらのスタイルは、アプリケーション全体で使用できることに注意してください。Note that these styles, which are in the application-level ResourceDictionary, can be consumed throughout the application. XAML のスタイル設定の詳細については、「 Xamarin のクイックスタート」の「スタイル処理」を参照してください。For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    CTRL + Sキーを押してapp.xamlへの変更を保存し、ファイルを閉じます。Save the changes to App.xaml by pressing CTRL+S, and close the file.

  3. ソリューションエクスプローラーNotesプロジェクトで、[注釈 ] プロジェクトをダブルクリックして開きます。In Solution Explorer, in the Notes project, double-click NotesPage.xaml to open it. 次に、既存のコードを次のコードに置き換えます。Then replace the existing code with the following code:

    <?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="Notes.NotesPage"
                 Title="Notes">
        <ContentPage.Resources>
            <!-- Implicit styles -->
            <Style TargetType="{x:Type ListView}">
                <Setter Property="BackgroundColor"
                        Value="{StaticResource AppBackgroundColor}" />
            </Style>
        </ContentPage.Resources>
    
        <ContentPage.ToolbarItems>
            <ToolbarItem Text="+"
                         Clicked="OnNoteAddedClicked" />
        </ContentPage.ToolbarItems>
    
        <ListView x:Name="listView"
                  Margin="{StaticResource PageMargin}"
                  ItemSelected="OnListViewItemSelected">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Text}"
                              Detail="{Binding Date}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    
    </ContentPage>
    

    このコードはListView 、の暗黙的なスタイルをページレベルResourceDictionaryに追加し、 ListView.MarginプロパティをアプリケーションレベルResourceDictionaryで定義された値に設定します。This code adds an implicit style for the ListView to the page-level ResourceDictionary, and sets the ListView.Margin property to a value defined in the application-level ResourceDictionary. によってListViewのみ使用NotesPageされるため、暗黙的なスタイルResourceDictionaryはページレベルに追加されていることに注意してください。Note that the ListView implicit style was added to the page-level ResourceDictionary, because it is only consumed by the NotesPage. XAML のスタイル設定の詳細については、「 Xamarin のクイックスタート」の「スタイル処理」を参照してください。For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    CTRL + Sキーを押して、変更内容を [ノート] ページに保存し、ファイルを閉じます。Save the changes to NotesPage.xaml by pressing CTRL+S, and close the file.

  4. ソリューションエクスプローラーNotesプロジェクトで、 NoteEntryPageをダブルクリックして開きます。In Solution Explorer, in the Notes project, double-click NoteEntryPage.xaml to open it. 次に、既存のコードを次のコードに置き換えます。Then replace the existing code with the following code:

    <?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="Notes.NoteEntryPage"
                 Title="Note Entry">
        <ContentPage.Resources>
            <!-- Implicit styles -->
            <Style TargetType="{x:Type Editor}">
                <Setter Property="BackgroundColor"
                        Value="{StaticResource AppBackgroundColor}" />
            </Style>
    
            <Style TargetType="Button"
                   ApplyToDerivedTypes="True"
                   CanCascade="True">
                <Setter Property="FontSize" Value="Medium" />
                <Setter Property="BackgroundColor" Value="LightGray" />
                <Setter Property="TextColor" Value="Black" />
                <Setter Property="BorderRadius" Value="5" />
            </Style>
        </ContentPage.Resources>
    
        <StackLayout Margin="{StaticResource PageMargin}">
            <Editor Placeholder="Enter your note"
                    Text="{Binding Text}"
                    HeightRequest="100" />
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Button Text="Save"
                        Clicked="OnSaveButtonClicked" />
                <Button Grid.Column="1"
                        Text="Delete"
                        Clicked="OnDeleteButtonClicked" />
            </Grid>
        </StackLayout>
    
    </ContentPage>
    

    このコードはEditor 、ビュー ResourceDictionaryおよびButtonビューの暗黙的なスタイルをページStackLayout.MarginレベルResourceDictionaryに追加し、プロパティをアプリケーションレベルで定義された値に設定します。This code adds implicit styles for the Editor and Button views to the page-level ResourceDictionary, and sets the StackLayout.Margin property to a value defined in the application-level ResourceDictionary. EditorResourceDictionary NoteEntryPageの暗黙的なスタイルは、によってのみ使用されるため、ページレベルに追加されていることに注意してください。 ButtonNote that the Editor and Button implicit styles were added to the page-level ResourceDictionary, because they are only consumed by the NoteEntryPage. XAML のスタイル設定の詳細については、「 Xamarin のクイックスタート」の「スタイル処理」を参照してください。For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    CTRL + Sキーを押してNoteEntryPageへの変更内容を保存し、ファイルを閉じます。Save the changes to NoteEntryPage.xaml by pressing CTRL+S, and close the file.

  5. 各プラットフォームでプロジェクトをビルドして実行します。Build and run the project on each platform. 詳細については、「クイックスタートのビルド」を参照してください。For more information, see Building the quickstart.

    [ノート] ページで、 + ボタンを押してNoteEntryPageに移動し、メモを入力します。On the NotesPage press the + button to navigate to the NoteEntryPage and enter a note. 各ページで、前のクイックスタートでスタイルがどのように変更されたかを確認します。On each page, observe how the styling has changed from the previous quickstart.

Visual Studio for Mac でアプリを更新するUpdate the app with Visual Studio for Mac

  1. Visual Studio for Mac を起動し、Notes プロジェクトを開きます。Launch Visual Studio for Mac and open the Notes project.

  2. Solution PadNotesプロジェクトで、 app.xamlをダブルクリックして開きます。In the Solution Pad, in the Notes project, double-click App.xaml to open it. 次に、既存のコードを次のコードに置き換えます。Then replace the existing code with the following code:

    <?xml version="1.0" encoding="utf-8"?>
    <Application xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="Notes.App">
        <Application.Resources>
    
            <Thickness x:Key="PageMargin">20</Thickness>
    
            <!-- Colors -->
            <Color x:Key="AppBackgroundColor">WhiteSmoke</Color>
            <Color x:Key="iOSNavigationBarColor">WhiteSmoke</Color>
            <Color x:Key="AndroidNavigationBarColor">#2196F3</Color>
            <Color x:Key="iOSNavigationBarTextColor">Black</Color>
            <Color x:Key="AndroidNavigationBarTextColor">White</Color>
    
            <!-- Implicit styles -->
            <Style TargetType="{x:Type NavigationPage}">
                <Setter Property="BarBackgroundColor"
                        Value="{OnPlatform iOS={StaticResource iOSNavigationBarColor},
                                           Android={StaticResource AndroidNavigationBarColor}}" />
                 <Setter Property="BarTextColor"
                        Value="{OnPlatform iOS={StaticResource iOSNavigationBarTextColor},
                                           Android={StaticResource AndroidNavigationBarTextColor}}" />           
            </Style>
    
            <Style TargetType="{x:Type ContentPage}"
                   ApplyToDerivedTypes="True">
                <Setter Property="BackgroundColor"
                        Value="{StaticResource AppBackgroundColor}" />
            </Style>
    
        </Application.Resources>
    </Application>
    

    このコードはThickness 、値、一連のColor値、 NavigationPageおよびContentPageの暗黙的なスタイルを定義します。This code defines a Thickness value, a series of Color values, and implicit styles for the NavigationPage and ContentPage. アプリケーションレベルResourceDictionaryのこれらのスタイルは、アプリケーション全体で使用できることに注意してください。Note that these styles, which are in the application-level ResourceDictionary, can be consumed throughout the application. XAML のスタイル設定の詳細については、「 Xamarin のクイックスタート」の「スタイル処理」を参照してください。For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    [ファイル > 保存] を選択して (または ⌘ + Sキーを押して)、 app.xamlへの変更内容を保存し、ファイルを閉じます。Save the changes to App.xaml by choosing File > Save (or by pressing ⌘ + S), and close the file.

  3. Solution PadNotesプロジェクトで、[注釈 ] プロジェクトをダブルクリックして開きます。In the Solution Pad, in the Notes project, double-click NotesPage.xaml to open it. 次に、既存のコードを次のコードに置き換えます。Then replace the existing code with the following code:

    <?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="Notes.NotesPage"
                 Title="Notes">
        <ContentPage.Resources>
            <!-- Implicit styles -->
            <Style TargetType="{x:Type ListView}">
                <Setter Property="BackgroundColor"
                        Value="{StaticResource AppBackgroundColor}" />
            </Style>
        </ContentPage.Resources>
    
        <ContentPage.ToolbarItems>
            <ToolbarItem Text="+"
                         Clicked="OnNoteAddedClicked" />
        </ContentPage.ToolbarItems>
    
        <ListView x:Name="listView"
                  Margin="{StaticResource PageMargin}"
                  ItemSelected="OnListViewItemSelected">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Text}"
                              Detail="{Binding Date}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    
    </ContentPage>
    

    このコードはListView 、の暗黙的なスタイルをページレベルResourceDictionaryに追加し、 ListView.MarginプロパティをアプリケーションレベルResourceDictionaryで定義された値に設定します。This code adds an implicit style for the ListView to the page-level ResourceDictionary, and sets the ListView.Margin property to a value defined in the application-level ResourceDictionary. によってListViewのみ使用NotesPageされるため、暗黙的なスタイルResourceDictionaryはページレベルに追加されていることに注意してください。Note that the ListView implicit style was added to the page-level ResourceDictionary, because it is only consumed by the NotesPage. XAML のスタイル設定の詳細については、「 Xamarin のクイックスタート」の「スタイル処理」を参照してください。For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    [ファイル ] > [保存] を選択して (または ⌘ + Sキーを押して)、ファイルを閉じて、変更内容を保存します。Save the changes to NotesPage.xaml by choosing File > Save (or by pressing ⌘ + S), and close the file.

  4. Solution PadNotesプロジェクトで、 NoteEntryPageをダブルクリックして開きます。In the Solution Pad, in the Notes project, double-click NoteEntryPage.xaml to open it. 次に、既存のコードを次のコードに置き換えます。Then replace the existing code with the following code:

    <?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="Notes.NoteEntryPage"
                 Title="Note Entry">
        <ContentPage.Resources>
            <!-- Implicit styles -->
            <Style TargetType="{x:Type Editor}">
                <Setter Property="BackgroundColor"
                        Value="{StaticResource AppBackgroundColor}" />
            </Style>
    
            <Style TargetType="Button"
                   ApplyToDerivedTypes="True"
                   CanCascade="True">
                <Setter Property="FontSize" Value="Medium" />
                <Setter Property="BackgroundColor" Value="LightGray" />
                <Setter Property="TextColor" Value="Black" />
                <Setter Property="BorderRadius" Value="5" />
            </Style>
        </ContentPage.Resources>
    
        <StackLayout Margin="{StaticResource PageMargin}">
            <Editor Placeholder="Enter your note"
                    Text="{Binding Text}"
                    HeightRequest="100" />
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Button Text="Save"
                        Clicked="OnSaveButtonClicked" />
                <Button Grid.Column="1"
                        Text="Delete"
                        Clicked="OnDeleteButtonClicked" />
            </Grid>
        </StackLayout>
    
    </ContentPage>
    

    このコードはEditor 、ビュー ResourceDictionaryおよびButtonビューの暗黙的なスタイルをページStackLayout.MarginレベルResourceDictionaryに追加し、プロパティをアプリケーションレベルで定義された値に設定します。This code adds implicit styles for the Editor and Button views to the page-level ResourceDictionary, and sets the StackLayout.Margin property to a value defined in the application-level ResourceDictionary. EditorResourceDictionary NoteEntryPageの暗黙的なスタイルは、によってのみ使用されるため、ページレベルに追加されていることに注意してください。 ButtonNote that the Editor and Button implicit styles were added to the page-level ResourceDictionary, because they are only consumed by the NoteEntryPage. XAML のスタイル設定の詳細については、「 Xamarin のクイックスタート」の「スタイル処理」を参照してください。For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    [ファイル > 保存] を選択し (または、 ⌘ + Sキーを押して)、 NoteEntryPageへの変更内容を保存し、ファイルを閉じます。Save the changes to NoteEntryPage.xaml by choosing File > Save (or by pressing ⌘ + S), and close the file.

  5. 各プラットフォームでプロジェクトをビルドして実行します。Build and run the project on each platform. 詳細については、「クイックスタートのビルド」を参照してください。For more information, see Building the quickstart.

    [ノート] ページで、 + ボタンを押してNoteEntryPageに移動し、メモを入力します。On the NotesPage press the + button to navigate to the NoteEntryPage and enter a note. 各ページで、前のクイックスタートでスタイルがどのように変更されたかを確認します。On each page, observe how the styling has changed from the previous quickstart.

次の手順Next steps

このクイックスタートでは、次の方法について学習しました。In this quickstart, you learned how to:

  • XAML スタイルを使用して Xamarin アプリケーションのスタイルを適用します。Style a Xamarin.Forms application using XAML styles.

Xamarin.Forms を使用したアプリケーション開発の基礎について詳しくは、クイックスタートの詳細に関するページをご覧ください。To learn more about the fundamentals of application development using Xamarin.Forms, continue to the quickstart deep dive.