Applicare uno stile a un'applicazione multipiattaforma Xamarin.Forms

  • Articolo

Download Sample Scaricare l'esempio

In questo argomento di avvio rapido si apprenderà come:

  • Applicare uno stile a un'applicazione Xamarin.Forms Shell usando gli stili XAML.
  • Usa xaml Ricaricamento rapido per visualizzare le modifiche dell'interfaccia utente senza ricompilare l'applicazione.

La guida introduttiva illustra come applicare uno stile a un'applicazione multipiattaforma Xamarin.Forms con stili XAML. La guida introduttiva usa anche Ricaricamento rapido XAML per aggiornare l'interfaccia utente dell'applicazione in esecuzione, senza dover ricompilare l'applicazione. Per altre informazioni sui Ricaricamento rapido XAML, vedere Ricaricamento rapido XAML per Xamarin.Forms.

L'applicazione finale è riportata di seguito:

Notes PageNote Entry PageAbout Page

Prerequisiti

È consigliabile completare l'argomento di avvio rapido precedente prima di provare con questo. In alternativa, scaricare l'esempio di avvio rapido precedente e usarlo come punto di partenza per questo avvio rapido.

Aggiornare l'app con Visual Studio

  1. Avviare Visual Studio e aprire la soluzione Notes.

  2. Compilare ed eseguire il progetto nella piattaforma scelta. Per altre informazioni, vedere Compilazione dell'avvio rapido.

    Lasciare l'applicazione in esecuzione e tornare a Visual Studio.

  3. Nel progetto Notes in Esplora soluzioni aprire App.xaml. quindi sostituire il codice esistente con il seguente:

    <?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">

    <!-- Resources used by multiple pages in the application -->         
    <Application.Resources>

        <Thickness x:Key="PageMargin">20</Thickness>

        <!-- Colors -->
        <Color x:Key="AppPrimaryColor">#1976D2</Color>
        <Color x:Key="AppBackgroundColor">AliceBlue</Color>
        <Color x:Key="PrimaryColor">Black</Color>
        <Color x:Key="SecondaryColor">White</Color>
        <Color x:Key="TertiaryColor">Silver</Color>

        <!-- Implicit styles -->
        <Style TargetType="ContentPage"
               ApplyToDerivedTypes="True">
            <Setter Property="BackgroundColor"
                    Value="{StaticResource AppBackgroundColor}" />
        </Style>

        <Style TargetType="Button">
            <Setter Property="FontSize"
                    Value="Medium" />
            <Setter Property="BackgroundColor"
                    Value="{StaticResource AppPrimaryColor}" />
            <Setter Property="TextColor"
                    Value="{StaticResource SecondaryColor}" />
            <Setter Property="CornerRadius"
                    Value="5" />
        </Style>

    </Application.Resources>
</Application>

    Questo codice definisce un Thickness valore, una serie di Color valori e stili impliciti per i ContentPage tipi e Button . Si noti che questi stili, disponibili nella classe ResourceDictionary a livello di applicazione, possono essere utilizzati in tutta l'applicazione. Per altre informazioni sullo stile XAML, vedi Applicazione di stili nella Xamarin.Forms guida introduttiva approfondimento.

    Dopo aver apportato le modifiche a App.xaml, xaml Ricaricamento rapido aggiornerà l'interfaccia utente dell'app in esecuzione, senza dover ricompilare l'applicazione. In particolare, il colore di sfondo di ogni pagina cambierà. Per impostazione predefinita, Ricaricamento rapido applica le modifiche immediatamente dopo l'arresto della digitazione. Tuttavia, esiste un'impostazione di preferenza che può essere modificata, se si preferisce, attendere il salvataggio del file per applicare le modifiche.

  4. Nel progetto Notes in Esplora soluzioni aprire AppShell.xaml. quindi sostituire il codice esistente con il seguente:

    <?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Notes.Views"
       x:Class="Notes.AppShell">

    <Shell.Resources>
        <!-- Style Shell elements -->
        <Style x:Key="BaseStyle"
               TargetType="Element">
            <Setter Property="Shell.BackgroundColor"
                    Value="{StaticResource AppPrimaryColor}" />
            <Setter Property="Shell.ForegroundColor"
                    Value="{StaticResource SecondaryColor}" />
            <Setter Property="Shell.TitleColor"
                    Value="{StaticResource SecondaryColor}" />
            <Setter Property="Shell.TabBarUnselectedColor"
                    Value="#95FFFFFF"/>
        </Style>
        <Style TargetType="TabBar"
               BasedOn="{StaticResource BaseStyle}" />
    </Shell.Resources>

    <!-- Display a bottom tab bar containing two tabs -->   
    <TabBar>
        <ShellContent Title="Notes"
                      Icon="icon_feed.png"
                      ContentTemplate="{DataTemplate views:NotesPage}" />
        <ShellContent Title="About"
                      Icon="icon_about.png"
                      ContentTemplate="{DataTemplate views:AboutPage}" />
    </TabBar>
</Shell>

    Questo codice aggiunge due stili al Shell dizionario risorse, che definiscono una serie di Color valori usati dall'applicazione.

    Dopo aver apportato le modifiche a AppShell.xaml, xaml Ricaricamento rapido aggiornerà l'interfaccia utente dell'app in esecuzione, senza ricompilare l'applicazione. In particolare, il colore di sfondo del riquadro shell cambierà.

  5. In Esplora soluzioni, nel progetto Notes aprire NotesPage.xaml nella cartella Views. quindi sostituire il codice esistente con il seguente:

    <?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.Views.NotesPage"
             Title="Notes">

    <ContentPage.Resources>
        <!-- Define a visual state for the Selected state of the CollectionView -->
        <Style TargetType="StackLayout">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal" />
                        <VisualState x:Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor"
                                        Value="{StaticResource AppPrimaryColor}" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </ContentPage.Resources>

    <!-- Add an item to the toolbar -->
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Add"
                     Clicked="OnAddClicked" />
    </ContentPage.ToolbarItems>

    <!-- Display notes in a list -->
    <CollectionView x:Name="collectionView"
                    Margin="{StaticResource PageMargin}"
                    SelectionMode="Single"
                    SelectionChanged="OnSelectionChanged">
        <CollectionView.ItemsLayout>
            <LinearItemsLayout Orientation="Vertical"
                               ItemSpacing="10" />
        </CollectionView.ItemsLayout>
        <!-- Define the appearance of each item in the list -->
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <StackLayout>
                    <Label Text="{Binding Text}"
                           FontSize="Medium" />
                    <Label Text="{Binding Date}"
                           TextColor="{StaticResource TertiaryColor}"
                           FontSize="Small" />
                </StackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

    Questo codice aggiunge uno stile implicito per che StackLayout definisce l'aspetto di ogni elemento selezionato in CollectionView, a livello ResourceDictionarydi pagina e imposta la CollectionView.Margin proprietà e Label.TextColor sui valori definiti a livello ResourceDictionarydi applicazione . Si noti che lo stile StackLayout implicito è stato aggiunto alla classe ResourceDictionary a livello di pagina, perché viene utilizzato solo da NotesPage.

    Dopo aver apportato le modifiche a NotesPage.xaml, xaml Ricaricamento rapido aggiornerà l'interfaccia utente dell'app in esecuzione, senza ricompilare l'applicazione. In particolare, il colore degli elementi selezionati in CollectionView cambierà.

  6. Nel progetto Notes in Esplora soluzioni aprire NoteEntryPage.xaml nella cartella Views. quindi sostituire il codice esistente con il seguente:

    <?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.Views.NoteEntryPage"
             Title="Note Entry">
    <ContentPage.Resources>
        <!-- Implicit styles -->
        <Style TargetType="{x:Type Editor}">
            <Setter Property="BackgroundColor"
                    Value="{StaticResource AppBackgroundColor}" />
        </Style>         
    </ContentPage.Resources>

    <!-- Layout children vertically -->
    <StackLayout Margin="{StaticResource PageMargin}">
        <Editor Placeholder="Enter your note"
                Text="{Binding Text}"
                HeightRequest="100" />
        <Grid ColumnDefinitions="*,*">
            <!-- Layout children in two columns -->
            <Button Text="Save"
                    Clicked="OnSaveButtonClicked" />
            <Button Grid.Column="1"
                    Text="Delete"
                    Clicked="OnDeleteButtonClicked"/>
        </Grid>
    </StackLayout>
</ContentPage>

    Questo codice aggiunge uno stile implicito per la classe Editor alla classe ResourceDictionary a livello di pagina e imposta la proprietà StackLayout.Margin su un valore definito nella classe ResourceDictionary a livello di applicazione. Si noti che gli Editor stili impliciti sono stati aggiunti a livello ResourceDictionary di pagina perché vengono utilizzati solo da NoteEntryPage.

  7. Nell'applicazione in esecuzione passare a NoteEntryPage.

    XAML Ricaricamento rapido aggiornato l'interfaccia utente dell'applicazione, senza ricompilarla. In particolare, il colore di sfondo dell'oggetto Editor modificato nell'applicazione in esecuzione, nonché l'aspetto degli Button oggetti.

  8. Nel progetto Notes Esplora soluzioni aprire AboutPage.xaml nella cartella Views. quindi sostituire il codice esistente con il seguente:

    <?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.Views.AboutPage"
             Title="About">
    <!-- Layout children in two rows -->
    <Grid RowDefinitions="Auto,*">
        <Image Source="xamarin_logo.png"
               BackgroundColor="{StaticResource AppPrimaryColor}"
               Opacity="0.85"
               VerticalOptions="Center"
               HeightRequest="64" />
        <!-- Layout children vertically -->       
        <StackLayout Grid.Row="1"
                     Margin="{StaticResource PageMargin}"
                     Spacing="20">
            <Label FontSize="22">
                <Label.FormattedText>
                    <FormattedString>
                        <FormattedString.Spans>
                            <Span Text="Notes"
                                  FontAttributes="Bold"
                                  FontSize="22" />
                            <Span Text=" v1.0" />
                        </FormattedString.Spans>
                    </FormattedString>
                </Label.FormattedText>
            </Label>
            <Label Text="This app is written in XAML and C# with the Xamarin Platform." />
            <Button Text="Learn more"
                    Clicked="OnButtonClicked" />
        </StackLayout>
    </Grid>
</ContentPage>

    Questo codice imposta le Image.BackgroundColor proprietà e StackLayout.Margin sui valori definiti nel livello ResourceDictionaryapplicazione .

  9. Nell'applicazione in esecuzione passare a AboutPage.

    XAML Ricaricamento rapido aggiornato l'interfaccia utente dell'applicazione, senza ricompilarla. In particolare, il colore di sfondo dell'oggetto Image modificato nell'applicazione in esecuzione.

Aggiornare l'app con Visual Studio per Mac

  1. Avviare Visual Studio per Mac e aprire il progetto Notes.

  2. Compilare ed eseguire il progetto nella piattaforma scelta. Per altre informazioni, vedere Compilazione dell'avvio rapido.

    Lasciare l'applicazione in esecuzione e tornare a Visual Studio per Mac.

  3. Nel riquadro della soluzione aprire App.xaml nel progetto Notes. quindi sostituire il codice esistente con il seguente:

    <?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">

    <!-- Resources used by multiple pages in the application -->                 
    <Application.Resources>

        <Thickness x:Key="PageMargin">20</Thickness>

        <!-- Colors -->
        <Color x:Key="AppPrimaryColor">#1976D2</Color>
        <Color x:Key="AppBackgroundColor">AliceBlue</Color>
        <Color x:Key="PrimaryColor">Black</Color>
        <Color x:Key="SecondaryColor">White</Color>
        <Color x:Key="TertiaryColor">Silver</Color>

        <!-- Implicit styles -->
        <Style TargetType="ContentPage"
               ApplyToDerivedTypes="True">
            <Setter Property="BackgroundColor"
                    Value="{StaticResource AppBackgroundColor}" />
        </Style>

        <Style TargetType="Button">
            <Setter Property="FontSize"
                    Value="Medium" />
            <Setter Property="BackgroundColor"
                    Value="{StaticResource AppPrimaryColor}" />
            <Setter Property="TextColor"
                    Value="{StaticResource SecondaryColor}" />
            <Setter Property="CornerRadius"
                    Value="5" />
        </Style>  
    </Application.Resources>
</Application>

    Questo codice definisce un Thickness valore, una serie di Color valori e stili impliciti per i ContentPage tipi e Button . Si noti che questi stili, disponibili nella classe ResourceDictionary a livello di applicazione, possono essere utilizzati in tutta l'applicazione. Per altre informazioni sullo stile XAML, vedi Applicazione di stili nella Xamarin.Forms guida introduttiva approfondimento.

    Dopo aver apportato le modifiche a App.xaml, xaml Ricaricamento rapido aggiornerà l'interfaccia utente dell'app in esecuzione, senza dover ricompilare l'applicazione. In particolare, il colore di sfondo di ogni pagina cambierà. Per impostazione predefinita, Ricaricamento rapido applica le modifiche immediatamente dopo l'arresto della digitazione. Tuttavia, esiste un'impostazione di preferenza che può essere modificata, se si preferisce, attendere il salvataggio del file per applicare le modifiche.

  4. Nel riquadro della soluzione aprire AppShell.xaml nel progetto Notes. quindi sostituire il codice esistente con il seguente:

    <?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Notes.Views"
       x:Class="Notes.AppShell">

    <Shell.Resources>
        <!-- Style Shell elements -->
        <Style x:Key="BaseStyle"
               TargetType="Element">
            <Setter Property="Shell.BackgroundColor"
                    Value="{StaticResource AppPrimaryColor}" />
            <Setter Property="Shell.ForegroundColor"
                    Value="{StaticResource SecondaryColor}" />
            <Setter Property="Shell.TitleColor"
                    Value="{StaticResource SecondaryColor}" />
            <Setter Property="Shell.TabBarUnselectedColor"
                    Value="#95FFFFFF"/>
        </Style>
        <Style TargetType="TabBar"
               BasedOn="{StaticResource BaseStyle}" />
    </Shell.Resources>

    <!-- Display a bottom tab bar containing two tabs -->
    <TabBar>
        <ShellContent Title="Notes"
                      Icon="icon_feed.png"
                      ContentTemplate="{DataTemplate views:NotesPage}" />
        <ShellContent Title="About"
                      Icon="icon_about.png"
                      ContentTemplate="{DataTemplate views:AboutPage}" />
    </TabBar>
</Shell>

    Questo codice aggiunge due stili al Shell dizionario risorse, che definiscono una serie di Color valori usati dall'applicazione.

    Dopo aver apportato le modifiche a AppShell.xaml, xaml Ricaricamento rapido aggiornerà l'interfaccia utente dell'app in esecuzione, senza ricompilare l'applicazione. In particolare, il colore di sfondo del riquadro shell cambierà.

  5. Nel riquadro della soluzione aprire NotesPage.xaml nella cartella Views nel progetto Notes. quindi sostituire il codice esistente con il seguente:

    <?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.Views.NotesPage"
             Title="Notes">

    <ContentPage.Resources>
        <!-- Define a visual state for the Selected state of the CollectionView -->
        <Style TargetType="StackLayout">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal" />
                        <VisualState x:Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor"
                                        Value="{StaticResource AppPrimaryColor}" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </ContentPage.Resources>

    <!-- Add an item to the toolbar -->
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Add"
                     Clicked="OnAddClicked" />
    </ContentPage.ToolbarItems>

    <!-- Display notes in a list -->
    <CollectionView x:Name="collectionView"
                    Margin="{StaticResource PageMargin}"
                    SelectionMode="Single"
                    SelectionChanged="OnSelectionChanged">
        <CollectionView.ItemsLayout>
            <LinearItemsLayout Orientation="Vertical"
                               ItemSpacing="10" />
        </CollectionView.ItemsLayout>
        <!-- Define the appearance of each item in the list -->
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <StackLayout>
                    <Label Text="{Binding Text}"
                           FontSize="Medium" />
                    <Label Text="{Binding Date}"
                           TextColor="{StaticResource TertiaryColor}"
                           FontSize="Small" />
                </StackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

    Questo codice aggiunge uno stile implicito per che StackLayout definisce l'aspetto di ogni elemento selezionato in CollectionView, a livello ResourceDictionarydi pagina e imposta la CollectionView.Margin proprietà e Label.TextColor sui valori definiti a livello ResourceDictionarydi applicazione . Si noti che lo stile StackLayout implicito è stato aggiunto alla classe ResourceDictionary a livello di pagina, perché viene utilizzato solo da NotesPage.

    Dopo aver apportato le modifiche a NotesPage.xaml, xaml Ricaricamento rapido aggiornerà l'interfaccia utente dell'app in esecuzione, senza ricompilare l'applicazione. In particolare, il colore degli elementi selezionati in CollectionView cambierà.

  6. Nel riquadro della soluzione aprire NoteEntryPage.xaml nel progetto Notes nella cartella Views. quindi sostituire il codice esistente con il seguente:

    <?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.Views.NoteEntryPage"
             Title="Note Entry">
    <ContentPage.Resources>
        <!-- Implicit styles -->
        <Style TargetType="{x:Type Editor}">
            <Setter Property="BackgroundColor"
                    Value="{StaticResource AppBackgroundColor}" />
        </Style>       
    </ContentPage.Resources>

    <!-- Layout children vertically -->
    <StackLayout Margin="{StaticResource PageMargin}">
        <Editor Placeholder="Enter your note"
                Text="{Binding Text}"
                HeightRequest="100" />
        <!-- Layout children in two columns -->
        <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 a livello di pagina ResourceDictionarye imposta la StackLayout.Margin proprietà su un valore definito a livello ResourceDictionarydi applicazione. Si noti che lo Editor stile implicito è stato aggiunto al livello ResourceDictionary di pagina perché viene utilizzato solo da NoteEntryPage.

  7. Nell'applicazione in esecuzione passare a NoteEntryPage.

    XAML Ricaricamento rapido aggiornato l'interfaccia utente dell'applicazione, senza ricompilarla. In particolare, il colore di sfondo dell'oggetto Editor modificato nell'applicazione in esecuzione, nonché l'aspetto degli Button oggetti.

  8. Nel riquadro della soluzione, nel progetto Notes, aprire AboutPage.xaml nella cartella Views. quindi sostituire il codice esistente con il seguente:

    <?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.Views.AboutPage"
             Title="About">
    <!-- Layout children in two rows -->
    <Grid RowDefinitions="Auto,*">
        <Image Source="xamarin_logo.png"
               BackgroundColor="{StaticResource AppPrimaryColor}"
               Opacity="0.85"
               VerticalOptions="Center"
               HeightRequest="64" />
        <!-- Layout children vertically -->
        <StackLayout Grid.Row="1"
                     Margin="{StaticResource PageMargin}"
                     Spacing="20">
            <Label FontSize="22">
                <Label.FormattedText>
                    <FormattedString>
                        <FormattedString.Spans>
                            <Span Text="Notes"
                                  FontAttributes="Bold"
                                  FontSize="22" />
                            <Span Text=" v1.0" />
                        </FormattedString.Spans>
                    </FormattedString>
                </Label.FormattedText>
            </Label>
            <Label Text="This app is written in XAML and C# with the Xamarin Platform." />
            <Button Text="Learn more"
                    Clicked="OnButtonClicked" />
        </StackLayout>
    </Grid>
</ContentPage>

    Questo codice imposta le Image.BackgroundColor proprietà e StackLayout.Margin sui valori definiti nel livello ResourceDictionaryapplicazione .

  9. Nell'applicazione in esecuzione passare a AboutPage.

    XAML Ricaricamento rapido aggiornato l'interfaccia utente dell'applicazione, senza ricompilarla. In particolare, il colore di sfondo dell'oggetto Image modificato nell'applicazione in esecuzione.

Passaggi successivi

In questa guida introduttiva si è appreso come:

  • Applicare uno stile a un'applicazione Xamarin.Forms Shell usando gli stili XAML.
  • Usa xaml Ricaricamento rapido per visualizzare le modifiche dell'interfaccia utente senza ricompilare l'applicazione.

Per altre informazioni sui concetti fondamentali dello sviluppo di applicazioni con Xamarin.Forms Shell, continuare con l'approfondimento della guida introduttiva.

Avanti