Стиль кросс платформенные приложения Xamarin.FormsStyle a Cross-Platform Xamarin.Forms Application

Скачать пример Скачать примерDownload Sample Download the sample

В этом кратком руководстве вы узнаете, как:In this quickstart, you will learn how to:

  • Приложение Xamarin.Forms, с помощью стилей XAML в стиле.Style a Xamarin.Forms application using XAML styles.

Кратком руководстве показано, как изменить стиль кросс платформенные приложения Xamarin.Forms с помощью стилей XAML.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 StudioUpdate the app with Visual Studio

  1. Запустите Visual Studio и откройте решение заметки.Launch Visual Studio and open the Notes solution.

  2. В обозревателе решенийв заметки проекта, дважды щелкните 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.Forms.For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    Сохраните изменения в App.xaml , нажав клавишу CTRL + Sи закройте файл.Save the changes to App.xaml by pressing CTRL+S, and close the file.

  3. В обозревателе решенийв заметки проекта, дважды щелкните NotesPage.xaml чтобы открыть его.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 неявный стиль был добавлен к страницам ResourceDictionary, так как он используется только операцией NotesPage.Note that the ListView implicit style was added to the page-level ResourceDictionary, because it is only consumed by the NotesPage. Дополнительные сведения о стили XAML, см. в разделе Стилизация в подробный обзор быстрого запуска Xamarin.Forms.For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    Сохраните изменения в NotesPage.xaml , нажав клавишу CTRL + Sи закройте файл.Save the changes to NotesPage.xaml by pressing CTRL+S, and close the file.

  4. В обозревателе решенийв заметки проекта, дважды щелкните NoteEntryPage.xaml чтобы открыть его.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 и Button представления на уровне страницы ResourceDictionary и задает 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. Обратите внимание, что Editor и Button неявные стили, добавленные на уровне страницы ResourceDictionary, так как они используются только с NoteEntryPage.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.Forms.For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    Сохраните изменения в NoteEntryPage.xaml , нажав клавишу CTRL + Sи закройте файл.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.

Обновление приложения с помощью Visual Studio для MacUpdate the app with Visual Studio for Mac

  1. Запустите Visual Studio для Mac и открыть проект заметки.Launch Visual Studio for Mac and open the Notes project.

  2. В панели решенияв заметки проекта, дважды щелкните 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.Forms.For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    Сохраните изменения в App.xaml , выбрав файл > Сохранить (или нажав ⌘ + S) и закройте файл.Save the changes to App.xaml by choosing File > Save (or by pressing ⌘ + S), and close the file.

  3. В панели решенияв заметки проекта, дважды щелкните NotesPage.xaml чтобы открыть его.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 неявный стиль был добавлен к страницам ResourceDictionary, так как он используется только операцией NotesPage.Note that the ListView implicit style was added to the page-level ResourceDictionary, because it is only consumed by the NotesPage. Дополнительные сведения о стили XAML, см. в разделе Стилизация в подробный обзор быстрого запуска Xamarin.Forms.For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    Сохраните изменения в NotesPage.xaml , выбрав файл > Сохранить (или нажав ⌘ + S) и закройте файл.Save the changes to NotesPage.xaml by choosing File > Save (or by pressing ⌘ + S), and close the file.

  4. В панели решенияв заметки проекта, дважды щелкните NoteEntryPage.xaml чтобы открыть его.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 и Button представления на уровне страницы ResourceDictionary и задает 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. Обратите внимание, что Editor и Button неявные стили, добавленные на уровне страницы ResourceDictionary, так как они используются только с NoteEntryPage.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.Forms.For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    Сохраните изменения в NoteEntryPage.xaml , выбрав файл > Сохранить (или нажав ⌘ + S) и закройте файл.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:

  • Приложение Xamarin.Forms, с помощью стилей XAML в стиле.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.