Compartilhar via

Estilizar um aplicativo multiplataforma Xamarin.Forms

  • Artigo

Neste guia de início rápido, você aprenderá a:

  • Estilize um Xamarin.Forms aplicativo Shell usando estilos XAML.
  • Use o XAML Hot Reload para ver as alterações da interface do usuário sem recriar seu aplicativo.

O guia de início rápido explica como estilizar um aplicativo de plataforma Xamarin.Forms cruzada com estilos XAML. Além disso, o início rápido usa o XAML Hot Reload para atualizar a interface do usuário do aplicativo em execução, sem precisar recompilar o aplicativo. Para obter mais informações sobre XAML Hot Reload, consulte XAML Hot Reload for Xamarin.Forms.

O aplicativo final é mostrado abaixo:

Página de ObservaçõesPágina de Entrada de ObservaçãoSobre a Página

Pré-requisitos

Você deve concluir com êxito o início rápido anterior antes de tentar este guia de início rápido.

Atualizar um aplicativo com o Visual Studio

  1. Inicie o Visual Studio e abra a solução Notes.

  2. Crie e execute o projeto na plataforma escolhida. Para obter mais informações, confira Como criar o guia de início rápido.

    Deixe o aplicativo em execução e retorne ao Visual Studio.

  3. No Gerenciador de Soluções, no projeto Notes , abra App.xaml. Em seguida, substitua o código existente pelo código a seguir:

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

    Esse código define um Thickness valor, uma série de Color valores e estilos implícitos para os ContentPage tipos e Button . Observe que esses estilos, que estão no nível de aplicativo ResourceDictionary, podem ser consumidos em todo o aplicativo. Para obter mais informações sobre o estilo XAML, consulte Styling in the Xamarin.Forms Quickstart Deep Dive.

    Depois de fazer as alterações em App.xaml, o XAML Hot Reload atualizará a interface do usuário do aplicativo em execução, sem a necessidade de recriar o aplicativo. Especificamente, a cor do plano de fundo de cada página será alterada. Por padrão, o Hot Reload aplica alterações imediatamente após parar de digitar. No entanto, há uma configuração de preferência que pode ser alterada, se você preferir, para aguardar até o salvamento do arquivo para aplicar as alterações.

  4. No Gerenciador de Soluções, no projeto Notes , abra AppShell.xaml. Em seguida, substitua o código existente pelo código a seguir:

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

    Esse código adiciona dois estilos ao Shell dicionário de recursos, que definem uma série de Color valores usados pelo aplicativo.

    Depois de fazer as alterações AppShell.xaml , o XAML Hot Reload atualizará a interface do usuário do aplicativo em execução, sem recriar o aplicativo. Especificamente, a cor de fundo do cromo Shell será alterada.

  5. No Gerenciador de Soluções, no projeto Notes , abra NotesPage.xaml na pasta Views . Em seguida, substitua o código existente pelo código a seguir:

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

    Esse código adiciona um estilo implícito para o StackLayout que define a aparência de cada item selecionado no CollectionView, para o nível ResourceDictionaryde página e define a CollectionView.Margin propriedade e Label.TextColor para valores definidos no nível ResourceDictionarydo aplicativo. Observe que o estilo implícito StackLayout foi adicionado ao nível de página ResourceDictionary, pois ele só é consumido pelo NotesPage.

    Depois de fazer as alterações em NotesPage.xaml , o XAML Hot Reload atualizará a interface do usuário do aplicativo em execução, sem recriar o aplicativo. Especificamente, a cor dos itens selecionados no CollectionView será alterada.

  6. No Gerenciador de Soluções, no projeto Notes , abra NoteEntryPage.xaml na pasta Views . Em seguida, substitua o código existente pelo código a seguir:

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

    Esse código adiciona um estilo implícito para o Editor no nível de página ResourceDictionary e define a propriedade StackLayout.Margin como um valor definido no nível de aplicativo ResourceDictionary. Observe que os estilos implícitos Editor foram adicionados ao nível ResourceDictionary da página porque ele só é consumido NoteEntryPagepelo .

  7. No aplicativo em execução, navegue até o NoteEntryPage.

    O XAML Hot Reload atualizou a interface do usuário do aplicativo, sem recriá-la. Especificamente, a cor de plano de fundo do Editor alterado no aplicativo em execução, bem como a aparência dos Button objetos.

  8. No Gerenciador de Soluções, no projeto Notes , abra AboutPage.xaml na pasta Views . Em seguida, substitua o código existente pelo código a seguir:

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

    Esse código define as Image.BackgroundColor propriedades e StackLayout.Margin para valores definidos no nível ResourceDictionarydo aplicativo .

  9. No aplicativo em execução, navegue até o AboutPage.

    O XAML Hot Reload atualizou a interface do usuário do aplicativo, sem recriá-la. Especificamente, a cor de plano de fundo do Image alterado no aplicativo em execução.

Atualizar um aplicativo com o Visual Studio para Mac

  1. Inicie o Visual Studio para Mac e abra o projeto Notes.

  2. Crie e execute o projeto na plataforma escolhida. Para obter mais informações, confira Como criar o guia de início rápido.

    Deixe o aplicativo em execução e retorne ao Visual Studio para Mac.

  3. No Solution Pad, no projeto Notes, abra App.xaml. Em seguida, substitua o código existente pelo código a seguir:

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

    Esse código define um Thickness valor, uma série de Color valores e estilos implícitos para os ContentPage tipos e Button . Observe que esses estilos, que estão no nível de aplicativo ResourceDictionary, podem ser consumidos em todo o aplicativo. Para obter mais informações sobre o estilo XAML, consulte Styling in the Xamarin.Forms Quickstart Deep Dive.

    Depois de fazer as alterações em App.xaml, o XAML Hot Reload atualizará a interface do usuário do aplicativo em execução, sem a necessidade de recriar o aplicativo. Especificamente, a cor do plano de fundo de cada página será alterada. Por padrão, o Hot Reload aplica alterações imediatamente após parar de digitar. No entanto, há uma configuração de preferência que pode ser alterada, se você preferir, para aguardar até o salvamento do arquivo para aplicar as alterações.

  4. No Solution Pad, no projeto Notes, abra AppShell.xaml. Em seguida, substitua o código existente pelo código a seguir:

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

    Esse código adiciona dois estilos ao Shell dicionário de recursos, que definem uma série de Color valores usados pelo aplicativo.

    Depois de fazer as alterações AppShell.xaml , o XAML Hot Reload atualizará a interface do usuário do aplicativo em execução, sem recriar o aplicativo. Especificamente, a cor de fundo do cromo Shell será alterada.

  5. No Solution Pad, no projeto Notes, abra NotesPage.xaml na pasta Views. Em seguida, substitua o código existente pelo código a seguir:

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

    Esse código adiciona um estilo implícito para o StackLayout que define a aparência de cada item selecionado no CollectionView, para o nível ResourceDictionaryde página e define a CollectionView.Margin propriedade e Label.TextColor para valores definidos no nível ResourceDictionarydo aplicativo. Observe que o estilo implícito StackLayout foi adicionado ao nível de página ResourceDictionary, pois ele só é consumido pelo NotesPage.

    Depois de fazer as alterações em NotesPage.xaml , o XAML Hot Reload atualizará a interface do usuário do aplicativo em execução, sem recriar o aplicativo. Especificamente, a cor dos itens selecionados no CollectionView será alterada.

  6. No Solution Pad, no projeto Notes, abra NoteEntryPage.xaml na pasta Views. Em seguida, substitua o código existente pelo código a seguir:

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

    Esse código adiciona estilos implícitos para o Editor para o nível ResourceDictionaryde página e define a StackLayout.Margin propriedade como um valor definido no nível ResourceDictionarydo aplicativo. Observe que o Editor estilo implícito foi adicionado ao nível ResourceDictionary da página porque ele só é consumido NoteEntryPagepelo .

  7. No aplicativo em execução, navegue até o NoteEntryPage.

    O XAML Hot Reload atualizou a interface do usuário do aplicativo, sem recriá-la. Especificamente, a cor de plano de fundo do Editor alterado no aplicativo em execução, bem como a aparência dos Button objetos.

  8. No Solution Pad, no projeto Notes, abra AboutPage.xaml na pasta Views. Em seguida, substitua o código existente pelo código a seguir:

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

    Esse código define as Image.BackgroundColor propriedades e StackLayout.Margin para valores definidos no nível ResourceDictionarydo aplicativo .

  9. No aplicativo em execução, navegue até o AboutPage.

    O XAML Hot Reload atualizou a interface do usuário do aplicativo, sem recriá-la. Especificamente, a cor de plano de fundo do Image alterado no aplicativo em execução.

Próximas etapas

Neste guia de início rápido, você aprendeu a:

  • Estilize um Xamarin.Forms aplicativo Shell usando estilos XAML.
  • Use o XAML Hot Reload para ver as alterações da interface do usuário sem recriar seu aplicativo.

Para saber mais sobre os fundamentos do desenvolvimento de aplicativos usando Xamarin.Forms o Shell, continue para o aprofundamento de início rápido.

Próximo