Xamarin.Forms ScrollView
Descargar el ejemplo
ScrollView es un diseño que es capaz de desplazar su contenido. La ScrollView clase deriva de la Layout clase y, de forma predeterminada, desplaza verticalmente su contenido. Un ScrollView solo puede tener un elemento secundario, aunque puede ser otros diseños.
Advertencia
ScrollView Los objetos no deben estar anidados. Además, ScrollView los objetos no deben anidarse con otros controles que proporcionan desplazamiento, como CollectionView, ListViewy WebView.
ScrollView define las siguientes propiedades:
Content, de tipoView, representa el contenido que se va a mostrar en .ScrollViewContentSize, de tipoSize, representa el tamaño del contenido. Se trata de una propiedad de solo lectura.HorizontalScrollBarVisibility, de tipoScrollBarVisibility, representa cuando la barra de desplazamiento horizontal está visible.Orientation, de tipoScrollOrientation, representa la dirección de desplazamiento deScrollView. El valor predeterminado de esta propiedad esVertical.ScrollX, de tipodouble, indica la posición de desplazamiento X actual. El valor predeterminado de esta propiedad de solo lectura es 0.ScrollY, de tipodouble, indica la posición de desplazamiento Y actual. El valor predeterminado de esta propiedad de solo lectura es 0.VerticalScrollBarVisibility, de tipoScrollBarVisibility, representa cuando la barra de desplazamiento vertical está visible.
Estas propiedades están respaldadas por BindableProperty objetos, a excepción de la Content propiedad , lo que significa que pueden ser destinos de enlaces de datos y estilos.
La Content propiedad es de ContentProperty la ScrollView clase y, por tanto, no es necesario establecer explícitamente desde XAML.
Sugerencia
Para obtener el mejor rendimiento de diseño posible, siga las instrucciones de Optimización del rendimiento del diseño.
ScrollView como diseño raíz
Un ScrollView solo puede tener un elemento secundario, que puede ser otros diseños. Por lo tanto, es habitual que ScrollView sea el diseño raíz de una página. Para desplazar su contenido secundario, ScrollView calcula la diferencia entre el alto de su contenido y su propio alto. Esa diferencia es la cantidad que ScrollView puede desplazar su contenido.
A StackLayout menudo será el elemento secundario de .ScrollView En este escenario, hace ScrollView que sea StackLayout tan alto como la suma de las alturas de sus elementos secundarios. A continuación, ScrollView puede determinar la cantidad en la que se puede desplazar su contenido. Para obtener más información sobre la clase StackLayout, consulte StackLayoutXamarin.Forms.
Precaución
En una vertical ScrollView, evite establecer la VerticalOptions propiedad en Start, Centero End. Si lo hace, se ScrollView indica que debe ser tan alto como sea necesario, que podría ser cero. Aunque Xamarin.Forms protege contra esta eventualidad, es mejor evitar el código que sugiere algo que no desea que suceda.
El ejemplo XAML siguiente tiene un ScrollView como diseño raíz en una 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>
En este ejemplo, ScrollView tiene su contenido establecido en un StackLayout objeto que usa un diseño enlazable para mostrar los Color campos definidos por Xamarin.Forms. De forma predeterminada, se ScrollView desplaza verticalmente, lo que muestra más contenido:
El código de C# equivalente es el siguiente:
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 obtener más información sobre los diseños enlazables, vea Diseños enlazables en Xamarin.Forms.
ScrollView como diseño secundario
Un ScrollView puede ser un diseño secundario a otro diseño primario.
A ScrollView menudo será el elemento secundario de .StackLayout Requiere ScrollView un alto específico para calcular la diferencia entre el alto de su contenido y su propio alto, siendo la diferencia la cantidad que ScrollView puede desplazar su contenido. Cuando es ScrollView el elemento secundario de , StackLayoutno recibe una altura específica. StackLayout quiere que ScrollView sea lo más corto posible, que es el alto del ScrollView contenido o cero. Para controlar este escenario, la VerticalOptions propiedad de ScrollView debe establecerse en FillAndExpand. Esto hará que StackLayout el objeto proporcione todo ScrollView el espacio adicional no requerido por los demás elementos secundarios y ScrollView , a continuación, tendrá una altura específica.
El ejemplo XAML siguiente tiene un diseño como un ScrollView elemento secundario en :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>
En este ejemplo, hay dos StackLayout objetos. La primera StackLayout es el objeto de diseño raíz, que tiene un Label objeto y como ScrollView sus elementos secundarios. ScrollView tiene como StackLayout contenido, con el StackLayout objeto que contiene varios Label objetos. Esta disposición garantiza que el primero Label esté siempre en pantalla, mientras que el texto mostrado por los demás Label objetos se puede desplazar:
Diseño El código de C# equivalente es el siguiente:
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 }
};
}
}
Orientación
ScrollView tiene una Orientation propiedad , que representa la dirección de desplazamiento de ScrollView. Esta propiedad es de tipo ScrollOrientation, que define los siguientes miembros:
Verticalindica que seScrollViewdesplazará verticalmente. Este miembro es el valor predeterminado de laOrientationpropiedad .Horizontalindica que seScrollViewdesplazará horizontalmente.Bothindica que seScrollViewdesplazará horizontal y verticalmente.Neitherindica queScrollViewno se desplazará.
Sugerencia
El desplazamiento se puede deshabilitar estableciendo la Orientation propiedad en Neither.
Detección del desplazamiento
ScrollView define un Scrolled evento que se desencadena para indicar que se ha producido el desplazamiento. El ScrolledEventArgs objeto que acompaña al Scrolled evento tiene ScrollX propiedades y ScrollY , ambos de tipo double.
Importante
Las ScrolledEventArgs.ScrollX propiedades y ScrolledEventArgs.ScrollY pueden tener valores negativos, debido al efecto de rebote que se produce al desplazarse de nuevo al inicio de .ScrollView
En el ejemplo XAML siguiente se muestra un ScrollView objeto que establece un controlador de eventos para el Scrolled evento:
<ScrollView Scrolled="OnScrollViewScrolled">
...
</ScrollView>
El código de C# equivalente es el siguiente:
ScrollView scrollView = new ScrollView();
scrollView.Scrolled += OnScrollViewScrolled;
En este ejemplo, el OnScrollViewScrolled controlador de eventos se ejecuta cuando se desencadena el Scrolled evento:
void OnScrollViewScrolled(object sender, ScrolledEventArgs e)
{
Console.WriteLine($"ScrollX: {e.ScrollX}, ScrollY: {e.ScrollY}");
}
En este ejemplo, el OnScrollViewScrolled controlador de eventos genera los valores del ScrolledEventArgs objeto que acompaña al evento.
Nota
El Scrolled evento se desencadena para los desplazamientos iniciados por el usuario y para los desplazamientos mediante programación.
Desplazarse mediante programación
ScrollViewdefine dos ScrollToAsync métodos, que desplazan asincrónicamente .ScrollView Una de las sobrecargas se desplaza a una posición especificada en ScrollView, mientras que la otra desplaza un elemento especificado a la vista. Ambas sobrecargas tienen un argumento adicional que se puede usar para indicar si se va a animar el desplazamiento.
Importante
Los ScrollToAsync métodos no darán lugar al desplazamiento cuando la ScrollView.Orientation propiedad está establecida en Neither.
Desplazarse por una posición en la vista
Una posición dentro de un ScrollView elemento se puede desplazar a con el ScrollToAsync método que acepta doublex y y argumentos. Dado un objeto vertical ScrollView denominado scrollView, en el ejemplo siguiente se muestra cómo desplazarse a 150 unidades independientes del dispositivo desde la parte superior de ScrollView:
await scrollView.ScrollToAsync(0, 150, true);
El tercer argumento de ScrollToAsync es el animated argumento , que determina si se muestra una animación de desplazamiento cuando se desplaza mediante programación un ScrollView.
Desplazar un elemento a la vista
Se puede desplazar un elemento dentro de una ScrollView vista con el ScrollToAsync método que acepta argumentos Element y ScrollToPosition . Dado un elemento vertical ScrollView denominado y un Label denominado labelscrollView, en el ejemplo siguiente se muestra cómo desplazar un elemento a la vista:
await scrollView.ScrollToAsync(label, ScrollToPosition.End, true);
El tercer argumento de ScrollToAsync es el animated argumento , que determina si se muestra una animación de desplazamiento cuando se desplaza mediante programación un ScrollView.
Al desplazarse por un elemento en la vista, la posición exacta del elemento una vez completado el desplazamiento se puede establecer con el segundo argumento, position, del ScrollToAsync método . Este argumento acepta un ScrollToPosition miembro de enumeración:
MakeVisibleindica que el elemento debe desplazarse hasta que esté visible en .ScrollViewStartindica que el elemento debe desplazarse hasta el inicio deScrollView.Centerindica que el elemento debe desplazarse hasta el centro deScrollView.Endindica que el elemento debe desplazarse hasta el final deScrollView.
Visibilidad de la barra de desplazamiento
ScrollViewdefine las propiedades y VerticalScrollBarVisibility , que están respaldadas HorizontalScrollBarVisibility por propiedades enlazables. Estas propiedades obtienen o establecen un ScrollBarVisibility valor de enumeración que representa si la barra de desplazamiento horizontal o vertical está visible. La enumeración ScrollBarVisibility define los miembros siguientes:
Defaultindica el comportamiento predeterminado de la barra de desplazamiento para la plataforma y es el valor predeterminado de lasHorizontalScrollBarVisibilitypropiedades yVerticalScrollBarVisibility.Alwaysindica que las barras de desplazamiento estarán visibles, incluso cuando el contenido se ajuste a la vista.Neverindica que las barras de desplazamiento no estarán visibles, aunque el contenido no se ajuste a la vista.