Xamarin.Forms ScrollView
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
seul enfant ne peut avoir qu’un seul enfant, même s’il peut 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 le défilement, tels que CollectionView
, ListView
et WebView
.
ScrollView
définit les propriétés suivantes :
Content
, de typeView
, représente le contenu à afficher dans leScrollView
.ContentSize
, de typeSize
, représente la taille du contenu. Il s’agit d’une propriété en lecture seule.HorizontalScrollBarVisibility
, de typeScrollBarVisibility
, représente lorsque la barre de défilement horizontale est visible.Orientation
, de typeScrollOrientation
, représente la direction de défilement duScrollView
. La valeur par défaut de cette propriété estVertical
.ScrollX
, de typedouble
, indique la position de défilement X actuelle. La valeur par défaut de cette propriété en lecture seule est 0.ScrollY
, de typedouble
, indique la position de défilement Y actuelle. La valeur par défaut de cette propriété en lecture seule est 0.VerticalScrollBarVisibility
, de typeScrollBarVisibility
, représente lorsque la barre de défilement verticale est visible.
Ces propriétés sont sauvegardées par 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 la ContentProperty
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 pour optimiser les performances de disposition.
ScrollView en tant que disposition racine
Un ScrollView
seul enfant peut être un seul enfant, qui peut être d’autres dispositions. Il est donc courant qu’il ScrollView
s’agit de 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é que le ScrollView
contenu peut faire défiler.
Un StackLayout
sera souvent l’enfant d’un ScrollView
. Dans ce scénario, les ScrollView
causes sont StackLayout
aussi grandes que la somme des hauteurs de ses enfants. Ensuite, il ScrollView
peut déterminer la quantité que son contenu peut faire défiler. Pour plus d’informations sur stackLayout StackLayout
Xamarin.Forms.
Attention
Dans un vertical ScrollView
, évitez de définir la VerticalOptions
propriété sur Start
, Center
ou End
. Cela indique qu’il ScrollView
ne doit être aussi grand que nécessaire, ce qui pourrait être zéro. Bien que vous Xamarin.Forms soyez protégé contre cette éventualité, il est préférable d’éviter le code qui suggère quelque chose que vous ne voulez pas faire.
L’exemple XAML suivant a une ScrollView
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, son ScrollView
contenu est défini sur une StackLayout
disposition pouvant être liée pour afficher les Color
champs définis par Xamarin.Forms. Par défaut, un ScrollView
défilement vertical 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
Il ScrollView
peut s’agir d’une disposition enfant vers une autre disposition parente.
Un ScrollView
sera souvent l’enfant d’un StackLayout
. Une ScrollView
hauteur spécifique est nécessaire pour calculer la différence entre la hauteur de son contenu et sa propre hauteur, avec la différence étant la quantité que le ScrollView
contenu peut faire défiler. Lorsqu’il ScrollView
s’agit de l’enfant d’un StackLayout
, il ne reçoit pas de hauteur spécifique. La StackLayout
valeur doit ScrollView
être aussi courte que possible, soit la hauteur du ScrollView
contenu, soit zéro. Pour gérer ce scénario, la VerticalOptions
propriété de la propriété ScrollView
doit être définie sur FillAndExpand
. Cela entraînera l’ajout StackLayout
ScrollView
de l’espace supplémentaire non requis par les autres enfants, et la ScrollView
hauteur sera alors spécifique.
L’exemple XAML suivant a une ScrollView
disposition enfant à 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
en tant qu’enfant. Il ScrollView
a un StackLayout
contenu comme contenu, avec les StackLayout
objets contenant plusieurs Label
objets. Cette disposition garantit que la première Label
est toujours à l’écran, tandis que le texte affiché par les autres Label
objets peut faire défiler :
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 la direction de défilement du ScrollView
. Cette propriété est de type ScrollOrientation
, qui définit les membres suivants :
Vertical
indique que leScrollView
défilement vertical s’affiche. Ce membre est la valeur par défaut de laOrientation
propriété.Horizontal
indique que leScrollView
défilement horizontal s’affiche.Both
indique que leScrollView
défilement horizontal et vertical.Neither
indique que leScrollView
défilement n’est pas fait.
Conseil
Le défilement peut être désactivé en définissant la Orientation
propriété sur Neither
.
Détecter le défilement
ScrollView
définit un Scrolled
événement déclenché pour indiquer que le défilement s’est produit. Objet ScrolledEventArgs
qui accompagne l’événement Scrolled
a ScrollX
et ScrollY
les propriétés, tous deux de type double
.
Important
Les ScrolledEventArgs.ScrollX
propriétés peuvent ScrolledEventArgs.ScrollY
avoir des valeurs négatives, en raison de l’effet de rebond qui se produit lors du défilement jusqu’au début d’un ScrollView
.
L’exemple XAML suivant montre un ScrollView
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.
Remarque
L’événement Scrolled
est déclenché pour les défilements initiés par l’utilisateur et pour les défilements par programmation.
Faire défiler par programmation
ScrollView
définit deux ScrollToAsync
méthodes, qui défilent de manière asynchrone le ScrollView
. L’une des surcharges fait défiler jusqu’à une position spécifiée dans le ScrollView
, tandis que l’autre fait défiler un élément spécifié en mode 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 ne entraînent pas le défilement lorsque la ScrollView.Orientation
propriété est définie sur Neither
.
Faire défiler une position dans la vue
Une position à l’intérieur d’un ScrollView
peut faire défiler jusqu’à la ScrollToAsync
méthode qui accepte double
x
et y
arguments. É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 en haut du ScrollView
:
await scrollView.ScrollToAsync(0, 150, true);
Le troisième argument 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 en mode
Un élément d’un ScrollView
élément peut être défilement en vue avec la ScrollToAsync
méthode qui accepte Element
et ScrollToPosition
arguments. Compte tenu d’un nom scrollView
vertical ScrollView
et d’un Label
nomlabel
, l’exemple suivant montre comment faire défiler un élément en vue :
await scrollView.ScrollToAsync(label, ScrollToPosition.End, true);
Le troisième argument 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 en mode affichage, 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 ScrollToPosition
membre d’énumération :
MakeVisible
indique que l’élément doit faire défiler jusqu’à ce qu’il soit visible dans leScrollView
.Start
indique que l’élément doit faire défiler jusqu’au début duScrollView
.Center
indique que l’élément doit faire défiler jusqu’au centre duScrollView
.End
indique que l’élément doit faire défiler jusqu’à la fin duScrollView
.
Visibilité de la barre de défilement
ScrollView
définit HorizontalScrollBarVisibility
et VerticalScrollBarVisibility
les propriétés, qui sont sauvegardées par des propriétés pouvant être liées. Ces propriétés obtiennent ou définissent une ScrollBarVisibility
valeur d’énumération 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 propriétés etVerticalScrollBarVisibility
desHorizontalScrollBarVisibility
propriétés.Always
indique que les barres de défilement sont visibles, même lorsque le contenu s’adapte à la vue.Never
indique que les barres de défilement ne sont pas visibles, même si le contenu ne tient pas dans la vue.