Xamarin.Forms ScrollView

Télécharger l’exemple

ScrollView est une disposition capable de faire défiler son contenu. La ScrollView classe dérive de la Layout classe et, par défaut, fait défiler son contenu verticalement. Un ScrollView ne peut avoir qu’un seul enfant, bien qu’il puisse s’agir d’autres dispositions.

Avertissement

ScrollView les objets ne doivent pas être imbriqués. En outre, ScrollView les objets ne doivent pas être imbriqués avec d’autres contrôles qui fournissent un défilement, tels que CollectionView, ListViewet WebView.

ScrollView définit les propriétés suivantes :

• Content, de type View, représente le contenu à afficher dans .ScrollView
• ContentSize, de type Size, représente la taille du contenu. Il s’agit d’une propriété en lecture seule.
• HorizontalScrollBarVisibility, de type ScrollBarVisibility, représente quand la barre de défilement horizontale est visible.
• Orientation, de type ScrollOrientation, représente le sens de défilement du ScrollView. La valeur par défaut de cette propriété est Vertical.
• ScrollX, de type double, indique la position de défilement X actuelle. La valeur par défaut de cette propriété en lecture seule est 0.
• ScrollY, de type double, indique la position de défilement Y actuelle. La valeur par défaut de cette propriété en lecture seule est 0.
• VerticalScrollBarVisibility, de type ScrollBarVisibility, représente quand la barre de défilement verticale est visible.

Ces propriétés sont adossées à BindableProperty des objets, à l’exception de la Content propriété , ce qui signifie qu’elles peuvent être des cibles de liaisons de données et de style.

La Content propriété est le ContentProperty de la ScrollView classe et n’a donc pas besoin d’être définie explicitement à partir de XAML.

Conseil

Pour obtenir les meilleures performances de disposition possibles, suivez les instructions de la page Optimiser les performances de la disposition.

ScrollView en tant que disposition racine

Un ScrollView ne peut avoir qu’un seul enfant, qui peut être d’autres dispositions. Il est donc courant qu’un ScrollView soit la mise en page racine d’une page. Pour faire défiler son contenu enfant, ScrollView calcule la différence entre la hauteur de son contenu et sa propre hauteur. Cette différence est la quantité dont le ScrollView peut faire défiler son contenu.

Un StackLayout est souvent l’enfant d’un ScrollView. Dans ce scénario, le ScrollView fait que le StackLayout soit aussi grand que la somme des hauteurs de ses enfants. Ensuite, le ScrollView peut déterminer la quantité de défilement de son contenu. Pour plus d’informations sur , StackLayoutconsultez Xamarin.Forms StackLayout.

Attention

Dans un vertical ScrollView, évitez de définir la VerticalOptions propriété sur Start, Centerou End. Cela indique ScrollView au d’être aussi grand que nécessaire, ce qui pourrait être zéro. Bien qu’il Xamarin.Forms protège contre cette éventualité, il est préférable d’éviter le code qui suggère quelque chose que vous ne voulez pas voir se produire.

L’exemple XAML suivant a un ScrollView en tant que disposition racine sur une page :

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ScrollViewDemos"
             x:Class="ScrollViewDemos.Views.ColorListPage"
             Title="ScrollView demo">
    <ScrollView>
        <StackLayout BindableLayout.ItemsSource="{x:Static local:NamedColor.All}">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <StackLayout Orientation="Horizontal">
                        <BoxView Color="{Binding Color}"
                                 HeightRequest="32"
                                 WidthRequest="32"
                                 VerticalOptions="Center" />
                        <Label Text="{Binding FriendlyName}"
                               FontSize="24"
                               VerticalOptions="Center" />
                    </StackLayout>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </StackLayout>
    </ScrollView>
</ContentPage>

Dans cet exemple, le ScrollView a son contenu défini sur un StackLayout qui utilise une disposition pouvant être liée pour afficher les Color champs définis par Xamarin.Forms. Par défaut, un ScrollView défile verticalement, ce qui révèle plus de contenu :

Le code C# équivalent est :

public class ColorListPageCode : ContentPage
{
    public ColorListPageCode()
    {
        DataTemplate dataTemplate = new DataTemplate(() =>
        {
            BoxView boxView = new BoxView
            {
                HeightRequest = 32,
                WidthRequest = 32,
                VerticalOptions = LayoutOptions.Center
            };
            boxView.SetBinding(BoxView.ColorProperty, "Color");

            Label label = new Label
            {
                FontSize = 24,
                VerticalOptions = LayoutOptions.Center
            };
            label.SetBinding(Label.TextProperty, "FriendlyName");

            StackLayout horizontalStackLayout = new StackLayout
            {
                Orientation = StackOrientation.Horizontal,
                Children = { boxView, label }
            };
            return horizontalStackLayout;
        });

        StackLayout stackLayout = new StackLayout();
        BindableLayout.SetItemsSource(stackLayout, NamedColor.All);
        BindableLayout.SetItemTemplate(stackLayout, dataTemplate);

        ScrollView scrollView = new ScrollView { Content = stackLayout };

        Title = "ScrollView demo";
        Content = scrollView;
    }
}

Pour plus d’informations sur les dispositions pouvant être liées, consultez Dispositions pouvant être liées dans Xamarin.Forms.

ScrollView en tant que disposition enfant

Un ScrollView peut être une disposition enfant d’une disposition parente différente.

Un ScrollView est souvent l’enfant d’un StackLayout. Un ScrollView nécessite une hauteur spécifique pour calculer la différence entre la hauteur de son contenu et sa propre hauteur, la différence étant la quantité dont le ScrollView peut faire défiler son contenu. Quand un ScrollView est l’enfant d’un StackLayout, il ne reçoit pas de hauteur spécifique. le StackLayout veut ScrollView être aussi court que possible, soit la hauteur du ScrollView contenu, soit zéro. Pour gérer ce scénario, la VerticalOptions propriété de doit ScrollView être définie sur FillAndExpand. Cela amènera le StackLayout à donner à tout ScrollView l’espace supplémentaire non requis par les autres enfants, et le ScrollView aura ensuite une hauteur spécifique.

L’exemple XAML suivant a comme ScrollView disposition enfant d’un StackLayout:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ScrollViewDemos.Views.BlackCatPage"
             Title="ScrollView as a child layout demo">
    <StackLayout Margin="20">
        <Label Text="THE BLACK CAT by Edgar Allan Poe"
               FontSize="Medium"
               FontAttributes="Bold"
               HorizontalOptions="Center" />
        <ScrollView VerticalOptions="FillAndExpand">
            <StackLayout>
                <Label Text="FOR the most wild, yet most homely narrative which I am about to pen, I neither expect nor solicit belief. Mad indeed would I be to expect it, in a case where my very senses reject their own evidence. Yet, mad am I not -- and very surely do I not dream. But to-morrow I die, and to-day I would unburthen my soul. My immediate purpose is to place before the world, plainly, succinctly, and without comment, a series of mere household events. In their consequences, these events have terrified -- have tortured -- have destroyed me. Yet I will not attempt to expound them. To me, they have presented little but Horror -- to many they will seem less terrible than barroques. Hereafter, perhaps, some intellect may be found which will reduce my phantasm to the common-place -- some intellect more calm, more logical, and far less excitable than my own, which will perceive, in the circumstances I detail with awe, nothing more than an ordinary succession of very natural causes and effects." />
                <!-- More Label objects go here -->
            </StackLayout>
        </ScrollView>
    </StackLayout>
</ContentPage>

Dans cet exemple, il existe deux StackLayout objets. Le premier StackLayout est l’objet de disposition racine, qui a un Label objet et un ScrollView comme enfants. a ScrollView un StackLayout comme contenu, avec le StackLayout contenant plusieurs Label objets. Cette disposition garantit que le premier Label est toujours affiché à l’écran, tandis que le texte affiché par les autres Label objets peut faire l’objet d’un défilement :

Le code C# équivalent est :

public class BlackCatPageCS : ContentPage
{
    public BlackCatPageCS()
    {
        Label titleLabel = new Label
        {
            Text = "THE BLACK CAT by Edgar Allan Poe",
            // More properties set here to define the Label appearance
        };

        ScrollView scrollView = new ScrollView
        {
            VerticalOptions = LayoutOptions.FillAndExpand,
            Content = new StackLayout
            {
                Children =
                {
                    new Label
                    {
                        Text = "FOR the most wild, yet most homely narrative which I am about to pen, I neither expect nor solicit belief. Mad indeed would I be to expect it, in a case where my very senses reject their own evidence. Yet, mad am I not -- and very surely do I not dream. But to-morrow I die, and to-day I would unburthen my soul. My immediate purpose is to place before the world, plainly, succinctly, and without comment, a series of mere household events. In their consequences, these events have terrified -- have tortured -- have destroyed me. Yet I will not attempt to expound them. To me, they have presented little but Horror -- to many they will seem less terrible than barroques. Hereafter, perhaps, some intellect may be found which will reduce my phantasm to the common-place -- some intellect more calm, more logical, and far less excitable than my own, which will perceive, in the circumstances I detail with awe, nothing more than an ordinary succession of very natural causes and effects.",
                    },
                    // More Label objects go here
                }
            }
        };

        Title = "ScrollView as a child layout demo";
        Content = new StackLayout
        {
            Margin = new Thickness(20),
            Children = { titleLabel, scrollView }
        };
    }
}

Orientation

ScrollView a une Orientation propriété, qui représente le sens de défilement du ScrollView. Cette propriété est de type ScrollOrientation, qui définit les membres suivants :

• Vertical indique que le ScrollView défile verticalement. Ce membre est la valeur par défaut de la Orientation propriété .
• Horizontal indique que le ScrollView défile horizontalement.
• Both indique que le ScrollView défile horizontalement et verticalement.
• Neither indique que ne ScrollView défile pas.

Conseil

Vous pouvez désactiver le défilement en affectant à la propriété la Orientation valeur Neither.

Détecter le défilement

ScrollView définit un Scrolled événement déclenché pour indiquer que le défilement s’est produit. L’objet ScrolledEventArgs qui accompagne l’événement Scrolled a ScrollX des propriétés et ScrollY , tous deux de type double.

Important

Les ScrolledEventArgs.ScrollX propriétés et ScrolledEventArgs.ScrollY peuvent avoir des valeurs négatives, en raison de l’effet de rebond qui se produit lors de la défilement jusqu’au début d’un ScrollView.

L’exemple XAML suivant montre un ScrollView qui définit un gestionnaire d’événements pour l’événement Scrolled :

<ScrollView Scrolled="OnScrollViewScrolled">
		...
</ScrollView>

Le code C# équivalent est :

ScrollView scrollView = new ScrollView();
scrollView.Scrolled += OnScrollViewScrolled;

Dans cet exemple, le OnScrollViewScrolled gestionnaire d’événements est exécuté lorsque l’événement Scrolled se déclenche :

void OnScrollViewScrolled(object sender, ScrolledEventArgs e)
{
    Console.WriteLine($"ScrollX: {e.ScrollX}, ScrollY: {e.ScrollY}");
}

Dans cet exemple, le OnScrollViewScrolled gestionnaire d’événements génère les valeurs de l’objet ScrolledEventArgs qui accompagne l’événement.

Notes

L’événement Scrolled est déclenché pour les défilements initiés par l’utilisateur et pour les défilements programmatiques.

Faire défiler par programmation

ScrollView définit deux ScrollToAsync méthodes, qui défilent de façon asynchrone le ScrollView. L’une des surcharges défile jusqu’à une position spécifiée dans le ScrollView, tandis que l’autre fait défiler un élément spécifié dans l’affichage. Les deux surcharges ont un argument supplémentaire qui peut être utilisé pour indiquer s’il faut animer le défilement.

Important

Les ScrollToAsync méthodes n’entraînent pas de défilement lorsque la ScrollView.Orientation propriété a la valeur Neither.

Faire défiler une position dans l’affichage

Vous pouvez faire défiler une position au sein d’un avec la ScrollToAsync méthode qui accepte doublex les arguments et y .ScrollView Étant donné un objet vertical ScrollView nommé scrollView, l’exemple suivant montre comment faire défiler jusqu’à 150 unités indépendantes de l’appareil à partir du haut de :ScrollView

await scrollView.ScrollToAsync(0, 150, true);

Le troisième argument de est ScrollToAsync l’argument animated , qui détermine si une animation de défilement est affichée lors du défilement par programmation d’un ScrollView.

Faire défiler un élément dans l’affichage

Un élément au sein d’un ScrollView peut être fait défiler dans l’affichage avec la ScrollToAsync méthode qui accepte Element les arguments et ScrollToPosition . Avec un vertical ScrollView nommé scrollViewet un Label nommé label, l’exemple suivant montre comment faire défiler un élément dans l’affichage :

await scrollView.ScrollToAsync(label, ScrollToPosition.End, true);

Le troisième argument de est ScrollToAsync l’argument animated , qui détermine si une animation de défilement est affichée lors du défilement par programmation d’un ScrollView.

Lors du défilement d’un élément dans la vue, la position exacte de l’élément une fois le défilement terminé peut être définie avec le deuxième argument, position, de la ScrollToAsync méthode . Cet argument accepte un membre d’énumération ScrollToPosition :

• MakeVisible indique que l’élément doit faire défiler jusqu’à ce qu’il soit visible dans le ScrollView.
• Startindique que l’élément doit faire défiler jusqu’au début de .ScrollView
• Centerindique que l’élément doit être fait défiler jusqu’au centre de .ScrollView
• Endindique que l’élément doit être fait défiler jusqu’à la fin de .ScrollView

Visibilité de la barre de défilement

ScrollView définit HorizontalScrollBarVisibility et VerticalScrollBarVisibility les propriétés, qui sont soutenues par des propriétés pouvant être liées. Ces propriétés obtiennent ou définissent une valeur d’énumération ScrollBarVisibility qui indique si la barre de défilement horizontale ou verticale est visible. L’énumération ScrollBarVisibility définit les membres suivants :

• Default indique le comportement de la barre de défilement par défaut pour la plateforme et est la valeur par défaut des HorizontalScrollBarVisibility propriétés et VerticalScrollBarVisibility .
• Always indique que les barres de défilement seront visibles, même lorsque le contenu s’intègre dans la vue.
• Never indique que les barres de défilement ne seront pas visibles, même si le contenu ne tient pas dans la vue.

Liens connexes

• Démonstrations ScrollView (exemple)
• Xamarin.Forms StackLayout
• Dispositions pouvant être liées dans Xamarin.Forms