ScrollView
Procházení ukázkyUživatelské rozhraní .NET Multi-Platform App UI (.NET MAUI) ScrollView je zobrazení, které umožňuje posouvání obsahu. Ve výchozím nastavení ScrollView se obsah posune svisle. A ScrollView může mít pouze jedno dítě, i když to může být jiné rozložení.
ScrollView definuje následující vlastnosti:
Content, typu View, představuje obsah, který se má zobrazit v objektu ScrollView.ContentSize, typuSizepředstavuje velikost obsahu. Toto je vlastnost jen pro čtení.HorizontalScrollBarVisibility, typuScrollBarVisibility, představuje, když je vodorovný posuvník viditelný.Orientation, typuScrollOrientation, představuje směr ScrollViewposouvání . Výchozí hodnota této vlastnosti jeVertical.ScrollX, typudoubleoznačuje aktuální pozici posunu X. Výchozí hodnota této vlastnosti jen pro čtení je 0.ScrollY, typudoubleoznačuje aktuální pozici posunu Y. Výchozí hodnota této vlastnosti jen pro čtení je 0.VerticalScrollBarVisibility, typuScrollBarVisibility, představuje, když je svislý posuvník viditelný.
Tyto vlastnosti jsou podporovány BindableProperty objekty s výjimkou Content vlastnosti, což znamená, že mohou být cílem datových vazeb a styl.
Vlastnost Content je ContentProperty třída ScrollView , a proto není nutné explicitně nastavit z XAML.
Upozorňující
ScrollView objekty by neměly být vnořené. Objekty by navíc neměly být vnořené s jinými ovládacími prvky, ScrollView které poskytují posouvání, například CollectionView, ListViewa WebView.
ScrollView jako kořenové rozložení
A ScrollView může mít pouze jedno podřízené, což může být jiné rozložení. Proto je běžné ScrollView , že se jedná o kořenové rozložení na stránce. Pokud chcete posunout podřízený obsah, ScrollView vypočítá rozdíl mezi výškou jeho obsahu a vlastní výškou. Tento rozdíl je množství, které ScrollView může posunout jeho obsah.
A StackLayout bude často dítě ScrollView. V tomto scénáři ScrollView budou příčiny StackLayout tak vysoké jako součet výšek podřízených položek. ScrollView Pak můžete určit množství, které se dá posunout jeho obsah. Další informace o této službě StackLayoutnaleznete v tématu StackLayout.
Upozornění
Ve svislém směru ScrollViewse vyhněte nastavení VerticalOptions vlastnosti Startna , Centernebo End. To říká ScrollView , že má být jen tak vysoký, jak musí být, což může být nula. I když rozhraní .NET MAUI chrání před tímto případem, je nejlepší se vyhnout kódu, který naznačuje, že se nechcete stát.
Následující příklad XAML má na ScrollView stránce rozložení jako kořen:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ScrollViewDemos"
x:Class="ScrollViewDemos.Views.XAML.ColorListPage"
Title="ScrollView demo">
<ScrollView Margin="20">
<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>
V tomto příkladu ScrollView má obsah nastavený na StackLayout hodnotu, která používá vázané rozložení k zobrazení Colors polí definovaných rozhraním .NET MAUI. Ve výchozím nastavení ScrollView se posune svisle, což odhalí další obsah:
Ekvivalentní kód jazyka C# je:
public class ColorListPage : ContentPage
{
public ColorListPage()
{
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
};
horizontalStackLayout.Add(boxView);
horizontalStackLayout.Add(label);
return horizontalStackLayout;
});
StackLayout stackLayout = new StackLayout();
BindableLayout.SetItemsSource(stackLayout, NamedColor.All);
BindableLayout.SetItemTemplate(stackLayout, dataTemplate);
ScrollView scrollView = new ScrollView
{
Margin = new Thickness(20),
Content = stackLayout
};
Title = "ScrollView demo";
Content = scrollView;
}
}
Další informace o rozloženích s možností vazby naleznete v tématu BindableLayout.
ScrollView jako podřízené rozložení
A ScrollView může být podřízené rozložení do jiného nadřazeného rozložení.
A ScrollView bude často dítě Grid. Vyžaduje ScrollView specifickou výšku pro výpočet rozdílu mezi výškou jeho obsahu a vlastní výškou, přičemž rozdílem je množství, které ScrollView může posunout jeho obsah. ScrollView Když je dítě , Gridneobdrží určitou výšku. Chce GridScrollView , aby byla co nejkratší, což je výška ScrollView obsahu nebo nula. Pro zpracování tohoto scénáře RowDefinitionGrid by měl být řádek, který obsahuje ScrollView , nastaven na *hodnotu . To způsobí Grid , že všechny ScrollView nadbytečné místo, které ostatní děti nevyžadují, a pak bude mít specifickou výšku ScrollView .
Následující příklad XAML má jako podřízené ScrollView rozložení pro Grid:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ScrollViewDemos.Views.XAML.BlackCatPage"
Title="ScrollView as a child layout demo">
<Grid Margin="20"
RowDefinitions="Auto,*,Auto">
<Label Text="THE BLACK CAT by Edgar Allan Poe"
FontSize="14"
FontAttributes="Bold"
HorizontalOptions="Center" />
<ScrollView x:Name="scrollView"
Grid.Row="1"
VerticalOptions="FillAndExpand"
Scrolled="OnScrollViewScrolled">
<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>
<Button Grid.Row="2"
Text="Scroll to end"
Clicked="OnButtonClicked" />
</Grid>
</ContentPage>
V tomto příkladu je Grid kořenové rozložení, které má Label, ScrollViewa Button jako jeho podřízené položky. StackLayout Má ScrollView jako svůj obsah s StackLayout více Label objekty. Toto uspořádání zajišťuje, že první Label je vždy na obrazovce, zatímco text zobrazený jinými Label objekty se dá posunout:
Ekvivalentní kód jazyka C# je:
public class BlackCatPage : ContentPage
{
public BlackCatPage()
{
Label titleLabel = new Label
{
Text = "THE BLACK CAT by Edgar Allan Poe",
// More properties set here to define the Label appearance
};
StackLayout stackLayout = new StackLayout();
stackLayout.Add(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
ScrollView scrollView = new ScrollView();
scrollView.Content = stackLayout;
// ...
Title = "ScrollView as a child layout demo";
Grid grid = new Grid
{
Margin = new Thickness(20),
RowDefinitions =
{
new RowDefinition { Height = new GridLength(0, GridUnitType.Auto) },
new RowDefinition { Height = new GridLength(1, GridUnitType.Star) },
new RowDefinition { Height = new GridLength(0, GridUnitType.Auto) }
}
};
grid.Add(titleLabel);
grid.Add(scrollView, 0, 1);
grid.Add(button, 0, 2);
Content = grid;
}
}
Orientace
ScrollViewOrientation má vlastnost, která představuje směr posouvání v objektu ScrollView. Tato vlastnost je typu ScrollOrientation, která definuje následující členy:
Verticaloznačuje, že ScrollView se posune svisle. Tento člen je výchozí hodnotaOrientationvlastnosti.Horizontaloznačuje, že ScrollView se posune vodorovně.Bothoznačuje, že se ScrollView posune vodorovně a svisle.Neitheroznačuje, že ScrollView se nebude posouvat.
Tip
Posouvání lze zakázat nastavením Orientation vlastnosti na Neitherhodnotu .
Detekce posouvání
ScrollViewScrolled definuje událost, která je vyvolána, což značí, že došlo k posouvání. Objekt ScrolledEventArgs , který doprovází Scrolled událost má ScrollX a ScrollY vlastnosti, oba typy double.
Důležité
ScrolledEventArgs.ScrollY Vlastnosti ScrolledEventArgs.ScrollX mohou mít záporné hodnoty z důvodu efektu odrazu, ke kterému dochází při posouvání zpět na začátek .ScrollView
Následující příklad XAML ukazuje ScrollView , že nastaví obslužnou rutinu Scrolled události pro událost:
<ScrollView Scrolled="OnScrollViewScrolled">
...
</ScrollView>
Ekvivalentní kód jazyka C# je:
ScrollView scrollView = new ScrollView();
scrollView.Scrolled += OnScrollViewScrolled;
V tomto příkladu OnScrollViewScrolled se obslužná rutina události spustí při Scrolled spuštění události:
void OnScrollViewScrolled(object sender, ScrolledEventArgs e)
{
Console.WriteLine($"ScrollX: {e.ScrollX}, ScrollY: {e.ScrollY}");
}
V tomto příkladu OnScrollViewScrolled obslužná rutina události vypíše hodnoty objektu ScrolledEventArgs , který doprovází událost.
Poznámka:
Událost Scrolled je vyvolána pro posouvání iniciované uživatelem a pro programové posouvání.
Posouvání prostřednictvím kódu programu
ScrollView definuje dvě ScrollToAsync metody, které asynchronně posunují ScrollView. Jedno z přetížení se posune na zadanou pozici v objektu ScrollView, zatímco druhý posune zadaný prvek do zobrazení. Obě přetížení mají další argument, který lze použít k označení, zda se má posouvání animovat.
Důležité
Metody ScrollToAsync nebudou mít za následek posouvání, pokud je vlastnost nastavena ScrollView.Orientation na Neither.
Posunutí pozice do zobrazení
Pozice v rámci objektu ScrollView lze posunout na metodu ScrollToAsync , která přijímá doublex a y argumenty. Vzhledem k vertikálnímu ScrollView objektu s názvem scrollViewnásledující příklad ukazuje, jak se posunout na 150 jednotek nezávislých na zařízení z horní části ScrollView:
await scrollView.ScrollToAsync(0, 150, true);
Třetím argumentem ScrollToAsyncanimated je argument, který určuje, zda se animace posouvání zobrazí při programovém posouvání ScrollView.
Posunutí elementu do zobrazení
Prvek v rámci objektu ScrollView lze posunout do zobrazení pomocí ScrollToAsync metody, která přijímá Element a ScrollToPosition argumenty. Při svislém pojmenovaném scrollViewobjektu ScrollView a pojmenovaném Labellabelpříkladu ukazuje, jak posunout prvek do zobrazení:
await scrollView.ScrollToAsync(label, ScrollToPosition.End, true);
Třetím argumentem ScrollToAsyncanimated je argument, který určuje, zda se animace posouvání zobrazí při programovém posouvání ScrollView.
Při posouvání prvku do zobrazení lze přesnou pozici prvku po dokončení posouvání nastavit pomocí druhého argumentu ScrollToAsync , positionmetody. Tento argument přijímá člen výčtu ScrollToPosition :
MakeVisibleoznačuje, že prvek by měl být posunut, dokud není viditelný v objektu ScrollView.Startoznačuje, že prvek by měl být posunut na začátek znaku ScrollView.Centeroznačuje, že prvek by měl být posunut do středu objektu ScrollView.Endoznačuje, že prvek by měl být posunován na konec ScrollView.
Viditelnost posuvníku
ScrollViewdefinuje a VerticalScrollBarVisibility vlastnosti, které jsou podporovány vlastnostmi s možností vazbyHorizontalScrollBarVisibility. Tyto vlastnosti získají nebo nastaví hodnotu výčtu ScrollBarVisibility , která představuje, zda je viditelný vodorovný nebo svislý posuvník. Výčet ScrollBarVisibility definuje následující členy:
Defaultoznačuje výchozí chování posuvníku pro platformu a je výchozí hodnotouHorizontalScrollBarVisibilityvlastností.VerticalScrollBarVisibilityAlwaysoznačuje, že posuvníky budou viditelné, i když se obsah vejde do zobrazení.Neveroznačuje, že posuvníky nebudou viditelné, i když se obsah nevejde do zobrazení.
Váš názor
Připravujeme: V průběhu roku 2024 budeme postupně vyřazovat problémy z GitHub coby mechanismus zpětné vazby pro obsah a nahrazovat ho novým systémem zpětné vazby. Další informace naleznete v tématu: https://aka.ms/ContentUserFeedback.
Odeslat a zobrazit názory pro