플랫폼 간 Xamarin Forms 응용 프로그램 스타일Style a Cross-Platform Xamarin.Forms Application

샘플 다운로드 샘플 다운로드Download Sample Download the sample

이 빠른 시작에서는 다음 방법에 대해 알아봅니다.In this quickstart, you will learn how to:

  • XAML 스타일을 사용 하 여 Xamarin.ios 응용 프로그램 스타일을 만듭니다.Style a Xamarin.Forms application using XAML styles.

퀵 스타트는 XAML 스타일을 사용 하 여 플랫폼 간 Xamarin.ios 응용 프로그램의 스타일을 만드는 방법을 안내 합니다.The quickstart walks through how to style a cross-platform Xamarin.Forms application with XAML styles. 최종 애플리케이션은 다음과 같습니다.The final application is shown below:

PrerequisitesPrerequisites

이 빠른 시작을 시도 하기 전에 이전 퀵 스타트 를 성공적으로 완료 해야 합니다.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를 시작 하 고 Notes 솔루션을 엽니다.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 값 및 NavigationPageContentPage에 대 한 암시적 스타일을 정의 합니다.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.ios스타일 지정을 참조 하세요.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 프로젝트에서 NotesPage 를 두 번 클릭 하 여 엽니다.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. @No__t_0 암시적 스타일은 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.ios스타일 지정을 참조 하세요.For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    Ctrl + S를 눌러 변경 내용을 NotesPage 에 저장 하 고 파일을 닫습니다.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>
    

    이 코드는 페이지 수준 ResourceDictionaryEditorButton 뷰에 대 한 암시적 스타일을 추가 하 고 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. @No__t_0 및 Button 암시적 스타일은 NoteEntryPage 에서만 사용 되므로 페이지 수준 ResourceDictionary에 추가 되었습니다.Note that the Editor and Button implicit styles were added to the page-level ResourceDictionary, because they are only consumed by the NoteEntryPage. XAML 스타일 지정에 대 한 자세한 내용은 xamarin.ios스타일 지정을 참조 하세요.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.

    NotesPage 에서 + 단추를 눌러 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.

Mac용 Visual Studio를 사용하여 앱 업데이트Update the app with Visual Studio for Mac

  1. Mac용 Visual Studio를 시작 하 고 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 값 및 NavigationPageContentPage에 대 한 암시적 스타일을 정의 합니다.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.ios스타일 지정을 참조 하세요.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 프로젝트에서 NotesPage 를 두 번 클릭 하 여 엽니다.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. @No__t_0 암시적 스타일은 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.ios스타일 지정을 참조 하세요.For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    파일 > 저장 을 선택 하거나 ⌘ + S를 눌러 변경 내용을 NotesPage 에 저장 하 고 파일을 닫습니다.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>
    

    이 코드는 페이지 수준 ResourceDictionaryEditorButton 뷰에 대 한 암시적 스타일을 추가 하 고 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. @No__t_0 및 Button 암시적 스타일은 NoteEntryPage 에서만 사용 되므로 페이지 수준 ResourceDictionary에 추가 되었습니다.Note that the Editor and Button implicit styles were added to the page-level ResourceDictionary, because they are only consumed by the NoteEntryPage. XAML 스타일 지정에 대 한 자세한 내용은 xamarin.ios스타일 지정을 참조 하세요.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.

    NotesPage 에서 + 단추를 눌러 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.ios 응용 프로그램 스타일을 만듭니다.Style a Xamarin.Forms application using XAML styles.

Xamarin.ios를 사용 하 여 응용 프로그램을 개발 하는 기본 사항에 대해 자세히 알아보려면 빠른 시작 심층 정보를 계속 확인 하세요.To learn more about the fundamentals of application development using Xamarin.Forms, continue to the quickstart deep dive.