Applicare uno stile a un'applicazione Novell. Forms multipiattaformaStyle a Cross-Platform Xamarin.Forms Application

Scaricare esempio Scaricare l'esempioDownload Sample Download the sample

In questa Guida introduttiva si apprenderà come:In this quickstart, you will learn how to:

  • Applicare uno stile a un'applicazione Novell. Forms usando gli stili XAML.Style a Xamarin.Forms application using XAML styles.

La Guida introduttiva illustra come applicare uno stile a un'applicazione Novell. Forms multipiattaforma con stili XAML.The quickstart walks through how to style a cross-platform Xamarin.Forms application with XAML styles. Il risultato è riportato di seguito:The final application is shown below:

[ ![(styling-images/screenshots1-sml.png " ")]Pagina note] (styling-images/screenshots1.png#lightbox "Pagina note") Nota pagina immissione(styling-images/screenshots2.png#lightbox "Nota pagina voce") [ ![(styling-images/screenshots2-sml.png " ")]]

PrerequisitiPrerequisites

Prima di provare questa Guida introduttiva, è necessario completare correttamente la Guida introduttiva precedente .You should successfully complete the previous quickstart before attempting this quickstart. In alternativa, scaricare l' esempio di Guida introduttiva precedente e usarlo come punto di partenza per questa Guida introduttiva.Alternatively, download the previous quickstart sample and use it as the starting point for this quickstart.

Aggiornare l'app con Visual StudioUpdate the app with Visual Studio

  1. Avviare Visual Studio e aprire la soluzione note.Launch Visual Studio and open the Notes solution.

  2. In Esplora soluzioni, nel progetto note , fare doppio clic su app. XAML per aprirlo.In Solution Explorer, in the Notes project, double-click App.xaml to open it. Sostituire quindi il codice esistente con il codice seguente: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>
    

    Questo codice definisce un Thickness valore, una serie di Color valori NavigationPage e stili impliciti per e ContentPage.This code defines a Thickness value, a series of Color values, and implicit styles for the NavigationPage and ContentPage. Si noti che questi stili, che sono a livello ResourceDictionarydi applicazione, possono essere usati in tutta l'applicazione.Note that these styles, which are in the application-level ResourceDictionary, can be consumed throughout the application. Per ulteriori informazioni sullo stile XAML, vedere la pagina relativa all'applicazione di stili nella Guida introduttiva a Novell. Forms.For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    Salvare le modifiche apportate a app. XAML premendo CTRL + Se chiudere il file.Save the changes to App.xaml by pressing CTRL+S, and close the file.

  3. In Esplora soluzioni, nel progetto note , fare doppio clic su NotesPage. XAML per aprirlo.In Solution Explorer, in the Notes project, double-click NotesPage.xaml to open it. Sostituire quindi il codice esistente con il codice seguente: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>
    

    Questo codice aggiunge uno stile implicito per ListView a a livello ResourceDictionarydi pagina e imposta la ListView.Margin proprietà su un valore definito a livello ResourceDictionarydi applicazione.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. Si noti che ListView lo stile implicito è stato aggiunto a livello ResourceDictionarydi pagina, perché NotesPageviene utilizzato solo da.Note that the ListView implicit style was added to the page-level ResourceDictionary, because it is only consumed by the NotesPage. Per ulteriori informazioni sullo stile XAML, vedere la pagina relativa all'applicazione di stili nella Guida introduttiva a Novell. Forms.For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    Salvare le modifiche apportate a NotesPage. XAML premendo CTRL + Se chiudere il file.Save the changes to NotesPage.xaml by pressing CTRL+S, and close the file.

  4. In Esplora soluzioni, nel progetto note , fare doppio clic su NoteEntryPage. XAML per aprirlo.In Solution Explorer, in the Notes project, double-click NoteEntryPage.xaml to open it. Sostituire quindi il codice esistente con il codice seguente: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>
    

    Questo codice aggiunge stili impliciti per Editor le Button visualizzazioni e a livello ResourceDictionarydi pagina e imposta la StackLayout.Margin proprietà su un valore definito a livello ResourceDictionarydi applicazione.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. Si noti che Editor gli Button stili impliciti e sono stati aggiunti a livello ResourceDictionarydi pagina NoteEntryPage, perché vengono utilizzati solo da.Note that the Editor and Button implicit styles were added to the page-level ResourceDictionary, because they are only consumed by the NoteEntryPage. Per ulteriori informazioni sullo stile XAML, vedere la pagina relativa all'applicazione di stili nella Guida introduttiva a Novell. Forms.For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    Salvare le modifiche apportate a NoteEntryPage. XAML premendo CTRL + Se chiudere il file.Save the changes to NoteEntryPage.xaml by pressing CTRL+S, and close the file.

  5. Compilare ed eseguire il progetto in ogni piattaforma.Build and run the project on each platform. Per ulteriori informazioni, vedere la pagina relativa alla compilazione della Guida introduttiva.For more information, see Building the quickstart.

    In NotesPage premere il + pulsante per passare al NoteEntryPage e immettere una nota.On the NotesPage press the + button to navigate to the NoteEntryPage and enter a note. In ogni pagina osservare come lo stile è stato modificato rispetto alla Guida introduttiva precedente.On each page, observe how the styling has changed from the previous quickstart.

Aggiornare l'app con Visual Studio per MacUpdate the app with Visual Studio for Mac

  1. Avviare Visual Studio per Mac e aprire il progetto note.Launch Visual Studio for Mac and open the Notes project.

  2. Nel riquadro della soluzione, nel progetto note , fare doppio clic su app. XAML per aprirlo.In the Solution Pad, in the Notes project, double-click App.xaml to open it. Sostituire quindi il codice esistente con il codice seguente: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>
    

    Questo codice definisce un Thickness valore, una serie di Color valori NavigationPage e stili impliciti per e ContentPage.This code defines a Thickness value, a series of Color values, and implicit styles for the NavigationPage and ContentPage. Si noti che questi stili, che sono a livello ResourceDictionarydi applicazione, possono essere usati in tutta l'applicazione.Note that these styles, which are in the application-level ResourceDictionary, can be consumed throughout the application. Per ulteriori informazioni sullo stile XAML, vedere la pagina relativa all'applicazione di stili nella Guida introduttiva a Novell. Forms.For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    Salvare le modifiche apportate a app. XAML scegliendo file > Salva (o premendo ⌘ + S) e chiudere il file.Save the changes to App.xaml by choosing File > Save (or by pressing ⌘ + S), and close the file.

  3. Nel riquadro della soluzione, nel progetto Notes , fare doppio clic su NotesPage. XAML per aprirlo.In the Solution Pad, in the Notes project, double-click NotesPage.xaml to open it. Sostituire quindi il codice esistente con il codice seguente: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>
    

    Questo codice aggiunge uno stile implicito per ListView a a livello ResourceDictionarydi pagina e imposta la ListView.Margin proprietà su un valore definito a livello ResourceDictionarydi applicazione.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. Si noti che ListView lo stile implicito è stato aggiunto a livello ResourceDictionarydi pagina, perché NotesPageviene utilizzato solo da.Note that the ListView implicit style was added to the page-level ResourceDictionary, because it is only consumed by the NotesPage. Per ulteriori informazioni sullo stile XAML, vedere la pagina relativa all'applicazione di stili nella Guida introduttiva a Novell. Forms.For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    Salvare le modifiche apportate a NotesPage. XAML scegliendo file > Salva (o premendo ⌘ + S) e chiudere il file.Save the changes to NotesPage.xaml by choosing File > Save (or by pressing ⌘ + S), and close the file.

  4. Nel riquadro della soluzione, nel progetto Notes , fare doppio clic su NoteEntryPage. XAML per aprirlo.In the Solution Pad, in the Notes project, double-click NoteEntryPage.xaml to open it. Sostituire quindi il codice esistente con il codice seguente: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>
    

    Questo codice aggiunge stili impliciti per Editor le Button visualizzazioni e a livello ResourceDictionarydi pagina e imposta la StackLayout.Margin proprietà su un valore definito a livello ResourceDictionarydi applicazione.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. Si noti che Editor gli Button stili impliciti e sono stati aggiunti a livello ResourceDictionarydi pagina NoteEntryPage, perché vengono utilizzati solo da.Note that the Editor and Button implicit styles were added to the page-level ResourceDictionary, because they are only consumed by the NoteEntryPage. Per ulteriori informazioni sullo stile XAML, vedere la pagina relativa all'applicazione di stili nella Guida introduttiva a Novell. Forms.For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    Salvare le modifiche apportate a NoteEntryPage. XAML scegliendo file > Salva (o premendo ⌘ + S) e chiudere il file.Save the changes to NoteEntryPage.xaml by choosing File > Save (or by pressing ⌘ + S), and close the file.

  5. Compilare ed eseguire il progetto in ogni piattaforma.Build and run the project on each platform. Per ulteriori informazioni, vedere la pagina relativa alla compilazione della Guida introduttiva.For more information, see Building the quickstart.

    In NotesPage premere il + pulsante per passare al NoteEntryPage e immettere una nota.On the NotesPage press the + button to navigate to the NoteEntryPage and enter a note. In ogni pagina osservare come lo stile è stato modificato rispetto alla Guida introduttiva precedente.On each page, observe how the styling has changed from the previous quickstart.

Passaggi successiviNext steps

In questa Guida introduttiva si è appreso come:In this quickstart, you learned how to:

  • Applicare uno stile a un'applicazione Novell. Forms usando gli stili XAML.Style a Xamarin.Forms application using XAML styles.

Per altre informazioni sulle nozioni di base dello sviluppo di applicazioni con Novell. Forms, passare alla Guida introduttiva di avvio rapido.To learn more about the fundamentals of application development using Xamarin.Forms, continue to the quickstart deep dive.