{"id":45803,"date":"2019-11-20T14:02:19","date_gmt":"2019-11-20T22:02:19","guid":{"rendered":"http:\/\/devblogs.microsoft.com\/xamarin\/?p=45803"},"modified":"2020-04-28T02:02:42","modified_gmt":"2020-04-28T09:02:42","slug":"refreshview-xamarin-forms","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/refreshview-xamarin-forms\/","title":{"rendered":"Pull-to-refresh with Xamarin.Forms RefreshView"},"content":{"rendered":"

There are tons of great new features packed into Xamarin.Forms 4.3<\/a>. A new favorite feature is CollectionView<\/a>. A highly performant and flexible way of displaying a list of data in a variety of layouts. One frequently-asked question with CollectionView, or other scrolling layouts, is how to add Pull-to-Refresh functionality similar to ListView. The answer: wrap it in the new RefreshView<\/a>. <\/p>\n

Xamarin.Forms RefreshView<\/h2>\n

This control was introduced alongside CollectionView in Xamarin.Forms 4.3. Which gives you complete control over adding pull-to-refresh to any scrollable control. Let’s take a look at how easy it is to add pull-to-refresh to your app with RefreshView.<\/p>\n

\"Screenshot<\/p>\n

To setup the code we will need a CollectionView<\/strong>:<\/p>\n

<CollectionView ItemsSource=\"{Binding Items}\">\r\n    <CollectionView.ItemsLayout>\r\n        <LinearItemsLayout Orientation=\"Vertical\"\/>\r\n    <\/CollectionView.ItemsLayout>\r\n    <!-- Add ItemTemplate Here -->\r\n<\/CollectionView><\/pre>\n
In our ViewModel, or code behind, setup an ICommand<\/b> to be executed when the refresh happens. This acts as the binding property called IsRefreshing<\/b> that is a boolean to control when the RefreshView<\/strong> is active.<\/p>\n
\r\npublic ICommand RefreshCommand { get; }\r\npublic ItemsViewModel()\r\n{\r\n    Title = \"Browse\";\r\n    Items = new ObservableCollection();\r\n    RefreshCommand = new Command(ExecuteRefreshCommand);\r\n}\r\n\r\nbool isRefreshing;\r\npublic bool IsRefreshing\r\n{\r\n    get => isRefreshing;\r\n    set\r\n    {\r\n        isRefreshing = value;\r\n        OnPropertyChanged(nameof(IsRefreshing));\r\n    }\r\n}\r\n\r\nvoid ExecuteRefreshCommand()\r\n{\r\n    Items.Clear();\r\n    Items.Add(new Item { Text = \"Refreshed Data\", Description = \"Whoa!\" });\r\n    \r\n    \/\/ Stop refreshing\r\n    IsRefreshing = false;\r\n}\r\n<\/code><\/pre>\n
Now, all we need to do is wrap the CollectionView<\/strong> inside of a RefreshView<\/strong>. Then bind the IsRefreshing<\/b> and Command<\/b> properties to our properties in our ViewModel.<\/p>\n
<RefreshView IsRefreshing=\"{Binding IsRefreshing}\"\r\n             Command=\"{Binding RefreshCommand}\">\r\n    <CollectionView ItemsSource=\"{Binding Items}\">\r\n        <CollectionView.ItemsLayout>\r\n            <LinearItemsLayout Orientation=\"Vertical\"\/>\r\n        <\/CollectionView.ItemsLayout>\r\n        <!-- Add ItemTemplate Here -->\r\n    <\/CollectionView>\r\n<\/RefreshView><\/pre>\n
When running the application, we can now perform a pull-to-refresh on our CollectionView.<\/p>\n
\"Xamarin.Forms<\/p>\n
Controlling IsRefreshing<\/h2>\n
In the example above, the RefreshView<\/b> will set IsRefreshing<\/strong> to “True” when the user pulls down. Then manually set the property to false to stop the RefreshView<\/b> from showing. Use the IsRefreshing<\/b> property as a gate to control if the data should be refreshed to include a binding mode<\/a>. This is so that only the code behind updates the property.<\/p>\n
<RefreshView IsRefreshing=\"{Binding IsRefreshing, Mode=OneWay}\"\r\n             Command=\"{Binding RefreshCommand}\">\r\n   <!-- CollectionView -->\r\n<\/RefreshView><\/pre>\n
In the ViewModel<\/b> we can now check against the property and set it both ways:<\/p>\n
\r\nvoid ExecuteRefreshCommand()\r\n{\r\n    if (IsRefreshing)\r\n        return;\r\n\r\n    IsRefreshing = true;\r\n    Items.Clear();\r\n    Items.Add(new Item { Text = \"Refreshed Data\", Description = \"Whoa!\" });\r\n    IsRefreshing = false;\r\n}\r\n<\/code><\/pre>\n
Learn More<\/h2>\n
Learn more about RefreshView<\/a> from our amazing documentation. With details such as setting the refresh color, disabling refresh, and even controlling the pull direction on UWP<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
The RefreshView control was introduced alongside CollectionView in Xamarin.Forms 4.3 to give you complete control over adding pull-to-refresh to any scrollable control. <\/p>\n","protected":false},"author":544,"featured_media":45806,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2,1,367],"tags":[751,7485,7484,7483],"class_list":["post-45803","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","category-xamarin","category-xamarin-forms","tag-collectionview","tag-controls","tag-refreshview","tag-xamarin-forms-4-3"],"acf":[],"blog_post_summary":"
The RefreshView control was introduced alongside CollectionView in Xamarin.Forms 4.3 to give you complete control over adding pull-to-refresh to any scrollable control. <\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/45803","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/544"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=45803"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/45803\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/45806"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=45803"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=45803"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=45803"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}