Xamarin.Forms ScrollView

Örneği indirme

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

ScrollView , içeriğini kaydırabilen bir düzendir. sınıfı ScrollView sınıfından Layout türetildi ve varsayılan olarak içeriğini dikey olarak kaydırıyor. bir ScrollView yalnızca tek bir alt sahip olabilir, ancak bu başka düzenler olabilir.

ScrollView aşağıdaki özellikleri tanımlar:

• _ScrollView_Content" data-linktype="absolute-path">, türünde , içinde görüntülemek Content istediğiniz içeriği temsil ViewScrollView eder.
• ContentSizetüründe Size , içeriğin boyutunu temsil eder. Bu salt okunur bir özelliktir.
• HorizontalScrollBarVisibility, türü Xamarin_Forms HorizontalScrollBarVisibility _ScrollView_HorizontalScrollBarVisibility" data-linktype="absolute-path">, yatay kaydırma çubuğunun görünür ScrollBarVisibility olduğu zamanları temsil eder.
• _ScrollView_Orientation" data-linktype="absolute-path">, türünün kaydırma Orientation yönünü ScrollOrientation temsil ScrollView eder. Bu özelliğin varsayılan değeri Vertical olur.
• Xamarin_Forms _ScrollView_ScrollX" data-linktype="absolute-path">, türü, geçerli ScrollX X double kaydırma konumunu gösterir. Bu salt okunur özelliğin varsayılan değeri 0'dır.
• Xamarin_Forms _ScrollView_ScrollY" data-linktype="absolute-path">türü, geçerli ScrollYdouble Y kaydırma konumunu gösterir. Bu salt okunur özelliğin varsayılan değeri 0'dır.
• VerticalScrollBarVisibility, türü Xamarin_Forms VerticalScrollBarVisibility _ScrollView_HorizontalScrollBarVisibility" data-linktype="absolute-path">, dikey kaydırma çubuğunun görünür ScrollBarVisibility olduğu zamanları temsil eder.

Bu özellikler, BindableProperty Xamarin_Forms BindableProperty _ScrollView_Content" data-linktype="absolute-path">özelliği hariç olmak ve bu da veri bağlamalarının hedefleri ve stil oluşturmaları anlamına Content gelir.

Xamarin_Forms _ScrollView_Content" data-linktype="absolute-path">özelliği sınıfının değeridir ve bu nedenle ContentContentPropertyScrollView açıkça XAML'den ayarnması gerekmez.

Kök düzen olarak ScrollView

, ScrollView yalnızca tek bir alt alta sahip olabilir ve bu da diğer düzenler olabilir. Bu nedenle, bir için ScrollView bir sayfada kök düzeni olması yaygındır. Alt içeriğini kaydırmak ScrollView için, içeriğinin yüksekliği ile kendi yüksekliği arasındaki farkı hesaplar. Bu fark, içeriğini ScrollView kaydıran miktarıdır.

, StackLayout genellikle bir 'nin alt ası ScrollView olur. Bu senaryoda ScrollView nedeni, StackLayout çocuğun boylarının toplamı kadar uzun olmasıdır. Ardından, ScrollView içeriğinin kaydırılabilir miktarını belirler. hakkında daha fazla bilgi için StackLayoutXamarin.Forms StackLayout bkz. .

Aşağıdaki XAML örneğinde, ScrollView sayfada kök düzen olarak bir vardır:

<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>

Bu örnekte, içeriği tarafından tanımlanan alanları görüntülemek için bağlanabilir düzen ScrollView kullanan bir olarak StackLayoutColorXamarin.Forms ayarlanmıştır. Varsayılan olarak, dikey ScrollView olarak kaydırarak daha fazla içerik ortaya çıkar:

Eşdeğer C# kodu şöyledir:

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;
    }
}

Bağlanabilir düzenler hakkında daha fazla bilgi için bkz. Bindable Layouts in Xamarin.Forms .

Alt düzen olarak ScrollView

, ScrollView farklı bir üst düzenin alt düzeni olabilir.

, ScrollView genellikle bir 'nin alt ası StackLayout olur. Bir, içeriğinin yüksekliği ile kendi yüksekliği arasındaki farkı hesaplamak için belirli bir yükseklik gerektirir ve aralarındaki fark, içeriğini ScrollViewScrollView kaydıran miktardır. bir ScrollView , bir alt tarafından StackLayout olduğunda belirli bir yükseklik almaz. StackLayout, içeriğinin yüksekliğini veya sıfırı ifade etmek için mümkün ScrollView olduğunca kısa olmak ScrollView ister. Bu senaryoyu işlemek VerticalOptions için ScrollView özelliğinin olarak ayarlanmış olması FillAndExpand gerekir. Bu, diğer çocuklar için gerekli olan tüm ek alanı vermenin ve sonra belirli bir StackLayoutScrollViewScrollView yüksekliğe sahip olmasına neden olur.

Aşağıdaki XAML örneğinde alt ScrollView düzen olarak bir StackLayout vardır:

<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>

Bu örnekte iki nesne StackLayout vardır. StackLayoutİlki, bir nesnesi ve bir nesnesinin de kendi children Label nesnesinin olduğu kök düzen ScrollView nesnesidir. , ScrollView içeriği olarak birden çok nesne içeren bir StackLayoutStackLayoutLabel içerir. Bu düzenleme, ilki Label her zaman ekrandayken diğer nesneler tarafından görüntülenen metin Label kaydırılabilir:

Eşdeğer C# kodu şöyledir:

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 }
        };
    }
}

Yön

ScrollView, Xamarin_Forms _ScrollView_Orientation yönünü temsil eden ScrollView data-linktype="absolute-path">özelliğine OrientationScrollView sahip. Bu özellik, aşağıdaki ScrollOrientation üyeleri tanımlayan türündedir:

• Vertical dikey olarak ScrollView kaydıracaklarını gösterir. Bu üye, Xamarin_Forms _ScrollView_Orientation" data-linktype="absolute-path">Orientation özelliğidir.
• Horizontal , yatay ScrollView olarak kaydıracaklarını gösterir.
• Both , yatay ScrollView ve dikey olarak kaydıracaklarını gösterir.
• Neither , ScrollView kaydırmanın olmadığını gösterir.

Kaydırmayı algılama

ScrollView , Scrolled kaydırmanın meydana geldiğine işaret etmek için bir olay tanımlar. olayına ScrolledEventArgs eşlik eder nesnesi ve ScrolledScrollXScrollY özelliklerine sahiptir ve her ikisi de türündedir. double

Aşağıdaki XAML örneği, olay ScrollView için bir olay işleyicisi ayar eden bir Scrolled gösterir:

<ScrollView Scrolled="OnScrollViewScrolled">
		...
</ScrollView>

Eşdeğer C# kodu şöyledir:

ScrollView scrollView = new ScrollView();
scrollView.Scrolled += OnScrollViewScrolled;

Bu örnekte, OnScrollViewScrolled olay çalıştırılıyorsa olay Scrolled işleyicisi yürütülür:

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

Bu örnekte, OnScrollViewScrolled olay işleyicisi, olayı eşlik ScrolledEventArgs eder nesnenin değerlerini verir.

Program aracılığıyla kaydırma

ScrollView , ScrollToAsync zaman uyumsuz olarak kaydıran iki yöntem ScrollView tanımlar. Aşırı yüklemelerden biri içinde belirtilen konuma kaydırırken, diğeri ScrollView belirtilen bir öğeyi görünüme kaydırıyor. Her iki aşırı yüklemede de kaydırmaya animasyon ek olarak animasyon ekinin ek olarak sağ olup olmadığını belirtmek için kullanılmaktadır.

Bir konumu görünüme kaydırma

içindeki ScrollView konum, ve bağımsız değişkenlerini kabul eden ScrollToAsync yöntemiyle doublexy kaydırılabilir. adlı dikey bir nesne verildi ve aşağıdaki örnekte, üst ScrollViewscrollView kısmından 150 cihazdan bağımsız bire nasıl kaydırıldı? ScrollView

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

için üçüncü bağımsız değişken, bir kaydırarak program aracılığıyla kaydırarak bir kaydırma animasyonu görüntü olup olmadığını belirleyen ScrollToAsyncanimated bağımsız ScrollView değişkenidir.

Öğeyi görünüme kaydırma

içindeki bir ScrollView öğesi, ve bağımsız değişkenlerini kabul eden ScrollToAsync yöntemiyle görünüme ElementScrollToPosition kaydırılabilir. Adlı dikey ScrollView bir ve adlı bir scrollViewLabellabel verilen aşağıdaki örnek, bir öğeyi görünüme kaydırmayı gösterir:

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

için üçüncü bağımsız değişken, bir kaydırarak program aracılığıyla kaydırarak bir kaydırma animasyonu görüntü olup olmadığını belirleyen ScrollToAsyncanimated bağımsız ScrollView değişkenidir.

Bir öğeyi görünüme kaydırarak kaydırma tamamlandıktan sonra öğenin tam konumu, yönteminin ikinci bağımsız position değişkeniyle ScrollToAsync birlikte ayarlanır. Bu bağımsız değişken bir ScrollToPosition numaralama üyesi kabul eder:

• MakeVisible öğesinin içinde görünür olana kadar kaydır gerektiğini ScrollView gösterir.
• Start öğesinin başlangıcına kaydır gerektiğini ScrollView gösterir.
• Center öğenin ortasına kaydırılabileceğini belirtir ScrollView .
• End öğenin sonuna kaydırılabileceğini belirtir ScrollView .

Kaydırma çubuğu görünürlüğü

ScrollViewHorizontalScrollBarVisibilityVerticalScrollBarVisibility , bağlanabilir Özellikler tarafından desteklenen ve özelliklerini tanımlar. Bu özellikler ScrollBarVisibility , yatay veya dikey, kaydırma çubuğunun görünür olup olmadığını temsil eden bir Xamarin_Forms _ScrollView_HorizontalScrollBarVisibility "Data-LinkType =" mutlak yol ">numaralandırma değeri alır veya ayarlar. ScrollBarVisibilitySabit listesi aşağıdaki üyeleri tanımlar:

• Default platformun varsayılan kaydırma çubuğu davranışını gösterir ve, HorizontalScrollBarVisibility ve özelliklerinin varsayılan değeridir VerticalScrollBarVisibility .
• Always içerik görünüme sığsa bile kaydırma çubuklarının görünür olacağını gösterir.
• Never içerik görünüme sığmasa bile kaydırma çubuklarının görülemeyeceğini gösterir.

İlgili bağlantılar

• ScrollView gösterileri (örnek)
• Xamarin.Forms StackLayout
• Bindable Layouts in Xamarin.Forms