Xamarin.Forms ScrollView

Descarga del ejemplo

de Xamarin.Forms= ScrollView" data-linktype="relative-path">Xamarin.Forms ScrollView" title=" Xamarin.Forms ScrollView" data-linktype="relative-path"/>

ScrollView es un diseño capaz de desplazar su contenido. La ScrollView clase deriva de la clase Layout y, de forma predeterminada, desplaza su contenido verticalmente. Solo ScrollView puede tener un solo elemento secundario, aunque pueden ser otros diseños.

ScrollView define las siguientes propiedades:

• _ScrollView_Content" data-linktype="absolute-path">Content , View de tipo , representa el contenido que se mostrará en ScrollView .
• ContentSize, de tipo Size , representa el tamaño del contenido. Se trata de una propiedad de solo lectura.
• HorizontalScrollBarVisibility, de tipo Xamarin_Forms HorizontalScrollBarVisibility _ScrollView_HorizontalScrollBarVisibility" data-linktype="absolute-path">, representa cuándo está visible la barra ScrollBarVisibility de desplazamiento horizontal.
• _ScrollView_Orientation" data-linktype="absolute-path">Orientation , ScrollOrientation de tipo , representa la dirección de desplazamiento de ScrollView . El valor predeterminado de esta propiedad es Vertical.
• Xamarin_Forms _ScrollView_ScrollX" data-linktype="absolute-path">, de tipo , indica la posición ScrollX de desplazamiento X double actual. El valor predeterminado de esta propiedad de solo lectura es 0.
• Xamarin_Forms _ScrollView_ScrollY" data-linktype="absolute-path">, de tipo , indica la posición de desplazamiento ScrollYdouble Y actual. El valor predeterminado de esta propiedad de solo lectura es 0.
• VerticalScrollBarVisibility, de tipo Xamarin_Forms VerticalScrollBarVisibility _ScrollView_HorizontalScrollBarVisibility" data-linktype="absolute-path">, representa cuando la barra ScrollBarVisibility de desplazamiento vertical está visible.

Estas propiedades están copiadas por objetos , a excepción de la propiedad BindableProperty Xamarin_Forms BindableProperty _ScrollView_Content" data-linktype="absolute-path">, lo que significa que pueden ser Content destinos de enlaces de datos y con estilo.

La Xamarin_Forms _ScrollView_Content" data-linktype="absolute-path">es la propiedad de la clase y, por tanto, no es necesario establecer explícitamente ContentContentPropertyScrollView desde XAML.

ScrollView como diseño raíz

Un ScrollView solo puede tener un solo elemento secundario, que puede ser otros diseños. Por lo tanto, es habitual que un ScrollView elemento sea el diseño raíz de una página. Para desplazar su contenido secundario, calcula la diferencia entre el ScrollView alto de su contenido y su propio alto. Esa diferencia es la cantidad de que ScrollView el puede desplazar su contenido.

A StackLayout menudo, será el elemento secundario de ScrollView . En este escenario, hace que sea tan ScrollView alto como la suma de las StackLayout alturas de sus hijos. A ScrollView continuación, puede determinar la cantidad de desplazamiento de su contenido. Para obtener más información acerca de StackLayout, vea Xamarin.Forms StackLayout.

El ejemplo xaml siguiente tiene ScrollView un 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, tiene su contenido establecido en un que usa un diseño enlazable para mostrar ScrollViewStackLayout los campos Color definidos por Xamarin.Forms . De forma predeterminada, ScrollView un se desplaza verticalmente, lo que revela más contenido:

Root

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 Bindable Layouts in Xamarin.Forms .

ScrollView como diseño secundario

Puede ScrollView ser un diseño secundario para un diseño primario diferente.

A ScrollView menudo, será el elemento secundario de StackLayout . Un requiere un alto específico para calcular la diferencia entre el alto de su contenido y su propio alto, siendo la diferencia la cantidad que puede desplazar ScrollViewScrollView su contenido. Cuando ScrollView es el elemento secundario de StackLayout , no recibe un alto específico. quiere que sea lo más corto posible, que es el StackLayout alto del contenido o ScrollViewScrollView cero. Para controlar este escenario, VerticalOptions la propiedad de debe ScrollView establecerse en FillAndExpand . Esto hará que dé todo el espacio adicional que no necesitan los demás elementos secundarios y, a StackLayout continuación, tendrá un alto ScrollViewScrollView específico.

El ejemplo xaml siguiente tiene ScrollView un como un diseño secundario para 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>

En este ejemplo, hay dos StackLayout objetos . El primero StackLayout es el objeto de diseño raíz, que tiene un objeto y un como sus LabelScrollView secundarios. tiene ScrollView un objeto como su StackLayout contenido, con el que contiene varios StackLayout objetos Label . Esta disposición garantiza que la primera está siempre en pantalla, mientras que el texto mostrado por los demás objetos LabelLabel se puede desplazar:

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

ScrollViewtiene una Xamarin_Forms ScrollView _ScrollView_Orientation" data-linktype="absolute-path">propiedad , Orientation que representa la dirección de desplazamiento de ScrollView . Esta propiedad es de tipo ScrollOrientation , que define los miembros siguientes:

• Vertical indica que se ScrollView desplazará verticalmente. Este miembro es el valor predeterminado de la Xamarin_Forms _ScrollView_Orientation" data-linktype="absolute-path">Orientation propiedad.
• Horizontal indica que se ScrollView desplazará horizontalmente.
• Both indica que se ScrollView desplazará horizontal y verticalmente.
• Neither indica que no ScrollView se desplazará.

Detección del desplazamiento

ScrollView define un Scrolled evento que se desencadena para indicar que se ha producido el desplazamiento. El objeto que acompaña al evento tiene las propiedades ScrolledEventArgs y , ambos de tipo ScrolledScrollXScrollYdouble .

En el ejemplo xaml siguiente se ScrollView muestra un objeto que establece un controlador de eventos para el evento Scrolled :

<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 produce el Scrolled evento:

void OnScrollViewScrolled(object sender, ScrolledEventArgs e)
{
    Console.WriteLine($"ScrollX: {e.ScrollX}, ScrollY: {e.ScrollY}");
}

En este ejemplo, el controlador de eventos genera los valores del objeto que acompaña OnScrollViewScrolledScrolledEventArgs al evento.

Desplazamiento mediante programación

ScrollView define dos ScrollToAsync métodos, que se desplazan de forma asincrónica por ScrollView . Una de las sobrecargas se desplaza a una posición especificada en , mientras que la otra desplaza ScrollView 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.

Desplazamiento de una posición a la vista

Una posición dentro ScrollView de se puede desplazar a con el método que acepta los ScrollToAsyncdoublexy argumentos y . Dado un objeto vertical denominado , en el ejemplo siguiente se muestra cómo desplazarse a ScrollViewscrollView 150 unidades independientes del dispositivo desde la parte superior de ScrollView :

await scrollView.ScrollToAsync(0, 150, true);

El tercer argumento para es el argumento , que determina si se muestra una animación de desplazamiento al desplazar mediante ScrollToAsyncanimated programación un ScrollView .

Desplazamiento de un elemento a la vista

Un elemento dentro de ScrollView se puede desplazar a la vista con el método que acepta los ScrollToAsyncElementScrollToPosition argumentos y . Dado un vertical denominado y un denominado , en el ejemplo siguiente se muestra ScrollView cómo desplazar un elemento a la scrollViewLabellabel vista:

await scrollView.ScrollToAsync(label, ScrollToPosition.End, true);

El tercer argumento para es el argumento , que determina si se muestra una animación de desplazamiento al desplazar mediante ScrollToAsyncanimated programación un ScrollView .

Al desplazar un elemento a 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 miembro ScrollToPosition de enumeración:

• MakeVisible indica que el elemento se debe desplazar hasta que esté visible en ScrollView .
• Start indica que el elemento debe desplazarse hasta el inicio de ScrollView .
• Center indica que el elemento debe desplazarse hasta el centro de ScrollView .
• End indica que el elemento debe desplazarse hasta el final de ScrollView .

Visibilidad de la barra de desplazamiento

ScrollView define HorizontalScrollBarVisibility las propiedades y , que están VerticalScrollBarVisibility copiadas por propiedades enlazables. Estas propiedades obtienen o establecen un valor de enumeración Xamarin_Forms _ScrollView_HorizontalScrollBarVisibility" data-linktype="absolute-path">que representa si la barra de desplazamiento horizontal o vertical está ScrollBarVisibility visible. La enumeración ScrollBarVisibility define los miembros siguientes:

• Default indica el comportamiento predeterminado de la barra de desplazamiento de la plataforma y es el valor predeterminado de las HorizontalScrollBarVisibility propiedades VerticalScrollBarVisibility y .
• Always indica que las barras de desplazamiento estarán visibles, incluso cuando el contenido se ajuste a la vista.
• Never indica que las barras de desplazamiento no estarán visibles, incluso si el contenido no cabe en la vista.

Vínculos relacionados

• Demostraciones de ScrollView (ejemplo)
• Xamarin.Forms StackLayout
• Bindable Layouts in Xamarin.Forms