[Xamarin] ScrollView refresh

RefreshView with ScrollView

먼저, ScrollView를 만든다.

<ScrollView>

...

</ScrollView>

 

그리고 ScrollView 바깥에 RefreshView로 감싸준다.

<RefreshView
    x:Name="refreshView"
    Padding="30"
    Command="{Binding ReloadCommand}" // ViewModel Binding
    IsRefreshing="{Binding IsReloading}"> // ViewModel Binding
 
    <ScrollView>
        ...
    </ScrollView>
</RefreshView>

 

ViewModel을 생성한다.

using System.ComponentModel;

namespace yournamespace
{
    class YourViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        
    	public YourViewModel()
        {
        }
    }
}

 

 

ViewModel에 리프레쉬 될 때 실행될 Command와, 리프레쉬가 되는 상태를 나타내는 IsReloading 프로퍼티를 정의한다.

public ICommand ReloadCommand { set; get; }
...

ReloadCommand = new Command(() =>
{
    // do something (refreshing...)
    // done
    IsReloading = false;
});

...

public bool IsReloading
{
    get => _isReloading;
    set
    {
        if (_isReloading == value) return;
        _isReloading = value;
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("IsReloading"));
    }
}

 

code behind에서 BindingContext 지정

public MannaPage()
{
    InitializeComponent();
    BindingContext = new MannaViewModel();
}

 

---

이렇게 코드를 작성하고 나면, Force Scroll (?)을 하면 바인딩한 Command가 실행된다.

Command 내부 작업이 완료되면 IsReloading가 false가 되면서 Refresh 중지.

 

 

(xaml 전체코드)

<RefreshView
    x:Name="refreshView"
    Padding="30"
    Command="{Binding ReloadCommand}"
    IsRefreshing="{Binding IsReloading}">

    <ScrollView VerticalScrollBarVisibility="Never">
        <StackLayout>
            <Label
                FontAttributes="Bold"
                FontSize="Subtitle"
                Text="{Binding TodayString}"
                TextColor="Black" />

            <Label
                FontAttributes="Bold"
                TextColor="Black"
                Text="{Binding TitleString}" FontSize="Header" />

            <Label Text="{Binding AllString}" FontSize="Body" TextColor="Black" />

            <yummy:PancakeView
                x:Name="ShareButton"
                IsVisible="false"
                BackgroundGradientStartPoint="0.75,0.75" BackgroundGradientEndPoint="0,1"
                CornerRadius="25"
                HeightRequest="50"
                HorizontalOptions="CenterAndExpand"
                WidthRequest="100">
                <yummy:PancakeView.BackgroundGradientStops>
                    <yummy:GradientStopCollection>
                        <yummy:GradientStop Color="#D4331B" Offset="0.3" />
                        <yummy:GradientStop Color="#FFA500" Offset="0.8" />
                    </yummy:GradientStopCollection>
                </yummy:PancakeView.BackgroundGradientStops>
                <Label
                    FontAttributes="Bold"
                    FontSize="20"
                    HorizontalOptions="CenterAndExpand"
                    Text="공유"
                    TextColor="White"
                    VerticalOptions="CenterAndExpand">
                    <Label.GestureRecognizers>
                        <TapGestureRecognizer Tapped="ShareClicked" />
                    </Label.GestureRecognizers>
                </Label>
            </yummy:PancakeView>
        </StackLayout>
    </ScrollView>
</RefreshView>