ScrollView
Parcourir l’exempleL’interface utilisateur de l’application multiplateforme .NET (.NET MAUI) ScrollView est une vue capable de faire défiler son contenu. Par défaut, ScrollView 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.
ScrollView définit les propriétés suivantes :
Content, de type View, représente le contenu à afficher dans le ScrollView.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 du ScrollView. 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 ContentPropertyScrollView classe et n’a donc pas besoin d’être définie explicitement à partir de XAML.
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, ListViewet WebView.
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 stackLayoutStackLayout.
Attention
Dans un vertical ScrollView, évitez de définir la VerticalOptions propriété sur Start, Centerou End. Cela indique qu’il ScrollView ne doit être aussi grand que nécessaire, ce qui pourrait être zéro. Bien que .NET MAUI protège contre cette éventualité, il est préférable d’éviter le code qui suggère quelque chose que vous ne voulez pas arriver.
L’exemple XAML suivant a une ScrollView disposition racine sur une page :
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ScrollViewDemos"
x:Class="ScrollViewDemos.Views.XAML.ColorListPage"
Title="ScrollView demo">
<ScrollView Margin="20">
<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 Colors champs définis par .NET MAUI. Par défaut, un ScrollView défilement vertical révèle plus de contenu :
Le code C# équivalent est :
public class ColorListPage : ContentPage
{
public ColorListPage()
{
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
};
horizontalStackLayout.Add(boxView);
horizontalStackLayout.Add(label);
return horizontalStackLayout;
});
StackLayout stackLayout = new StackLayout();
BindableLayout.SetItemsSource(stackLayout, NamedColor.All);
BindableLayout.SetItemTemplate(stackLayout, dataTemplate);
ScrollView scrollView = new ScrollView
{
Margin = new Thickness(20),
Content = stackLayout
};
Title = "ScrollView demo";
Content = scrollView;
}
}
Pour plus d’informations sur les dispositions pouvant être liées, consultez BindableLayout.
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 Grid. 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 Grid, il ne reçoit pas de hauteur spécifique. La Grid valeur doit ScrollView être aussi courte que possible, soit la hauteur du ScrollView contenu, soit zéro. Pour gérer ce scénario, la RowDefinitionGrid ligne qui contient la ScrollView valeur doit être définie *sur . Cela entraînera l’ajout GridScrollView 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 Grid:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ScrollViewDemos.Views.XAML.BlackCatPage"
Title="ScrollView as a child layout demo">
<Grid Margin="20"
RowDefinitions="Auto,*,Auto">
<Label Text="THE BLACK CAT by Edgar Allan Poe"
FontSize="14"
FontAttributes="Bold"
HorizontalOptions="Center" />
<ScrollView x:Name="scrollView"
Grid.Row="1"
VerticalOptions="FillAndExpand"
Scrolled="OnScrollViewScrolled">
<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>
<Button Grid.Row="2"
Text="Scroll to end"
Clicked="OnButtonClicked" />
</Grid>
</ContentPage>
Dans cet exemple, la disposition racine est une Grid disposition qui a un Label, ScrollViewet Button comme ses enfants. 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 BlackCatPage : ContentPage
{
public BlackCatPage()
{
Label titleLabel = new Label
{
Text = "THE BLACK CAT by Edgar Allan Poe",
// More properties set here to define the Label appearance
};
StackLayout stackLayout = new StackLayout();
stackLayout.Add(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
ScrollView scrollView = new ScrollView();
scrollView.Content = stackLayout;
// ...
Title = "ScrollView as a child layout demo";
Grid grid = new Grid
{
Margin = new Thickness(20),
RowDefinitions =
{
new RowDefinition { Height = new GridLength(0, GridUnitType.Auto) },
new RowDefinition { Height = new GridLength(1, GridUnitType.Star) },
new RowDefinition { Height = new GridLength(0, GridUnitType.Auto) }
}
};
grid.Add(titleLabel);
grid.Add(scrollView, 0, 1);
grid.Add(button, 0, 2);
Content = grid;
}
}
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 :
Verticalindique que le ScrollView défilement vertical s’affiche. Ce membre est la valeur par défaut de laOrientationpropriété.Horizontalindique que le ScrollView défilement horizontal s’affiche.Bothindique que le ScrollView défilement horizontal et vertical.Neitherindique que le ScrollView 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 doublex 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 scrollViewvertical 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, positionde la ScrollToAsync méthode. Cet argument accepte un ScrollToPosition membre d’énumération :
MakeVisibleindique 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 du ScrollView.Centerindique que l’élément doit faire défiler jusqu’au centre du ScrollView.Endindique que l’élément doit faire défiler jusqu’à la fin du ScrollView.
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 :
Defaultindique 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 etVerticalScrollBarVisibilitydesHorizontalScrollBarVisibilitypropriétés.Alwaysindique que les barres de défilement sont visibles, même lorsque le contenu s’adapte à la vue.Neverindique que les barres de défilement ne sont pas visibles, même si le contenu ne tient pas dans la vue.
Commentaires
Bientôt disponible : Tout au long de 2024, nous allons supprimer progressivement GitHub Issues comme mécanisme de commentaires pour le contenu et le remplacer par un nouveau système de commentaires. Pour plus d’informations, consultez https://aka.ms/ContentUserFeedback.
Envoyer et afficher des commentaires pour