xamarin.android-docs/xamarin-android/SfPullToRefresh/Customizing-PullableContent.md

layout	title	description	platform	control	documentation
post	Customizing PullableContent | Xamarin.Android | Syncfusion	How to add customized pullable content of SfPullToRefresh and refresh it in Xamarin.Android DataGrid (SfDataGrid).	Xamarin.Android	SfPullToRefresh	ug

Customizing PullableContent

SfPullToRefresh supports various layouts as its pullable content.

This section explains how to refresh the following views by hosting as a pullable content of SfPullToRefresh:

• ListView
• SfDataGrid
• Custom layout

ListView

SfPullToRefresh can host the ListView as its pullable content and refresh the view.

ListView customizations

Refer to the following code example for creating and customizing a ListView:

{% highlight c# %}

//MainActivity.cs

ListView listView; CustomBaseAdapter adapter; InboxRepository repository;

protected override void OnCreate(Bundle bundle) { .... listView = new ListView(this); listView.SetBackgroundColor(Color.LightGray); repository = new InboxRepository(); adapter = new CustomBaseAdapter(this, repository.InboxItems); listView.Adapter = adapter; .... }

{% endhighlight %}

The example code of the adapter and the template of the ListView are not displayed here. However, the source code of this sample can be downloaded here.

Adapting ListView in SfPullToRefresh

To add ListView as a pullable content and to refresh the pullable content, refer to the following code example:

{% highlight c# %}

//MainActivity.cs

SfPullToRefresh pullToRefresh;

protected override void OnCreate (Bundle bundle) { .... pullToRefresh = new SfPullToRefresh(this); pullToRefresh.PullableContent = listView; pullToRefresh.TransitionType = TransitionType.Push; pullToRefresh.Refreshing += PullToRefresh_Refreshing; SetContentView(pullToRefresh); .... }

private async void PullToRefresh_Refreshing(object sender, RefreshingEventArgs e) { await Task.Delay(3000); repository.RefreshItemSource(); adapter.NotifyDataSetChanged(); e.Refreshed = true; }

//InboxRepository.cs

private Random random;

public ObservableCollection InboxItems { get; set; }

public void RefreshItemSource() { int count = random.Next(1, 6);

for (int i = 0; i < count; i++)
{
    int randomNumber = random.Next(0, 9);
    Mail mail = new Mail();
    mail.Sender = sender[random.Next(0, 24)];
    mail.Subject = subject[randomNumber];
    mail.Details = details[randomNumber];
    mail.BackgroundColor = colors[randomNumber];
    InboxItems.Insert(i, mail);
}

}

{% endhighlight %}

The final output of the sample of SfPullToRefresh adapting ListView as its pullable content is as follows:


SfDataGrid

SfPullToRefresh can host the SfDataGrid as its pullable content and refresh it.

SfDataGrid customizations

Click here to explore SfDataGrid. Refer to the following code example to create and customize a SfDataGrid:

{% highlight c# %}

//MainActivity.cs

SfDataGrid sfGrid; ViewModel viewModel;

protected override void OnCreate(Bundle bundle) { .... sfGrid = new SfDataGrid(this); sfGrid.HeaderRowHeight = 52; sfGrid.RowHeight = 48; viewModel = new ViewModel(); viewModel.SetRowsToGenerate(100); sfGrid.AutoGenerateColumns = false; GridGenerateColumns(); sfGrid.ColumnSizer = ColumnSizer.Star; sfGrid.ItemsSource = viewModel.OrdersInfo; .... }

void GridGenerateColumns() { sfGrid.Columns.Add(new GridTextColumn() { MappingName = "OrderID", HeaderText = "Order ID" }); sfGrid.Columns.Add(new GridTextColumn() { MappingName = "CustomerID", HeaderText = "Customer ID", TextAlignment = GravityFlags.CenterVertical }); sfGrid.Columns.Add(new GridTextColumn() { MappingName = "Freight", Format = "C", CultureInfo = new CultureInfo("en-US"), TextAlignment = GravityFlags.Center }); sfGrid.Columns.Add(new GridTextColumn() { MappingName = "ShipCity", HeaderText = "Ship City", TextAlignment = GravityFlags.CenterVertical }); }

{% endhighlight %}

The example code of the ViewModel is not displayed here. However, the source code of this sample can be downloaded here.

Adapting SfDataGrid in SfPullToRefresh

To add SfDataGrid as a pullable content and to refresh the pullable content, refer to the following code example:

{% highlight c# %}

//MainActivity.cs

SfPullToRefresh pullToRefresh;

protected override void OnCreate(Bundle bundle) { .... pullToRefresh = new SfPullToRefresh(this); pullToRefresh.Refreshing += PullToRefresh_Refreshing; pullToRefresh.RefreshContentThreshold = 52; pullToRefresh.PullableContent = sfGrid; SetContentView(pullToRefresh); .... }

private async void PullToRefresh_Refreshing(object sender, RefreshingEventArgs e) { await Task.Delay(3000); if (viewModel != null) viewModel.ItemsSourceRefresh(); e.Refreshed = true; }

{% endhighlight %}

The final output of the sample of SfPullToRefresh adapting SfDataGrid as its pullable content is as follows:


Custom layout

A layout can be customized and added as the pullable content of SfPullToRefresh.

The code example of the customized layout is as follows:

{% highlight xaml %}

//pullToRefresh.xml

{% endhighlight %}

Adapting custom layout in SfPullToRefresh

To add the above custom layout as a pullable content and to refresh the pullable content, refer to the following code example:

{% highlight c# %}

//MainActivity.cs

LinearLayout linearLayout; ImageView weatherImageView; Handler handler; TextView degreeText;

protected override void OnCreate (Bundle bundle) { .... LayoutInflater layoutInflater = LayoutInflater.From(this); view = layoutInflater.Inflate(Resource.Layout.pullToRefresh, null); linearLayout = (LinearLayout)view; //The custom layout is set as the pullable content of SfPullToRefresh. pullToRefresh.PullableContent = linearLayout; .... //Refreshing of the pullable content is handled here. pullToRefresh.Refreshing += (sender, e) => { if (selectedLayout != null) { run = new Java.Lang.Runnable(() => { Java.Util.Random random = new Java.Util.Random(); int i = random.NextInt(6 - 0 + 1) + 0; weatherImageView = (ImageView)linearLayout.FindViewById(Resource.Id.weatherImage); weatherImageView.SetImageResource(dataSource[i].Type); degreeText = (TextView)linearLayout.FindViewById(Resource.Id.temperatureTextView); String s1 = "" + dataSource[i].Temperature + (char)0x00B0 + "/12"; SpannableString ss3 = new SpannableString(s1); ss3.SetSpan(new RelativeSizeSpan(2f), 0, 4, SpanTypes.ExclusiveExclusive); degreeText.SetText(ss3, TextView.BufferType.Normal); e.Refreshed = true; }); handler.PostDelayed(run, 3000); } }; .... }

{% endhighlight %}

The final output of the above sample is as follows:


Samples

Download the source code of the sample from the below link:

• ListView

• SfDataGrid

• Custom layout