Aplicar estilo a una aplicación de Xamarin.Forms multiplataformaStyle a Cross-Platform Xamarin.Forms Application

Descargar ejemplo descargar el ejemploDownload Sample Download the sample

En este tutorial, obtendrá información sobre cómo:In this quickstart, you will learn how to:

  • Aplicar estilo a una aplicación de Xamarin.Forms con estilos XAML.Style a Xamarin.Forms application using XAML styles.

La Guía de inicio rápido le guía en una aplicación de Xamarin.Forms multiplataforma de estilo con estilos XAML.The quickstart walks through how to style a cross-platform Xamarin.Forms application with XAML styles. A continuación se muestra la aplicación final:The final application is shown below:

Requisitos previosPrerequisites

Debe completar correctamente el inicio rápido anterior antes de intentar este inicio rápido.You should successfully complete the previous quickstart before attempting this quickstart. Como alternativa, descargue el anterior ejemplo de tutorial rápido y usarlo como punto de partida para este inicio rápido.Alternatively, download the previous quickstart sample and use it as the starting point for this quickstart.

Actualizar la aplicación con Visual StudioUpdate the app with Visual Studio

  1. Inicie Visual Studio y abra la solución de notas.Launch Visual Studio and open the Notes solution.

  2. En el Explorador de soluciones, en el notas del proyecto, haga doble clic en App.xaml para abrirlo.In Solution Explorer, in the Notes project, double-click App.xaml to open it. A continuación, reemplace el código existente por el código siguiente: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>
    

    Este código define un Thickness valor, una serie de Color valores y los estilos implícitos para el NavigationPage y ContentPage .This code defines a Thickness value, a series of Color values, and implicit styles for the NavigationPage and ContentPage. Observe que estos estilos, que se encuentran en el nivel de aplicación ResourceDictionary , pueden utilizarse en toda la aplicación.Note that these styles, which are in the application-level ResourceDictionary, can be consumed throughout the application. Para obtener más información acerca de la aplicación de estilos de XAML, vea estilo en el análisis detallado de inicio rápido de Xamarin.Forms.For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    Guarde los cambios en App.xaml presionando CTRL+Sy cierre el archivo.Save the changes to App.xaml by pressing CTRL+S, and close the file.

  3. En el Explorador de soluciones, en el notas del proyecto, haga doble clic en NotesPage.xaml para abrirlo.In Solution Explorer, in the Notes project, double-click NotesPage.xaml to open it. A continuación, reemplace el código existente por el código siguiente: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>
    

    Este código agrega un estilo implícito para la ListView para el nivel de página ResourceDictionary y establece el ListView.Margin propiedad a un valor definido en el nivel de aplicación ResourceDictionary .This code adds an implicit style for the ListView to the page-level ResourceDictionary, and sets the ListView.Margin property to a value defined in the application-level ResourceDictionary. Tenga en cuenta que el ListView estilo implícito se agregó en el nivel de página ResourceDictionary, ya que sólo es usado por el NotesPage.Note that the ListView implicit style was added to the page-level ResourceDictionary, because it is only consumed by the NotesPage. Para obtener más información acerca de la aplicación de estilos de XAML, vea estilo en el análisis detallado de inicio rápido de Xamarin.Forms.For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    Guarde los cambios en NotesPage.xaml presionando CTRL+Sy cierre el archivo.Save the changes to NotesPage.xaml by pressing CTRL+S, and close the file.

  4. En el panel de solución, en el notas del proyecto, haga doble clic en NoteEntryPage.xaml para abrirlo.In the Solution Pad, in the Notes project, double-click NoteEntryPage.xaml to open it. A continuación, reemplace el código existente por el código siguiente: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>
    

    Este código agrega los estilos implícitos para el Editor y Button vistas en el nivel de página ResourceDictionary y establece el StackLayout.Margin propiedad a un valor definido en el nivel de aplicación ResourceDictionary.This code adds implicit styles for the Editor and Button views to the page-level ResourceDictionary, and sets the StackLayout.Margin property to a value defined in the application-level ResourceDictionary. Tenga en cuenta que el Editor y Button se agregaron los estilos implícitos en el nivel de página ResourceDictionary, ya que solo consumen el NoteEntryPage.Note that the Editor and Button implicit styles were added to the page-level ResourceDictionary, because they are only consumed by the NoteEntryPage. Para obtener más información acerca de la aplicación de estilos de XAML, vea estilo en el análisis detallado de inicio rápido de Xamarin.Forms.For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    Guarde los cambios en NoteEntryPage.xaml presionando CTRL+Sy cierre el archivo.Save the changes to NoteEntryPage.xaml by pressing CTRL+S, and close the file.

  5. Compile y ejecute el proyecto en cada plataforma.Build and run the project on each platform. Para obtener más información, consulte crear la Guía de inicio rápido.For more information, see Building the quickstart.

    En el NotesPage presione el + botón para navegar a la NoteEntryPage y escriba una nota.On the NotesPage press the + button to navigate to the NoteEntryPage and enter a note. En cada página, observe cómo ha cambiado el estilo desde el inicio rápido anterior.On each page, observe how the styling has changed from the previous quickstart.

Actualizar la aplicación con Visual Studio para MacUpdate the app with Visual Studio for Mac

  1. Inicie Visual Studio para Mac y abra el proyecto de notas.Launch Visual Studio for Mac and open the Notes project.

  2. En el panel de solución, en el notas del proyecto, haga doble clic en App.xaml para abrirlo.In the Solution Pad, in the Notes project, double-click App.xaml to open it. A continuación, reemplace el código existente por el código siguiente: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>
    

    Este código define un Thickness valor, una serie de Color valores y los estilos implícitos para el NavigationPage y ContentPage .This code defines a Thickness value, a series of Color values, and implicit styles for the NavigationPage and ContentPage. Observe que estos estilos, que se encuentran en el nivel de aplicación ResourceDictionary , pueden utilizarse en toda la aplicación.Note that these styles, which are in the application-level ResourceDictionary, can be consumed throughout the application. Para obtener más información acerca de la aplicación de estilos de XAML, vea estilo en el análisis detallado de inicio rápido de Xamarin.Forms.For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    Guarde los cambios en App.xaml eligiendo archivo > Guardar (o presionando ⌘ + S) y cierre el archivo.Save the changes to App.xaml by choosing File > Save (or by pressing ⌘ + S), and close the file.

  3. En el Explorador de soluciones, en el notas del proyecto, haga doble clic en NotesPage.xaml para abrirlo.In Solution Explorer, in the Notes project, double-click NotesPage.xaml to open it. A continuación, reemplace el código existente por el código siguiente: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>
    

    Este código agrega un estilo implícito para la ListView para el nivel de página ResourceDictionary y establece el ListView.Margin propiedad a un valor definido en el nivel de aplicación ResourceDictionary .This code adds an implicit style for the ListView to the page-level ResourceDictionary, and sets the ListView.Margin property to a value defined in the application-level ResourceDictionary. Tenga en cuenta que el ListView estilo implícito se agregó en el nivel de página ResourceDictionary, ya que sólo es usado por el NotesPage.Note that the ListView implicit style was added to the page-level ResourceDictionary, because it is only consumed by the NotesPage. Para obtener más información acerca de la aplicación de estilos de XAML, vea estilo en el análisis detallado de inicio rápido de Xamarin.Forms.For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    Guarde los cambios en NotesPage.xaml eligiendo archivo > Guardar (o presionando ⌘ + S) y cierre el archivo.Save the changes to NotesPage.xaml by choosing File > Save (or by pressing ⌘ + S), and close the file.

  4. En el Explorador de soluciones, en el notas del proyecto, haga doble clic en NoteEntryPage.xaml para abrirlo.In Solution Explorer, in the Notes project, double-click NoteEntryPage.xaml to open it. A continuación, reemplace el código existente por el código siguiente: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>
    

    Este código agrega los estilos implícitos para el Editor y Button vistas en el nivel de página ResourceDictionary y establece el StackLayout.Margin propiedad a un valor definido en el nivel de aplicación ResourceDictionary.This code adds implicit styles for the Editor and Button views to the page-level ResourceDictionary, and sets the StackLayout.Margin property to a value defined in the application-level ResourceDictionary. Tenga en cuenta que el Editor y Button se agregaron los estilos implícitos en el nivel de página ResourceDictionary, ya que solo consumen el NoteEntryPage.Note that the Editor and Button implicit styles were added to the page-level ResourceDictionary, because they are only consumed by the NoteEntryPage. Para obtener más información acerca de la aplicación de estilos de XAML, vea estilo en el análisis detallado de inicio rápido de Xamarin.Forms.For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    Guarde los cambios en NoteEntryPage.xaml eligiendo archivo > Guardar (o presionando ⌘ + S) y cierre el archivo.Save the changes to NoteEntryPage.xaml by choosing File > Save (or by pressing ⌘ + S), and close the file.

  5. Compile y ejecute el proyecto en cada plataforma.Build and run the project on each platform. Para obtener más información, consulte crear la Guía de inicio rápido.For more information, see Building the quickstart.

    En el NotesPage presione el + botón para navegar a la NoteEntryPage y escriba una nota.On the NotesPage press the + button to navigate to the NoteEntryPage and enter a note. En cada página, observe cómo ha cambiado el estilo desde el inicio rápido anterior.On each page, observe how the styling has changed from the previous quickstart.

Pasos siguientesNext steps

En este tutorial, ha aprendido cómo:In this quickstart, you learned how to:

  • Aplicar estilo a una aplicación de Xamarin.Forms con estilos XAML.Style a Xamarin.Forms application using XAML styles.

Para obtener más información sobre los aspectos básicos del desarrollo de aplicaciones con Xamarin.Forms, continúe con el análisis detallado de inicio rápido.To learn more about the fundamentals of application development using Xamarin.Forms, continue to the quickstart deep dive.