ScrollView
Navegue pelo exemploA interface do usuário do aplicativo multiplataforma .NET (.NET MAUI) ScrollView é um modo de exibição capaz de rolar seu conteúdo. Por padrão, ScrollView rola seu conteúdo verticalmente. Um ScrollView só pode ter um único filho, embora isso possa ser outros layouts.
ScrollView define as propriedades a seguir:
Content, do tipo View, representa o conteúdo a ser exibido no ScrollView.ContentSize, do tipoSize, representa o tamanho do conteúdo. Trata-se de uma propriedade somente leitura.HorizontalScrollBarVisibility, do tipoScrollBarVisibility, representa quando a barra de rolagem horizontal está visível.Orientation, do tipoScrollOrientation, representa a direção de rolagem do ScrollView. O valor padrão dessa propriedade éVertical.ScrollX, do tipodouble, indica a posição atual da rolagem X. O valor padrão dessa propriedade somente leitura é 0.ScrollY, do tipodouble, indica a posição atual da rolagem em Y. O valor padrão dessa propriedade somente leitura é 0.VerticalScrollBarVisibility, do tipoScrollBarVisibility, representa quando a barra de rolagem vertical está visível.
Essas propriedades são apoiadas por BindableProperty objetos, com exceção da propriedade, o Content que significa que eles podem ser alvos de associações de dados e estilizados.
A Content propriedade é a da ScrollView classe e, portanto, não precisa ser definida explicitamente a ContentProperty partir de XAML.
Aviso
ScrollView objetos não devem ser aninhados. Além disso, os objetos não devem ser aninhados com outros controles que fornecem rolagem, como CollectionView, ScrollViewListViewe WebView.
ScrollView como um layout raiz
A ScrollView só pode ter um único filho, que pode ser outros layouts. Portanto, é comum que um ScrollView seja o layout raiz em uma página. Para rolar seu conteúdo filho, ScrollView calcula a diferença entre a altura de seu conteúdo e sua própria altura. Essa diferença é a quantidade que o ScrollView pode rolar seu conteúdo.
Um StackLayout testamento muitas vezes é filho de um ScrollView. Nesse cenário, o faz com que o ScrollViewStackLayout seja tão alto quanto a soma das alturas de seus filhos. Em seguida, o ScrollView pode determinar a quantidade que seu conteúdo pode ser rolado. Para obter mais informações sobre o StackLayout, consulte StackLayout.
Cuidado
Em uma vertical ScrollView, evite definir a VerticalOptions propriedade como Start, Centerou End. Fazer isso diz para ser tão alto quanto precisa ser, o ScrollView que pode ser zero. Embora o .NET MAUI proteja contra essa eventualidade, é melhor evitar código que sugira algo que você não quer que aconteça.
O exemplo XAML a seguir tem um ScrollView layout como raiz em uma página:
<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>
Neste exemplo, o ScrollView tem seu conteúdo definido como um que usa um StackLayout layout vinculável para exibir os Colors campos definidos pelo .NET MAUI. Por padrão, um ScrollView rola verticalmente, o que revela mais conteúdo:
Este é o código C# equivalente:
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;
}
}
Para obter mais informações sobre layouts vinculáveis, consulte BindableLayout.
ScrollView como um layout filho
Um ScrollView pode ser um layout filho para um layout pai diferente.
Um ScrollView testamento muitas vezes é filho de um Grid. A ScrollView requer uma altura específica para calcular a diferença entre a altura de seu conteúdo e sua própria altura, com a diferença sendo a quantidade que o ScrollView pode rolar seu conteúdo. Quando um é filho de um ScrollViewGrid, ele não recebe uma altura específica. O Grid quer que o seja o ScrollView mais curto possível, que é a altura do ScrollView conteúdo ou zero. Para manipular esse cenário, o da linha que contém o RowDefinitionScrollView deve ser definido como *.Grid Isso fará com que o dê todo o ScrollView espaço extra não exigido pelas outras crianças, e o GridScrollView então terá uma altura específica.
O exemplo XAML a seguir tem um layout como filho para um ScrollViewGrid:
<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>
Neste exemplo, o layout raiz é um que tem um GridLabel, ScrollViewe Button como seus filhos. O ScrollView tem um StackLayout como seu conteúdo, com o StackLayout contendo vários Label objetos. Essa disposição garante que o primeiro Label esteja sempre na tela, enquanto o texto exibido pelos outros Label objetos pode ser rolado:
Este é o código C# equivalente:
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;
}
}
Orientação
ScrollView tem uma Orientation propriedade, que representa a direção de rolagem do ScrollView. Essa propriedade é do tipo ScrollOrientation, que define os seguintes membros:
Verticalindica que o ScrollView rolará verticalmente. Esse membro é o valor padrão daOrientationpropriedade.Horizontalindica que o ScrollView rolará horizontalmente.Bothindica que o ScrollView rolará horizontal e verticalmente.Neitherindica que o ScrollView não rolará.
Dica
A rolagem pode ser desabilitada definindo a Orientation propriedade como Neither.
Detectar rolagem
ScrollView Define um Scrolled evento que é gerado para indicar que a rolagem ocorreu. O ScrolledEventArgs objeto que acompanha o Scrolled evento tem ScrollX e ScrollY propriedades, ambas do tipo double.
Importante
As ScrolledEventArgs.ScrollX propriedades and ScrolledEventArgs.ScrollY podem ter valores negativos, devido ao efeito de rejeição que ocorre ao rolar de volta para o início de um ScrollViewarquivo .
O exemplo XAML a seguir mostra um que define um ScrollView manipulador de eventos para o Scrolled evento:
<ScrollView Scrolled="OnScrollViewScrolled">
...
</ScrollView>
Este é o código C# equivalente:
ScrollView scrollView = new ScrollView();
scrollView.Scrolled += OnScrollViewScrolled;
Neste exemplo, o manipulador de eventos é executado quando o OnScrollViewScrolledScrolled evento é acionado:
void OnScrollViewScrolled(object sender, ScrolledEventArgs e)
{
Console.WriteLine($"ScrollX: {e.ScrollX}, ScrollY: {e.ScrollY}");
}
Neste exemplo, o manipulador de eventos gera os valores do ScrolledEventArgs objeto que acompanha o OnScrollViewScrolled evento.
Observação
O Scrolled evento é gerado para rolagens iniciadas pelo usuário e para rolagens programáticas.
Rolar programaticamente
ScrollView define dois ScrollToAsync métodos, que rolam de forma assíncrona o ScrollView. Uma das sobrecargas rola para uma posição especificada no ScrollView, enquanto a outra rola um elemento especificado para exibição. Ambas as sobrecargas têm um argumento adicional que pode ser usado para indicar se a rolagem deve ser animada.
Importante
Os ScrollToAsync métodos não resultarão em rolagem quando a ScrollView.Orientation propriedade for definida como Neither.
Rolar uma posição para a exibição
Uma posição dentro de um ScrollView pode ser rolada para com o ScrollToAsync método que aceita doublex e y argumenta. Dado um objeto vertical ScrollView chamado scrollView, o exemplo a seguir mostra como rolar até 150 unidades independentes de dispositivo a partir da parte superior do ScrollView:
await scrollView.ScrollToAsync(0, 150, true);
O terceiro argumento para o é o ScrollToAsyncanimated argumento, que determina se uma animação de rolagem é exibida ao rolar programaticamente um ScrollViewarquivo .
Rolar um elemento para a exibição
Um elemento dentro de um ScrollView pode ser rolado para a exibição com o ScrollToAsync método que aceita Element e ScrollToPosition argumenta. Dado um vertical ScrollView chamado scrollView, e um nomeado label, o exemplo a seguir mostra como rolar um Label elemento para exibição:
await scrollView.ScrollToAsync(label, ScrollToPosition.End, true);
O terceiro argumento para o é o ScrollToAsyncanimated argumento, que determina se uma animação de rolagem é exibida ao rolar programaticamente um ScrollViewarquivo .
Ao rolar um elemento para a exibição, a posição exata do elemento após a conclusão da rolagem pode ser definida com o segundo argumento, , positiondo ScrollToAsync método. Esse argumento aceita um membro de ScrollToPosition enumeração:
MakeVisibleindica que o elemento deve ser rolado até ficar visível no ScrollView.Startindica que o elemento deve ser rolado até o início do ScrollView.Centerindica que o elemento deve ser rolado até o centro do ScrollView.Endindica que o elemento deve ser rolado até o final do ScrollView.
Visibilidade da barra de rolagem
ScrollView define HorizontalScrollBarVisibility e VerticalScrollBarVisibility propriedades, que são apoiadas por propriedades vinculáveis. Essas propriedades obtêm ou definem um ScrollBarVisibility valor de enumeração que representa se a barra de rolagem horizontal ou vertical está visível. A enumeração ScrollBarVisibility define os seguintes membros:
DefaultIndica o comportamento padrão da barra de rolagem para a plataforma e é o valor padrão dasHorizontalScrollBarVisibilitypropriedades AndVerticalScrollBarVisibility.Alwaysindica que as barras de rolagem ficarão visíveis, mesmo quando o conteúdo se encaixar na exibição.Neverindica que as barras de rolagem não estarão visíveis, mesmo que o conteúdo não caiba na exibição.
Comentários
Em breve: Ao longo de 2024, eliminaremos os problemas do GitHub como o mecanismo de comentários para conteúdo e o substituiremos por um novo sistema de comentários. Para obter mais informações, consulte https://aka.ms/ContentUserFeedback.
Enviar e exibir comentários de