In Syncfusion’s Important Studio 2023 Quantity 4 launch, we launched a brand new PullToRefresh management for the .NET MAUI platform.
The .NET MAUI PullToRefresh (SfPullToRefresh) management means that you can refresh the content material displayed inside it by way of a easy pull-to-refresh motion. It may well load numerous UI views in its pulling pane, enabling customers to provoke the refresh motion by flattening from the highest of the view. Moreover, the management presents help for various transition modes and permits complete customization of the consumer interface.
Let’s discover the important thing options of this new management and the steps to get began with it!
Key options
The important thing options of the .NET MAUI PullToRefresh management are:
Pullable content material
The .NET MAUI PullToRefresh management permits us to show advanced views just like the ListView, DataGrid, and different custom-made layouts throughout the pullable pane utilizing the PullableContent property and replace the information by performing a pull motion.
Transition modes
You may improve the consumer expertise with animated transitions between the pullable content material and the refresh indicator when a consumer performs a pull motion. This may be achieved by setting the TransitionMode property.
The PullToRefresh management helps the next two varieties of built-in transitions:
- TransitionMode.SlideOnTop: The progress animation slides over the pullable content material.
- TransitionMode.Push: The pullable content material will get pushed apart to disclose the progress animation.
Consult with the next pictures.
Totally different transition modes in .NET MAUI PullToRefresh management
Customized look
You may customise the stroke coloration, stroke thickness, background, top, and width of the refresh indicator.
View templating
Show any view or management within the progress indicator view for each pulling and refreshing actions by setting the SfPullToRefresh.PullingViewTemplate and SfPullToRefresh.RefreshingViewTemplate properties, respectively.
Programmatic help
The PullToRefresh management additionally permits programmatic refreshing help with out UI interplay:
- StartRefreshing(): To refresh the content material with out interplay in pullable content material.
- EndRefreshing(): To finish the progress animation as soon as the content material is refreshed.
Be aware: For extra particulars, consult with the .NET MAUI PullToRefresh management documentation.
Getting began with the .NET MAUI PullToRefresh management
We’ve got seen the important thing options of the .NET MAUI PullToRefresh management. Let’s see find out how to add it to your utility.
Step 1: Create a .NET MAUI challenge
First, create a .NET MAUI challenge.
Step 2: Add the required NuGet bundle
Syncfusion .NET MAUI controls can be found within the NuGet Gallery. So as to add the .NET MAUI PullToRefresh management to your challenge, open the NuGet bundle supervisor in Visible Studio, and seek for Syncfusion.Maui.PullToRefresh, after which set up it.
Step 3: Register the handler
Within the MauiProgram.cs file, register the handler for Syncfusion core. Consult with the next code.
utilizing Syncfusion.Maui.Core.Internet hosting;
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureSyncfusionCore()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Common.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
fonts.AddFont("Roboto-Medium.ttf", "Roboto-Medium");
fonts.AddFont("Roboto-Common.ttf", "Roboto-Common");
});
return builder.Construct();
}
}
Step 4: Add the namespace
Add the Syncfusion.Maui.PullToRefresh namespace in your XAML web page.
<xmlns:syncfusion ="clr-namespace:Syncfusion.Maui.TreeView;meeting=Syncfusion.Maui.PullToRefresh">
Step 5: Initialize the .NET MAUI PullToRefresh management
Then, initialize the .NET MAUI PullToRefresh management utilizing the included namespace.
<syncfusion:SfPullToRefresh x:Title="pullToRefresh"/>
Step 6: Defining the PullableContent
You may set any view because the PullableContent for the SfPullToRefresh management. Consult with the next code instance.
<?xml model="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GettingStarted.MainPage"
xmlns:sync="clr-namespace:Syncfusion.Maui.ListView;meeting=Syncfusion.Maui.ListView"
xmlns:syncfusion="clr-namespace:Syncfusion.Maui.PullToRefresh;meeting=Syncfusion.Maui.PullToRefresh"
xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;meeting=Microsoft.Maui.Controls"
xmlns:native="clr-namespace:GettingStarted">
<ContentPage.Behaviors>
<native:PullToRefreshViewBehavior />
</ContentPage.Behaviors>
<ContentPage.Content material>
<syncfusion:SfPullToRefresh x:Title="pullToRefresh"
PullingThreshold="100"
RefreshViewThreshold="2"
TransitionMode="Push">
<syncfusion:SfPullToRefresh.PullableContent>
<Grid x:Title="mainGrid"
RowSpacing="0"
BackgroundColor="{Binding Information.BackgroundColor}">
<Grid.RowDefinitions>
<RowDefinition Top="*" />
<RowDefinition Top="106" />
</Grid.RowDefinitions>
<ScrollView VerticalScrollBarVisibility="By no means"
VerticalOptions="Heart"
Grid.Row="0">
<Grid>
.......
.......
.......
.......
</Grid>
</ScrollView>
<Grid x:Title="listViewGrid"
Grid.Row="1"
BackgroundColor="#61FFFFFF"
VerticalOptions="Finish">
<sync:SfListView x:Title="listView"
ItemsSource="{Binding SelectedData}">
.......
.......
.......
</sync:SfListView>
</Grid>
</Grid>
</syncfusion:SfPullToRefresh.PullableContent>
</syncfusion:SfPullToRefresh>
</ContentPage.Content material>
</ContentPage>
Step 7: Refresh the content material by executing the pull-to-refresh motion
Customers can provoke the refresh motion by flattening from the highest of the view. Show the progress indicator by setting the SfPullToRefresh.IsRefreshing property to True earlier than updating the content material. To cover it, set the property to False after updating the content material within the SfPullToRefresh.Refreshing occasion.
this.pullToRefresh.Refreshing += this.PullToRefresh_Refreshing;
non-public void PullToRefresh_Refreshing(object? sender, EventArgs args)
{
this.pullToRefresh!.IsRefreshing = true;
Dispatcher.StartTimer(
new TimeSpan( 0, 0, 0, 1, 3000), () =>
{
this.UpdateData();
this.pullToRefresh.IsRefreshing = false;
return false;
});
}
After executing these code examples, we’ll get output like within the following picture.
GitHub reference
For extra particulars, consult with the .NET MAUI PullToRefresh management demo on GitHub.
Conclusion
Thanks for studying! On this weblog, we’ve explored the options of the brand new Syncfusion .NET MAUI PullToRefresh management rolled out within the 2023 Quantity 4 launch. Check out them and depart your suggestions within the feedback part given under!
Try our Launch Notes and What’s New pages to see different controls and options out there with this launch. For current Syncfusion prospects, the brand new model is on the market on the License and Downloads web page. In case you’re not but our buyer, you possibly can join a 30-day free trial to judge these options.
For questions, you possibly can attain us by way of our help boards, help portal, or suggestions portal.
