Xamarin.Forms ScrollView
Das Beispiel herunterladen
ScrollView ist ein Layout, das in der Lage ist, den Inhalt zu scrollen. Die ScrollView -Klasse wird von der Layout -Klasse abgeleitet und führt standardmäßig einen vertikalen Bildlauf durch den Inhalt durch. Ein ScrollView kann nur über ein einzelnes untergeordnetes Element verfügen, obwohl dies andere Layouts sein kann.
Warnung
ScrollView -Objekte sollten nicht geschachtelt werden. Darüber hinaus ScrollView sollten Objekte nicht mit anderen Steuerelementen geschachtelt werden, die Bildlaufvorgänge ermöglichen, z CollectionView. B. , ListViewund WebView.
ScrollView definiert die folgenden Eigenschaften:
Contentvom TypViewstellt den Inhalt dar, derScrollViewin angezeigt werden soll.ContentSizevom TypSizestellt die Größe des Inhalts dar. Dies ist eine schreibgeschützte Eigenschaft.HorizontalScrollBarVisibilityvom TypScrollBarVisibilitystellt dar, wenn die horizontale Bildlaufleiste sichtbar ist.Orientationvom TypScrollOrientationstellt die Bildlaufrichtung von darScrollView. Der Standardwert dieser Eigenschaft istVertical.ScrollXvom Typdoublegibt die aktuelle X-Scrollposition an. Der Standardwert dieser schreibgeschützten Eigenschaft ist 0.ScrollYvom Typdoublegibt die aktuelle Y-Scrollposition an. Der Standardwert dieser schreibgeschützten Eigenschaft ist 0.VerticalScrollBarVisibilityvom TypScrollBarVisibilitystellt dar, wenn die vertikale Bildlaufleiste sichtbar ist.
Diese Eigenschaften werden von BindableProperty -Objekten unterstützt, mit Ausnahme der Content -Eigenschaft, was bedeutet, dass sie Ziele von Datenbindungen und stilisiert sein können.
Die Content -Eigenschaft ist die ContentProperty der ScrollView -Klasse und muss daher nicht explizit über XAML festgelegt werden.
Tipp
Befolgen Sie die Richtlinien unter Optimieren der Layoutleistung, um die bestmögliche Layoutleistung zu erzielen.
ScrollView als Stammlayout
Ein ScrollView kann nur über ein einzelnes untergeordnetes Element verfügen, bei dem es sich um andere Layouts sein kann. Daher ist es üblich, dass ein ScrollView das Stammlayout auf einer Seite ist. Um den untergeordneten Inhalt zu scrollen, ScrollView berechnet den Unterschied zwischen der Höhe des Inhalts und seiner eigenen Höhe. Dieser Unterschied ist der Betrag, in dem der ScrollView seinen Inhalt scrollen kann.
Ein StackLayout ist häufig das Untergeordnete einer ScrollView. In diesem Szenario bewirkt, dass der ScrollViewStackLayout so hoch ist wie die Summe der Höhe seiner untergeordneten Elemente. Anschließend kann der ScrollView bestimmen, wie viel der Inhalt gescrollt werden kann. Weitere Informationen zur StackLayout-Klasse finden Sie unter Xamarin.Forms StackLayout.
Achtung
Vermeiden Sie in einer vertikalen ScrollView, die VerticalOptions -Eigenschaft auf , Centeroder EndfestzulegenStart. Auf diese Weise muss der ScrollView nur so groß sein, wie es sein muss, was null sein könnte. Schützt zwar Xamarin.Forms vor dieser Eventualität, es empfiehlt sich jedoch, Code zu vermeiden, der etwas vorschlägt, das Sie nicht erreichen möchten.
Das folgende XAML-Beispiel weist ein ScrollView als Stammlayout auf einer Seite auf:
<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>
In diesem Beispiel ist der ScrollView Inhalt auf ein StackLayout festgelegt, das ein bindbares Layout verwendet, um die Color durch definierten Xamarin.FormsFelder anzuzeigen. Standardmäßig wird ein ScrollView vertikaler Bildlauf durchgeführt, wodurch mehr Inhalt angezeigt wird:
Der entsprechende C#-Code lautet:
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;
}
}
Weitere Informationen zu bindbaren Layouts finden Sie unter Bindable Layouts in Xamarin.Forms.
ScrollView als untergeordnetes Layout
Ein ScrollView kann ein untergeordnetes Layout zu einem anderen übergeordneten Layout sein.
Ein ScrollView ist häufig das Untergeordnete einer StackLayout. Ein ScrollView erfordert eine bestimmte Höhe, um die Differenz zwischen der Höhe des Inhalts und seiner eigenen Höhe zu berechnen, wobei die Differenz die Menge ist, die den ScrollView Inhalt scrollen kann. Wenn ein ScrollView das untergeordnete Element eines StackLayoutist, erhält es keine bestimmte Höhe. Der StackLayout möchte, dass so ScrollView kurz wie möglich ist, d. h. entweder die Höhe des ScrollView Inhalts oder null. Um dieses Szenario zu behandeln, sollte die VerticalOptions -Eigenschaft von ScrollView auf FillAndExpandfestgelegt werden. Dies führt dazu, dass der StackLayout den gesamten zusätzlichen Platz erhält ScrollView , den die anderen untergeordneten Elemente nicht benötigen, und der ScrollView hat dann eine bestimmte Höhe.
Im folgenden XAML-Beispiel wird ein ScrollView als untergeordnetes Layout zu einem verwendet 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>
In diesem Beispiel gibt es zwei StackLayout -Objekte. Die erste StackLayout ist das Stammlayoutobjekt, das über ein Label -Objekt und ein ScrollView als untergeordnete Elemente verfügt. Der ScrollView hat einen StackLayout als Inhalt, wobei der StackLayout mehrere Label -Objekte enthält. Durch diese Anordnung wird sichergestellt, dass der erste Label immer auf dem Bildschirm angezeigt wird, während der von den anderen Label Objekten angezeigte Text scrollen kann:
Der entsprechende C#-Code lautet:
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 }
};
}
}
Ausrichtung
ScrollView verfügt über eine Orientation -Eigenschaft, die die Bildlaufrichtung von ScrollViewdarstellt. Diese Eigenschaft ist vom Typ ScrollOrientation, der die folgenden Member definiert:
Verticalgibt an, dass vertikalScrollViewscrollt. Dieser Member ist der Standardwert derOrientation-Eigenschaft.Horizontalgibt an, dass horizontalScrollViewscrollt.Bothgibt an, dass horizontalScrollViewund vertikal scrollt.Neithergibt an, dass kein Bildlauf ausgeführtScrollViewwird.
Tipp
Der Bildlauf kann deaktiviert werden, indem die Orientation -Eigenschaft auf Neitherfestgelegt wird.
Erkennen des Bildlaufs
ScrollView definiert ein Scrolled Ereignis, das ausgelöst wird, um anzugeben, dass ein Bildlauf aufgetreten ist. Das ScrolledEventArgs Objekt, das das Scrolled Ereignis begleitet, verfügt über ScrollX eigenschaften und ScrollY vom Typ double.
Wichtig
Die ScrolledEventArgs.ScrollX Eigenschaften und ScrolledEventArgs.ScrollY können negative Werte aufweisen, aufgrund des Unzustellbarkeitseffekts, der beim Scrollen zurück zum Anfang eines ScrollViewauftritt.
Das folgende XAML-Beispiel zeigt ein ScrollView , das einen Ereignishandler für das Scrolled Ereignis festlegt:
<ScrollView Scrolled="OnScrollViewScrolled">
...
</ScrollView>
Der entsprechende C#-Code lautet:
ScrollView scrollView = new ScrollView();
scrollView.Scrolled += OnScrollViewScrolled;
In diesem Beispiel wird der OnScrollViewScrolled Ereignishandler ausgeführt, wenn das Scrolled Ereignis ausgelöst wird:
void OnScrollViewScrolled(object sender, ScrolledEventArgs e)
{
Console.WriteLine($"ScrollX: {e.ScrollX}, ScrollY: {e.ScrollY}");
}
In diesem Beispiel gibt der OnScrollViewScrolled Ereignishandler die Werte des ScrolledEventArgs Objekts aus, das das Ereignis begleitet.
Hinweis
Das Scrolled Ereignis wird für vom Benutzer initiierte Bildlaufvorgänge und für programmgesteuerte Bildlaufvorgänge ausgelöst.
Programmgesteuertes Scrollen
ScrollView definiert zwei ScrollToAsync Methoden, die asynchron scrollen ScrollView. Eine der Überladungen scrollt an eine angegebene Position in , ScrollViewwährend die andere ein angegebenes Element in die Ansicht scrollt. Beide Überladungen verfügen über ein zusätzliches Argument, das verwendet werden kann, um anzugeben, ob der Bildlauf animiert werden soll.
Wichtig
Die ScrollToAsync Methoden führen nicht zum Scrollen, wenn die ScrollView.Orientation -Eigenschaft auf Neitherfestgelegt ist.
Scrollen einer Position in die Ansicht
Eine Position innerhalb eines ScrollView kann mit der -Methode, die ScrollToAsync Argumente und y akzeptiertdoublex, zu einem Bildlauf ausgeführt werden. Bei einem vertikalen ScrollView Objekt namens scrollViewwird im folgenden Beispiel gezeigt, wie sie von oben ScrollViewzu 150 geräteunabhängigen Einheiten scrollen:
await scrollView.ScrollToAsync(0, 150, true);
Das dritte Argument für ist ScrollToAsync das animated -Argument, das bestimmt, ob beim programmgesteuerten Scrollen eine ScrollViewBildlaufanimation angezeigt wird.
Scrollen eines Elements in die Ansicht
Ein Element in einem ScrollView kann mit der -Methode, die Argumente und ScrollToPosition akzeptiertElement, in die ScrollToAsync Ansicht gescrollt werden. Bei einer vertikalen ScrollView namens scrollViewund einer Label namens labelzeigt das folgende Beispiel, wie ein Element in die Ansicht scrollt:
await scrollView.ScrollToAsync(label, ScrollToPosition.End, true);
Das dritte Argument für ist ScrollToAsync das animated -Argument, das bestimmt, ob beim programmgesteuerten Scrollen eine ScrollViewBildlaufanimation angezeigt wird.
Beim Scrollen eines Elements in die Ansicht kann die genaue Position des Elements nach Abschluss des Bildlaufs mit dem zweiten Argument der positionScrollToAsync -Methode festgelegt werden. Dieses Argument akzeptiert einen Enumerationsmember ScrollToPosition :
MakeVisiblegibt an, dass für das Element ein Bildlauf ausgeführt werden soll, bis es imScrollViewsichtbar ist.Startgibt an, dass für das Element ein Bildlauf zum Anfang vonScrollViewerfolgen soll.Centergibt an, dass das -Element in die Mitte desScrollViewbildlaufs verschoben werden soll.Endgibt an, dass das -Element bis zum Ende vonScrollViewscrollt.
Sichtbarkeit der Bildlaufleiste
ScrollView definiert HorizontalScrollBarVisibility und VerticalScrollBarVisibility Eigenschaften, die durch bindungsfähige Eigenschaften unterstützt werden. Diese Eigenschaften rufen einen Enumerationswert ab oder legen diesen ScrollBarVisibility fest, der angibt, ob die horizontale oder vertikale Bildlaufleiste sichtbar ist. Die ScrollBarVisibility-Enumeration definiert die folgenden Member:
Defaultgibt das Standardverhalten der Bildlaufleiste für die Plattform an und ist der Standardwert derHorizontalScrollBarVisibilityEigenschaften undVerticalScrollBarVisibility.Alwaysgibt an, dass Bildlaufleisten sichtbar sind, auch wenn der Inhalt in die Ansicht passt.Nevergibt an, dass Bildlaufleisten nicht sichtbar sind, auch wenn der Inhalt nicht in die Ansicht passt.