Megjegyzés
Az oldalhoz való hozzáféréshez engedély szükséges. Megpróbálhat bejelentkezni vagy módosítani a címtárat.
Az oldalhoz való hozzáféréshez engedély szükséges. Megpróbálhatja módosítani a címtárat.
Az "húzd le a frissítésért" funkció lehetővé teszi, hogy a felhasználók érintéssel lehúzzanak egy adatlistát, hogy további adatokat töltsenek be. A lekéréses frissítést széles körben használják érintőképernyős eszközökön. Az itt látható API-k használatával lekéréses frissítést valósíthat meg az alkalmazásban.
Ez a megfelelő vezérlő?
Akkor használja a lekéréses frissítést, ha olyan adatlistával vagy adatrácskal rendelkezik, amelyet a felhasználó rendszeresen frissíteni szeretne, és az alkalmazás valószínűleg érintéses eszközökön fog futni.
A RefreshVisualizer használatával konzisztens frissítési élményt is létrehozhat, amelyet más módokon hív meg, például egy frissítési gombbal.
Frissítési vezérlők
A lekéréses frissítést két vezérlő engedélyezi.
- RefreshContainer – egy ContentControl, amely felhasználói interakciót biztosít a lehúzással történő frissítéshez. Kezeli az érintéses interakciókat, és kezeli a belső frissítési vizualizáció állapotát.
- RefreshVisualizer – a következő szakaszban ismertetett frissítési vizualizációt foglalja magában.
A fő vezérlő a RefreshContainer, amelyet burkolóként helyez el a tartalom köré, amelyet a felhasználó lehúz a frissítéshez. A RefreshContainer csak érintéssel működik, ezért azt javasoljuk, hogy az érintéses kezelőfelülettel nem rendelkező felhasználók számára is legyen elérhető frissítési gomb. A frissítés gombot az alkalmazás megfelelő helyén helyezheti el egy parancssávon vagy a frissíteni kívánt surface közelében.
Vizualizáció frissítése
Az alapértelmezett frissítési vizualizáció egy körkörös folyamatábra, amely a frissítés bekövetkezésének és a frissítés indítását követő állapotának kommunikációjára szolgál. A frissítési vizualizációnak 5 állapota van.
A lista frissítésének indításához a felhasználónak le kell húznia egy bizonyos távolságot, amit küszöbértéknek nevezünk . A vizualizáló állapotát a húzó állapot határozza meg, aminek köze van ehhez a küszöbértékhez. A lehetséges értékeket a RefreshVisualizerState enumerálás tartalmazza.
Idle
A vizualizáció alapértelmezett állapota Tétlen. A felhasználó érintéssel nem kommunikál a RefreshContainerrel, és nincs folyamatban frissítés.
Vizuálisan nincs bizonyíték a frissítési vizualizációra.
Kapcsolatba lépni
Amikor a felhasználó a PullDirection tulajdonság által megadott irányba húzza le a listát, és a küszöbérték elérése előtt a vizualizáló Interacting állapotban van.
Ha a felhasználó ebben az állapotban felengedi a vezérlőt, a vezérlő visszaáll Tétlen.
Vizuálisan az ikon le van tiltva (60% átlátszóság). Emellett az ikon a görgetési művelettel egy teljes elforgatást is megpörget.
Ha a felhasználó meghúzza a listát a küszöbértéken túl, a vizualizáló eszköz átvált Interakció állapotbólFüggőben lévő állapotba.
Az ikon vizuálisan 100% átlátszatlanságra és 150% méretű impulzusra vált, majd visszaáll 100% méretre az áttűnés során.
Függőben lévő
Amikor a felhasználó meghúzta a listát a küszöbértéken túl, a vizualizáló Függőben állapotban van.
- Ha a felhasználó visszahúzza a listát a küszöbérték fölé anélkül, hogy elengedné, a rendszer visszakerül az Interakció állapotba.
- Ha a felhasználó kiadja a listát, a rendszer frissítési kérelmet kezdeményez, és áttér a Frissítés állapotra.
Az ikon vizuálisan 100% méretben és átlátszóságban is. Ebben az állapotban az ikon továbbra is lefelé mozog a görgetési művelettel, de már nem pörög.
Frissítő
Amikor a felhasználó elengedi a vizualizátort a küszöbérték fölött, Frissítés állapotba kerül.
Amikor belépnek ebbe az állapotba, a RefreshRequested esemény generálódik. Ez a jel az alkalmazás tartalomfrissítésének elindításához. Az esemény args (RefreshRequestedEventArgs) tartalmaz egy halasztott objektumot, amelyet az eseménykezelőben kell kezelnie. Ezt követően a halasztást befejezettként kell megjelölnie, amikor a frissítést végrehajtó kód befejeződött.
Amikor a frissítés befejeződött, a vizualizáció visszatér a Tétlen állapotba.
Az ikon vizuálisan visszahelyeződik a küszöbérték helyére, és a frissítés időtartama alatt pörög. Ez a pörgetés a frissítés előrehaladásának megjelenítésére szolgál, és a bejövő tartalom animációja váltja fel.
Kukucskálás
Ha a felhasználó olyan kezdőpozícióból húz a frissítés irányába, ahol a frissítés nem engedélyezett, a vizualizáló belép a Betekintő állapotba. Ez általában akkor fordul elő, ha a ScrollViewer nem a 0. pozícióban van, amikor a felhasználó elkezd lekérni.
- Ha a felhasználó ebben az állapotban felengedi a vezérlőt, a vezérlő visszaáll Tétlen.
Húzás irány
A felhasználó alapértelmezés szerint felülről lefelé lekéri a listát a frissítés indításához. Ha eltérő tájolású lista vagy rácsos elrendezés van, a frissítési konténer húzási irányát úgy kell megváltoztatni, hogy az egyezzen.
A PullDirection tulajdonság a következő RefreshPullDirection értékek egyikét veszi fel: BottomToTop, TopToBottom, RightToLeftvagy LeftToRight.
A lekérés irányának módosításakor a vizualizáció folyamatjelzőjének kezdőpozíciója automatikusan elfordul, hogy a nyíl a lekérés irányának megfelelő pozícióba induljon. Szükség esetén módosíthatja a RefreshVisualizer.Orientation tulajdonságot az automatikus viselkedés felülbírálásához. A legtöbb esetben azt javasoljuk, hogy hagyja meg a Automatikusalapértelmezett értékét.
Lekéréses frissítés implementálása
- Fontos API-k: RefreshContainer, RefreshVisualizer
A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.
A lekéréses frissítési funkciók listához való hozzáadásához mindössze néhány lépésre van szükség.
- Csomagolja be a listát egy RefreshContainer vezérlőelembe.
- A tartalom frissítéséhez kezelje a RefreshRequested eseményt.
- Igény szerint kezdeményezheti a frissítést RequestRefresh meghívásával (például egy gombra kattintva).
Megjegyzés:
A RefreshVisualizert önállóan is létrehozhatja. Javasoljuk azonban, hogy a tartalmat egy RefreshContainerbe csomagolja, és használja a RefreshContainer.Visualizer tulajdonság által biztosított RefreshVisualizert, még érintés nélküli forgatókönyvek esetén is. Ebben a cikkben feltételezzük, hogy a vizualizáció mindig a frissítési tárolóból származik.
Emellett a frissítési tároló RequestRefresh és RefreshRequested tagjait is használhatja a kényelem érdekében.
refreshContainer.RequestRefresh() egyenértékű refreshContainer.Visualizer.RequestRefresh()-gyel. Mindkettő kiváltja a RefreshContainer.RefreshRequested eseményt és a RefreshVisualizer.RefreshRequested eseményeket is.
Frissítés kérése
A frissítési tároló kezeli az érintéses interakciókat, hogy a felhasználók érintéssel frissíthessenek tartalmat. Azt javasoljuk, hogy adjon meg egyéb lehetőségeket az érintés nélküli felületekhez, például frissítési gombot vagy hangvezérlést.
Frissítés indításához hívja meg a RequestRefresh metódust.
// See the Examples section for the full code.
private void RefreshButtonClick(object sender, RoutedEventArgs e)
{
RefreshContainer.RequestRefresh();
}
Amikor a RequestRefresh hívást végrehajtják, a vizualizáló állapota közvetlenül Tétlen állapotból Frissítésiállapotba vált.
Frissítési kérelem kezelése
Ha szükség esetén friss tartalmat szeretne kapni, kezelje a RefreshRequested eseményt. Az eseménykezelőben az alkalmazáshoz tartozó kódra lesz szüksége a friss tartalom beszerzéséhez.
Az esemény args (RefreshRequestedEventArgs) tartalmaz egy Deferral objektumot. Lekérheti a halasztást az eseménykezelőben. Ezután jelölje meg a halasztást befejezettként, amikor a frissítést végrehajtó kód befejeződött.
// See the Examples section for the full code.
private async void RefreshContainer_RefreshRequested(RefreshContainer sender, RefreshRequestedEventArgs args)
{
// Respond to a request by performing a refresh and using the deferral object.
using (var RefreshCompletionDeferral = args.GetDeferral())
{
// Do some async operation to refresh the content
await FetchAndInsertItemsAsync(3);
// The 'using' statement ensures the deferral is marked as complete.
// Otherwise, you'd call
// RefreshCompletionDeferral.Complete();
// RefreshCompletionDeferral.Dispose();
}
}
Állapotváltozások megválaszolása
Szükség esetén reagálhat a vizualizáció állapotának változásaira. Ha például több frissítési kérést szeretne megakadályozni, letilthat egy frissítési gombot, amíg a vizualizáció frissül.
// See the Examples section for the full code.
private void Visualizer_RefreshStateChanged(RefreshVisualizer sender, RefreshStateChangedEventArgs args)
{
// Respond to visualizer state changes.
// Disable the refresh button if the visualizer is refreshing.
if (args.NewState == RefreshVisualizerState.Refreshing)
{
RefreshButton.IsEnabled = false;
}
else
{
RefreshButton.IsEnabled = true;
}
}
ScrollViewer használata RefreshContainerben
Megjegyzés:
A RefreshContainer tartalmának görgethető vezérlőnek kell lennie, például ScrollViewernek, GridView-nak, ListView-nak stb. Ha a Tartalmat egy olyan vezérlőelemre állítja, mint a Grid, az nem definiált viselkedést eredményez.
Ez a példa bemutatja, hogyan használható a lekéréses frissítés görgetőmegjelenítővel.
<RefreshContainer>
<ScrollViewer VerticalScrollMode="Enabled"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto">
<!-- Scrollviewer content -->
</ScrollViewer>
</RefreshContainer>
Lekéréses frissítés hozzáadása ListView-hoz
Ez a példa bemutatja, hogyan használható a lekéréses frissítés listanézettel.
<StackPanel Margin="0,40" Width="280">
<CommandBar OverflowButtonVisibility="Collapsed">
<AppBarButton x:Name="RefreshButton" Click="RefreshButtonClick"
Icon="Refresh" Label="Refresh"/>
<CommandBar.Content>
<TextBlock Text="List of items"
Style="{StaticResource TitleTextBlockStyle}"
Margin="12,8"/>
</CommandBar.Content>
</CommandBar>
<RefreshContainer x:Name="RefreshContainer">
<ListView x:Name="ListView1" Height="400">
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:ListItemData">
<Grid Height="80">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Text="{x:Bind Path=Header}"
Style="{StaticResource SubtitleTextBlockStyle}"
Grid.Row="0"/>
<TextBlock Text="{x:Bind Path=Date}"
Style="{StaticResource CaptionTextBlockStyle}"
Grid.Row="1"/>
<TextBlock Text="{x:Bind Path=Body}"
Style="{StaticResource BodyTextBlockStyle}"
Grid.Row="2"
Margin="0,4,0,0" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</RefreshContainer>
</StackPanel>
public sealed partial class MainPage : Page
{
public ObservableCollection<ListItemData> Items { get; set; }
= new ObservableCollection<ListItemData>();
public MainPage()
{
this.InitializeComponent();
Loaded += MainPage_Loaded;
ListView1.ItemsSource = Items;
}
private async void MainPage_Loaded(object sender, RoutedEventArgs e)
{
Loaded -= MainPage_Loaded;
RefreshContainer.RefreshRequested += RefreshContainer_RefreshRequested;
RefreshContainer.Visualizer.RefreshStateChanged += Visualizer_RefreshStateChanged;
// Add some initial content to the list.
await FetchAndInsertItemsAsync(2);
}
private void RefreshButtonClick(object sender, RoutedEventArgs e)
{
RefreshContainer.RequestRefresh();
}
private async void RefreshContainer_RefreshRequested(RefreshContainer sender, RefreshRequestedEventArgs args)
{
// Respond to a request by performing a refresh and using the deferral object.
using (var RefreshCompletionDeferral = args.GetDeferral())
{
// Do some async operation to refresh the content
await FetchAndInsertItemsAsync(3);
// The 'using' statement ensures the deferral is marked as complete.
// Otherwise, you'd call
// RefreshCompletionDeferral.Complete();
// RefreshCompletionDeferral.Dispose();
}
}
private void Visualizer_RefreshStateChanged(RefreshVisualizer sender, RefreshStateChangedEventArgs args)
{
// Respond to visualizer state changes.
// Disable the refresh button if the visualizer is refreshing.
if (args.NewState == RefreshVisualizerState.Refreshing)
{
RefreshButton.IsEnabled = false;
}
else
{
RefreshButton.IsEnabled = true;
}
}
// App specific code to get fresh data.
private async Task FetchAndInsertItemsAsync(int updateCount)
{
for (int i = 0; i < updateCount; ++i)
{
// Simulate delay while we go fetch new items.
await Task.Delay(1000);
Items.Insert(0, GetNextItem());
}
}
private ListItemData GetNextItem()
{
return new ListItemData()
{
Header = "Header " + DateTime.Now.Second.ToString(),
Date = DateTime.Now.ToLongDateString(),
Body = DateTime.Now.ToLongTimeString()
};
}
}
public class ListItemData
{
public string Header { get; set; }
public string Date { get; set; }
public string Body { get; set; }
}
Kapcsolódó cikkek
Dolgozzon együtt velünk a GitHubon
A tartalom forrása a GitHubon található, ahol létrehozhat és áttekinthet problémákat és lekéréses kérelmeket is. További információért tekintse meg a közreműködői útmutatónkat.
Windows developer