Xamarin.Forms ScrollView
ScrollView
é um layout capaz de rolar seu conteúdo. A ScrollView
classe deriva da classe e, por padrão, rola Layout
seu conteúdo verticalmente. Um ScrollView
só pode ter um único filho, embora isso possa ser outros layouts.
Aviso
ScrollView
objetos não devem ser aninhados. Além disso, ScrollView
os objetos não devem ser aninhados com outros controles que fornecem rolagem, como CollectionView
, ListView
e WebView
.
ScrollView
define as propriedades a seguir:
Content
, do tipoView
, representa o conteúdo a ser exibido noScrollView
.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 doScrollView
. 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 elas podem ser alvos de associações de dados e estilizadas.
A Content
propriedade é a ContentProperty
da ScrollView
classe e, portanto, não precisa ser definida explicitamente a partir de XAML.
Dica
Para obter o melhor desempenho de layout possível, siga as diretrizes em Otimizar desempenho de layout.
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 ScrollView
faz com que o StackLayout
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 Xamarin.Forms StackLayout.
Cuidado
Em uma vertical ScrollView
, evite definir a VerticalOptions
propriedade como Start
, Center
ou End
. Fazer isso diz para ser tão alto quanto precisa ser, o ScrollView
que pode ser zero. Embora Xamarin.Forms proteja contra essa eventualidade, é melhor evitar códigos que sugiram 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://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>
Neste exemplo, o ScrollView
tem seu conteúdo definido como um StackLayout
que usa um layout vinculável para exibir os Color
campos definidos pelo Xamarin.Forms. Por padrão, um ScrollView
rola verticalmente, o que revela mais conteúdo:
Este é o código C# equivalente:
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;
}
}
Para obter mais informações sobre layouts vinculáveis, consulte Layouts vinculáveis no Xamarin.Forms.
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 StackLayout
. 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 ScrollView
é filho de um StackLayout
, ele não recebe uma altura específica. O StackLayout
quer que o seja o ScrollView
mais curto possível, que é a altura do ScrollView
conteúdo ou zero. Para manipular esse cenário, a VerticalOptions
propriedade do ScrollView
deve ser definida como FillAndExpand
. Isso fará com que o StackLayout
dê todo o ScrollView
espaço extra não exigido pelas outras crianças, e o ScrollView
então terá uma altura específica.
O exemplo XAML a seguir tem um ScrollView
layout como filho para um 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>
Neste exemplo, há dois StackLayout
objetos. O primeiro StackLayout
é o objeto de layout raiz, que tem um Label
objeto e um ScrollView
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 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 }
};
}
}
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:
Vertical
indica que oScrollView
rolará verticalmente. Esse membro é o valor padrão daOrientation
propriedade.Horizontal
indica que oScrollView
rolará horizontalmente.Both
indica que oScrollView
rolará horizontal e verticalmente.Neither
indica que oScrollView
não rolará.
Dica
A rolagem pode ser desabilitada definindo a Orientation
propriedade como Neither
.
Detectar rolagem
ScrollView
Define um Scrolled
evento que é acionado 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 ScrollView
arquivo .
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 OnScrollViewScrolled
manipulador de eventos é executado quando o Scrolled
evento é acionado:
void OnScrollViewScrolled(object sender, ScrolledEventArgs e)
{
Console.WriteLine($"ScrollX: {e.ScrollX}, ScrollY: {e.ScrollY}");
}
Neste exemplo, o OnScrollViewScrolled
manipulador de eventos gera os valores do ScrolledEventArgs
objeto que acompanha o evento.
Observação
O Scrolled
evento é acionado 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 double
x
e y
argumenta. Dado um objeto vertical ScrollView
chamado scrollView
, o exemplo a seguir mostra como rolar para 150 unidades independentes de dispositivo a partir da parte superior do ScrollView
:
await scrollView.ScrollToAsync(0, 150, true);
O terceiro argumento para o ScrollToAsync
é o animated
argumento, que determina se uma animação de rolagem é exibida ao rolar programaticamente um ScrollView
arquivo .
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 Label
nomeado label
, o exemplo a seguir mostra como rolar um elemento para exibição:
await scrollView.ScrollToAsync(label, ScrollToPosition.End, true);
O terceiro argumento para o ScrollToAsync
é o animated
argumento, que determina se uma animação de rolagem é exibida ao rolar programaticamente um ScrollView
arquivo .
Ao rolar um elemento para a exibição, a posição exata do elemento após a rolagem ter sido concluída pode ser definida com o segundo argumento, position
, do ScrollToAsync
método. Este argumento aceita um membro de ScrollToPosition
enumeração:
MakeVisible
indica que o elemento deve ser rolado até ficar visível noScrollView
.Start
indica que o elemento deve ser rolado até o início doScrollView
.Center
indica que o elemento deve ser rolado até o centro doScrollView
.End
indica que o elemento deve ser rolado até o final doScrollView
.
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:
Default
indica o comportamento padrão da barra de rolagem para a plataforma e é o valor padrão dasHorizontalScrollBarVisibility
propriedades eVerticalScrollBarVisibility
.Always
indica que as barras de rolagem ficarão visíveis, mesmo quando o conteúdo se encaixar na exibição.Never
indica que as barras de rolagem não estarão visíveis, mesmo que o conteúdo não caiba na exibição.