Xamarin.Forms ScrollView

ScrollView , içeriğini kaydırabilen bir düzendir. sınıfı ScrollView sınıfından Layout türetilir ve varsayılan olarak içeriğini dikey olarak kaydırıyor. ScrollView A yalnızca tek bir alt öğeye sahip olabilir, ancak bu diğer düzenler olabilir.

Uyarı

ScrollView nesneleri iç içe yerleştirilmemelidir. Ayrıca, ScrollView nesneler , ListViewve WebViewgibi CollectionViewkaydırma sağlayan diğer denetimlerle iç içe yerleştirilmemelidir.

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

• Content, türünde View, içinde ScrollViewgörüntülenecek içeriği temsil eder.
• ContentSizetüründe Size, içeriğin boyutunu temsil eder. Bu salt okunur bir özelliktir.
• HorizontalScrollBarVisibility, türünde ScrollBarVisibility, yatay kaydırma çubuğunun ne zaman görünür olduğunu temsil eder.
• Orientation, türündeki ScrollOrientationöğesinin kaydırma yönünü ScrollViewtemsil eder. Bu özelliğin varsayılan değeridir Vertical.
• ScrollX, türündeki doublegeçerli X kaydırma konumunu gösterir. Bu salt okunur özelliğin varsayılan değeri 0'dır.
• ScrollY, türündeki doublegeçerli Y kaydırma konumunu gösterir. Bu salt okunur özelliğin varsayılan değeri 0'dır.
• VerticalScrollBarVisibility, türündeki ScrollBarVisibilitydikey kaydırma çubuğunun ne zaman görünür olduğunu temsil eder.

Bu özellikler, özelliği dışında Content nesneler tarafından BindableProperty desteklenir, bu da veri bağlamalarının ve stillerinin hedefleri olabileceği anlamına gelir.

Content özelliği sınıfının özelliğidir ContentProperty ScrollView ve bu nedenle açıkça XAML'den ayarlanması gerekmez.

İpucu

Mümkün olan en iyi düzen performansını elde etmek için Düzen performansını iyileştirme yönergelerini izleyin.

Kök düzen olarak ScrollView

yalnızca ScrollView tek bir alt öğeye sahip olabilir ve bu da diğer düzenler olabilir. Bu nedenle ScrollView , bir için bir sayfanın kök düzeni yaygın olarak kullanılır. Alt içeriğini kaydırmak için, ScrollView içeriğinin yüksekliği ile kendi yüksekliği arasındaki farkı hesaplar. Bu fark, içeriğini kaydırabileceği miktardır ScrollView .

genellikle StackLayout öğesinin ScrollViewalt öğesi olur. Bu senaryoda, öğesinin ScrollView StackLayout alt öğelerinin boylarının toplamı kadar uzun olmasını sağlar. Ardından, ScrollView içeriğinin kaydırılabileceği miktarı belirleyebilir. hakkında StackLayoutdaha fazla bilgi için bkz Xamarin.Forms . StackLayout.

Dikkat

DikeydeScrollView, özelliğini , Centerveya Endolarak Startayarlamaktan VerticalOptions kaçının. Bunu yapmak, öğesinin ScrollView yalnızca gerektiği kadar uzun olmasını ve sıfır olmasını söyler. Bu olasılığa karşı koruma sağlarken Xamarin.Forms , olmasını istemediğiniz bir şeyi öneren kodlardan kaçınmak en iyisidir.

Aşağıdaki XAML örneğinde ScrollView bir sayfada kök düzeni 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, ScrollView içeriği tarafından Xamarin.Formstanımlanan alanları görüntülemek Color için bağlanabilir bir düzen kullanan bir StackLayout olarak ayarlanmıştır. Varsayılan olarak, dikey olarak kaydırılan bir ScrollView sayfa daha fazla içerik ortaya çıkar:

Eşdeğer C# kodu:

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 . içindeki Xamarin.FormsBağlanabilir Düzenler.

ScrollView alt düzen olarak

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

genellikle ScrollView öğesinin StackLayoutalt öğesi olur. a ScrollView , içeriğinin yüksekliği ile kendi yüksekliği arasındaki farkı hesaplamak için belirli bir yükseklik gerektirir ve fark, içeriğini kaydırabileceği miktardır ScrollView . bir ScrollView öğesinin StackLayoutalt öğesi olduğunda, belirli bir yükseklik almaz. , StackLayout içeriğinin ScrollView yüksekliği ScrollView veya sıfır olan öğesinin mümkün olduğunca kısa olmasını ister. Bu senaryoyu işlemek için özelliğinin VerticalOptions ScrollView olarak FillAndExpandayarlanması gerekir. Bu, diğer çocuklar için gerekli olmayan tüm fazladan alanı vermesine ScrollView neden StackLayout olur ve ScrollView daha sonra belirli bir yüksekliğe sahip olur.

Aşağıdaki XAML örneğinde bir ScrollView alt düzen StackLayoutvardı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 StackLayout nesne vardır. Birincisi StackLayout , bir Label nesnesi ve ScrollView alt öğesi olan kök düzen nesnesidir. ScrollView, birden çok Label nesne içeren bir içeriğine StackLayout sahiptirStackLayout. Bu düzenleme, ilkinin Label her zaman ekranda olmasını sağlarken, diğer Label nesneler tarafından görüntülenen metin kaydırılabilir:

Eşdeğer C# kodu:

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

Hizalama

ScrollView , öğesinin kaydırma yönünü temsil eden bir Orientation özelliğine ScrollViewsahiptir. Bu özellik, aşağıdaki üyeleri tanımlayan türündedir ScrollOrientation:

• Vertical , öğesinin ScrollView dikey olarak kaydırılacağını gösterir. Bu üye özelliğin varsayılan değeridir Orientation .
• Horizontal , öğesinin ScrollView yatay olarak kaydırılacağını gösterir.
• Both , öğesinin ScrollView yatay ve dikey olarak kaydırılacağını gösterir.
• Neither öğesinin ScrollView kaydırmayacağını gösterir.

İpucu

Özelliği Neitherolarak ayarlanarak Orientation kaydırma devre dışı bırakılabilir.

Kaydırmayı algılama

ScrollView kaydırmanın gerçekleştiğini belirtmek için tetiklenen bir Scrolled olayı tanımlar. Olaya ScrolledEventArgs eşlik eden nesnenin Scrolled her ikisi de türünde doubleve ScrollY özellikleri vardırScrollX.

Önemli

ScrolledEventArgs.ScrollX ve ScrolledEventArgs.ScrollY özelliklerinin negatif değerleri olabilir. Bunun nedeni, öğesinin başlangıcına geri kaydırıldığında oluşan geri dönme etkisi olabilirScrollView.

Aşağıdaki XAML örneği, olay için bir olay işleyicisi Scrolled ayarlayan bir gösterirScrollView:

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

Eşdeğer C# kodu:

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

Bu örnekte, OnScrollViewScrolled olay çalıştırıldığında Scrolled olay 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 olaya eşlik eden nesnenin ScrolledEventArgs değerlerini verir.

Not

Olay Scrolled , kullanıcı tarafından başlatılan kaydırmalar ve programlı kaydırmalar için tetiklenir.

Program aracılığıyla kaydırma

ScrollView, zaman uyumsuz olarak kaydırmak ScrollViewiçin iki ScrollToAsync yöntem tanımlar. Aşırı yüklemelerden biri içinde ScrollViewbelirtilen bir konuma kaydırırken, diğeri belirtilen öğeyi görünüme kaydırıyor. Her iki aşırı yüklemenin de, kaydırmaya animasyon eklenip eklenmeyeceğini belirtmek için kullanılabilecek ek bir bağımsız değişkeni vardır.

Önemli

ScrollToAsync özelliği olarak ayarlandığında Neitheryöntemler kaydırmaya ScrollView.Orientation neden olmaz.

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

içindeki bir ScrollView konum, ve y bağımsız değişkenlerini double x kabul eden yöntemle ScrollToAsync kaydırılabilir. adlı scrollViewdikey ScrollView bir nesne verüldüğünde aşağıdaki örnekte, öğesinin üstünden cihazdan bağımsız 150 birimde kaydırma işlemi gösterilmektedirScrollView:

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

öğesinin ScrollToAsync animated üçüncü bağımsız değişkeni, bir öğesini program aracılığıyla kaydırırken ScrollViewkaydırma animasyonunun görüntülenip görüntülenmeyeceğini belirleyen bağımsız değişkendir.

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

içindeki bir ScrollView öğe, ve ScrollToPosition bağımsız değişkenlerini Element kabul eden yöntemiyle ScrollToAsync görünüme kaydırılabilir. adlı scrollViewdikey ScrollView ve adlandırılmış labelbir Label öğe verüldüğünde, aşağıdaki örnekte bir öğenin nasıl görünüme kaydırılıp kaydırılası gösterilmektedir:

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

öğesinin ScrollToAsync animated üçüncü bağımsız değişkeni, bir öğesini program aracılığıyla kaydırırken ScrollViewkaydırma animasyonunun görüntülenip görüntülenmeyeceğini belirleyen bağımsız değişkendir.

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

• MakeVisible öğesi içinde ScrollViewgörünene kadar kaydırılması gerektiğini gösterir.
• Start öğesinin öğesinin başlangıcına ScrollViewkaydırılması gerektiğini gösterir.
• Center öğesinin öğesinin ortasına ScrollViewkaydırılması gerektiğini gösterir.
• End öğesinin öğesinin sonuna ScrollViewkaydırılması gerektiğini belirtir.

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

ScrollView, bağlanabilir özellikler tarafından yedeklenen ve VerticalScrollBarVisibility özelliklerini tanımlarHorizontalScrollBarVisibility. Bu özellikler, yatay veya dikey kaydırma çubuğunun görünür olup olmadığını gösteren bir ScrollBarVisibility numaralandırma değeri alır veya ayarlar. Numaralandırma ScrollBarVisibility aşağıdaki üyeleri tanımlar:

• Defaultplatform için varsayılan kaydırma çubuğu davranışını gösterir ve ve VerticalScrollBarVisibility özelliklerinin varsayılan değeridirHorizontalScrollBarVisibility.
• 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ünmeyeceklerini gösterir.

İlgili bağlantılar

• Xamarin.Forms StackLayout
• içinde Bağlanabilir Düzenler Xamarin.Forms