Estilizar um aplicativo multiplataforma Xamarin.Forms

  • Artigo

Baixar exemplo Baixar o exemplo

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

  • Estilo um Xamarin.Forms aplicativo Shell usando estilos XAML.
  • Use Recarga Dinâmica XAML para ver as alterações da interface do usuário sem recompilar seu aplicativo.

O início rápido explica como estilizar um aplicativo multiplataforma Xamarin.Forms com estilos XAML. Além disso, o início rápido usa Recarga Dinâmica XAML para atualizar a interface do usuário do aplicativo em execução, sem precisar recompilar o aplicativo. Para obter mais informações sobre Recarga Dinâmica XAML, consulte Recarga Dinâmica XAML para Xamarin.Forms.

O aplicativo final é mostrado abaixo:

Página de Entrada de Anotação da Página de Anotaçõessobre 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. Como alternativa, baixe o exemplo de início rápido anterior e use-o como o ponto de partida para 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. Compile e execute o projeto em sua 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. Em Gerenciador de Soluções, no projeto Anotações, 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 Estilo no Xamarin.Forms Início Rápido Aprofundado.

    Depois de fazer as alterações no App.xaml, o Recarga Dinâmica XAML atualizará a interface do usuário do aplicativo em execução, sem a necessidade de recompilar o aplicativo. Especificamente, a cor da tela de fundo de cada página será alterada. Por padrão, Recarga Dinâmica aplica alterações imediatamente após parar de digitar. No entanto, há uma configuração de preferência que pode ser alterada, se preferir, para aguardar até que o arquivo seja salvo para aplicar alterações.

  4. Em Gerenciador de Soluções, no projeto Anotações, 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 define uma série de Color valores usados pelo aplicativo.

    Depois de fazer as alterações do AppShell.xaml, o Recarga Dinâmica XAML atualizará a interface do usuário do aplicativo em execução, sem recompilar o aplicativo. Especificamente, a cor da tela de fundo do cromo shell será alterada.

  5. Em Gerenciador de Soluções, no projeto Anotações, abra NotesPage.xaml na pasta Exibições. 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, ao nível ResourceDictionaryda página e define a CollectionView.Margin propriedade e Label.TextColor como 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 de NotesPage.xaml, o Recarga Dinâmica XAML atualizará a interface do usuário do aplicativo em execução, sem recompilar o aplicativo. Especificamente, a cor dos itens selecionados no CollectionView será alterada.

  6. No Gerenciador de Soluções, no projeto Anotações, abra NoteEntryPage.xaml na pasta Exibições. 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 Editor estilos implícitos foram adicionados ao nível ResourceDictionary da página porque ele só é consumido pelo NoteEntryPage.

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

    O XAML Recarga Dinâmica atualizado a interface do usuário do aplicativo, sem recompilá-lo. Especificamente, a cor da tela de fundo do Editor alterada no aplicativo em execução, bem como a aparência dos Button objetos.

  8. No Gerenciador de Soluções, no projeto Anotações, abra AboutPage.xaml na pasta Exibições. 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 como valores definidos no nível ResourceDictionarydo aplicativo.

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

    O XAML Recarga Dinâmica atualizado a interface do usuário do aplicativo, sem recompilá-lo. Especificamente, a cor da tela de fundo do Image alterada 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. Compile e execute o projeto em sua plataforma escolhida. Para obter mais informações, confira Como criar o guia de início rápido.

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

  3. No Painel de Soluções, no projeto Anotações , 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 Estilo no Xamarin.Forms Início Rápido Aprofundado.

    Depois de fazer as alterações no App.xaml, o Recarga Dinâmica XAML atualizará a interface do usuário do aplicativo em execução, sem a necessidade de recompilar o aplicativo. Especificamente, a cor da tela de fundo de cada página será alterada. Por padrão, Recarga Dinâmica aplica alterações imediatamente após parar de digitar. No entanto, há uma configuração de preferência que pode ser alterada, se preferir, para aguardar até que o arquivo seja salvo para aplicar alterações.

  4. No Painel de Soluções, no projeto Anotações , 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 define uma série de Color valores usados pelo aplicativo.

    Depois de fazer as alterações do AppShell.xaml, o Recarga Dinâmica XAML atualizará a interface do usuário do aplicativo em execução, sem recompilar o aplicativo. Especificamente, a cor da tela de fundo do cromo shell será alterada.

  5. No Painel de Soluções, no projeto Anotações , abra NotesPage.xaml na pasta Exibições . 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, ao nível ResourceDictionaryda página e define a CollectionView.Margin propriedade e Label.TextColor como 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 de NotesPage.xaml, o Recarga Dinâmica XAML atualizará a interface do usuário do aplicativo em execução, sem recompilar o aplicativo. Especificamente, a cor dos itens selecionados no CollectionView será alterada.

  6. No Painel de Soluções, no projeto Anotações , abra NoteEntryPage.xaml na pasta Exibições . 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 no nível ResourceDictionaryda 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 é consumido apenas pelo NoteEntryPage.

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

    O XAML Recarga Dinâmica atualizado a interface do usuário do aplicativo, sem recompilá-lo. Especificamente, a cor da tela de fundo do Editor alterada no aplicativo em execução, bem como a aparência dos Button objetos.

  8. No Painel de Soluções, no projeto Anotações , abra AboutPage.xaml na pasta Exibições . 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 como valores definidos no nível ResourceDictionarydo aplicativo.

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

    O XAML Recarga Dinâmica atualizado a interface do usuário do aplicativo, sem recompilá-lo. Especificamente, a cor da tela de fundo do Image alterada no aplicativo em execução.

Próximas etapas

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

  • Estilo um Xamarin.Forms aplicativo Shell usando estilos XAML.
  • Use Recarga Dinâmica XAML para ver as alterações da interface do usuário sem recompilar seu aplicativo.

Para saber mais sobre os conceitos básicos do desenvolvimento de aplicativos usando Xamarin.Forms o Shell, prossiga para o início rápido aprofundado.

Próximo