Refresh Button UWP

Question

I want to add a refresh button to my app so that I don't always have to quit the app to clear the data.

I have tried a RefreshRequested, but I can't make it work.

C# code:

private void RefreshButtonClick(object sender, RoutedEventArgs e)
    {
        RefreshContainer.requestRefresh();
    } 

 <RefreshContainer>

<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Width="910" Height="383" Margin="0,0,0,0">

<RelativePanel 
HorizontalAlignment="Center" BorderBrush="DarkOliveGreen" BorderThickness="8" Background="FloralWhite" Height="356" VerticalAlignment="Center" Width="871" Margin="0,0,0,0" Visibility="Visible" RequestedTheme="Default">

<AppBarButton x:Name="RefreshButton" Click="RefreshButtonClick"
                      Icon="Refresh" Label="Refresh" HorizontalAlignment="Left" Margin="155,178,0,0" VerticalAlignment="Top"/>

<TextBlock x:Name="timerLabel"  HorizontalAlignment="Left" Text="00:00:00" TextWrapping="Wrap" VerticalAlignment="Top"  FontSize="72" FontWeight="Normal"   TextAlignment="Center" Width="328" Margin="272,90,0,0"/>

 <Button Name="startButton" Background="MediumSeaGreen" Foreground="White" Content="Start" HorizontalAlignment="Left" Click="Button_Click_Start"  VerticalAlignment="Top" Margin="311,219,0,0"/>

<Button Name="stopButton" Background="MediumSeaGreen" Foreground="White" Content="Pause" HorizontalAlignment="Left" Click="Button_Click_Pause" VerticalAlignment="Top" Margin="398,219,0,0" RenderTransformOrigin="1.373,0.57"/>

 <Button Name="resetButton"  Background="MediumSeaGreen" Foreground="White" Content="Reset" HorizontalAlignment="Left" Click="Button_Click_Reset" VerticalAlignment="Top" Margin="498,219,0,0" RenderTransformOrigin="1.373,0.57"/>

<Button Name="restButton" Content="Parametres" HorizontalAlignment="Left" Click="Button_Click_Rest" VerticalAlignment="Top" Margin="698,192,0,0" RenderTransformOrigin="1.373,0.57"/>

<TextBlock Name="Round" Text="Nombre Round" HorizontalAlignment="Left" Height="20" Margin="382,70,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="140" TextDecorations="Underline"/>

        </RelativePanel>

 </Grid>

    </RefreshContainer>

I expect the app data to refresh

Please look at the following example from MSDN https://learn.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/pull-to-refresh you will need to setup data binding to get this work, plus a data template. This is really complicated as well. An alternative solution would be to setup data binding and refresh the backing object — Stuart Smith, Jun 12 '19 at 00:04
Thank you for your answer, I had seen this solution of pull to refresh but I am looking for a refresh button where you clik on it and it refreshes your page. I tried to adapt the pull to refresh to a button but was not able to — Tomas, Jun 12 '19 at 06:14

score 0 · Answer 1 · answered Jun 12 '19 at 06:53

Refresh Button UWP

I tested your code, the problem is you have not set a scroll-able control as RefreshContainer's content. Base on @Stuart Smith provided document, you could realize refresh feature, before that you need place the above Grid content under the ScrollViewer.

Xaml

<RefreshContainer Name="MyRefreshContainer" RefreshRequested="MyRefreshContainer_RefreshRequested">
    <ScrollViewer>
        <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Width="910" Height="383" Margin="0,0,0,0">
            <RelativePanel
           HorizontalAlignment="Center" BorderBrush="DarkOliveGreen" BorderThickness="8" Background="FloralWhite" Height="356" VerticalAlignment="Center" Width="871" Margin="0,0,0,0" Visibility="Visible" RequestedTheme="Default">

                <AppBarButton x:Name="RefreshButton" Click="RefreshButtonClick"
              Icon="Refresh" Label="Refresh" HorizontalAlignment="Left" Margin="155,178,0,0" VerticalAlignment="Top"/>

                <TextBlock x:Name="timerLabel"  HorizontalAlignment="Left" Text="00:00:00" TextWrapping="Wrap" VerticalAlignment="Top"  FontSize="72" FontWeight="Normal"   TextAlignment="Center" Width="328" Margin="272,90,0,0"/>

                <Button Name="startButton" Background="MediumSeaGreen" Foreground="White" Content="Start" HorizontalAlignment="Left"   VerticalAlignment="Top" Margin="311,219,0,0"/>

                <Button Name="stopButton" Background="MediumSeaGreen" Foreground="White" Content="Pause" HorizontalAlignment="Left"  VerticalAlignment="Top" Margin="398,219,0,0" RenderTransformOrigin="1.373,0.57"/>

                <Button Name="resetButton"  Background="MediumSeaGreen" Foreground="White" Content="Reset" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="498,219,0,0" RenderTransformOrigin="1.373,0.57"/>

                <Button Name="restButton" Content="Parametres" HorizontalAlignment="Left"  VerticalAlignment="Top" Margin="698,192,0,0" RenderTransformOrigin="1.373,0.57"/>

                <TextBlock Name="Round" Text="Nombre Round" HorizontalAlignment="Left" Height="20" Margin="382,70,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="140" TextDecorations="Underline"/>

            </RelativePanel>

        </Grid>
    </ScrollViewer>
</RefreshContainer>

Code behind

private void RefreshButtonClick(object sender, RoutedEventArgs e)
{
    MyRefreshContainer.RequestRefresh();
}

private async void MyRefreshContainer_RefreshRequested(RefreshContainer sender, RefreshRequestedEventArgs args)
{
    using (var RefreshCompletionDeferral = args.GetDeferral())
    {
        // Do some async operation to refresh the content




        RefreshCompletionDeferral.Complete();
        RefreshCompletionDeferral.Dispose();
    }
}

Thank's a lot ! Being an absolute beginner to programming, I don't know what await method to use in order for the refresh to work .. Could you please help me a little bit more ? — Tomas, Jun 12 '19 at 08:12
I used this : await ApplicationData.Current.ClearAsync(); but I get this error : System.IO.DirectoryNotFoundException — Tomas, Jun 12 '19 at 08:31
@Tomas I tested calling `await ApplicationData.Current.ClearAsync();` in the `MyRefreshContainer_RefreshRequested` event handler it woks well. Could share a blank repro sample ? — Nico Zhu, Jun 12 '19 at 08:45
For Asynchronous programming please refer this [document](https://learn.microsoft.com/en-us/windows/uwp/threading-async/asynchronous-programming-universal-windows-platform-apps). — Nico Zhu, Jun 12 '19 at 08:48
I tried your solution but when I press Refresh nothing happens. I am looking for something that would really refresh the data, or even restart the app if I can't refresh — Tomas, Jun 12 '19 at 09:00
If you just want to clear app's data , you have no need use `RefreshContainer`, it is often used to create UI interaction. — Nico Zhu, Jun 12 '19 at 09:07
You could set a Task delay in the `MyRefreshContainer_RefreshRequested`. `using (var RefreshCompletionDeferral = args.GetDeferral()) { // Do some async operation to refresh the content await ApplicationData.Current.ClearAsync(); await Task.Delay(2000); RefreshCompletionDeferral.Complete(); RefreshCompletionDeferral.Dispose(); }` — Nico Zhu, Jun 12 '19 at 09:10
Hello Nico Zhu, I have abandoned the refresh button as I am not able to make it work. Thank you for your help — Tomas, Jun 14 '19 at 08:20
All right, if you have any updates please feel free post here, and if the above reply is helpful please mark it, Thx. — Nico Zhu, Jun 14 '19 at 08:33

score 0 · Answer 2 · answered Jul 18 '19 at 16:15

Tomas, I see you've abandoned the refresh button for now, but I wanted to follow up in case you revisit this later or if others run into this issue in the future.

In order for the data to refresh, you'd need to code this in. “To get fresh content when needed, handle the RefreshRequested event. In the event handler, you'll need code specific to your app to get the fresh content.” https://learn.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/pull-to-refresh#handle-a-refresh-request. There's a sample in the doc there too.

You'd typically use data binding for this and the RefreshRequested event would need to edit the bound object.

using (var RefreshCompletionDeferral = args.GetDeferral())
{
     await FetchAndInsertItemsAsync(3);
}

In the sample, you'll notice that FetchAndInsertItemsAsync is inserting new items to the backing collection.

There's more info on data binding here: https://learn.microsoft.com/en-us/windows/uwp/data-binding/data-binding-quickstart

Refresh Button UWP

2 Answers2