C# WinUI3の［スクロールして更新］を追加したい場合の対処法

C# WinUI 3アプリを作っていく途中で、調べたことを忘録的に投稿します。今回はWinUI3プロジェクトで［ScrollView］などでコンテンツをスクロールして更新する機能を追加する方法です。

［RefreshContainer］コントロール

WinUI3で利用で画面に収まらないコンテンツを表示する際に利用する［ScrollView］や［ScrollViewer］と［RefreshContainer］コントロールを組み合わせると［引っ張って更新］（PullToRefresh）が実装できます。

スマホやタブレットのアプリには、当たり前のように実装されている機能がWinUI3にも追加できます。

注意点として、マウスによるスクロールには対応していないので、タッチスクリーンやタッチパッドのようなデバイスが必要になります。

例えば、次のようなXamlでスクロールバー付きの［Grid］ビューに画像を表示してみます。

<Grid>
  <ScrollViewer>
    <Grid Name="Image_Grid">
      <Image Source="hogehoge.jpg" Stretch="Uniform"/>
    </Grid>
   </ScrollViewer>
</Grid>

実行して表示されたコンテンツをタッチパッドやタッチスクリーンで下にスクロールすると、上側に隙間が表示されます。

このままでは、［引っ張って更新］（PullToRefresh）のイベントが取得できないので［ScrollViewer］を［RefreshContainer］コントロールで囲みます。

具体的には、次のコードに変更します。

<Grid>
  <RefreshContainer>
    <ScrollViewer>
      <Grid Name="Image_Grid">
        <Image Source="hogehoge.jpg" Stretch="Uniform"/>
      </Grid>
     </ScrollViewer>
  </RefreshContainer>
</Grid>

実行すると、コンテンツを下にスクロールするとアイコンが表示されます。

更新用のイベント［RefreshRequested］イベントを追加します。

<Grid>
  <RefreshContainer RefreshRequested="RefreshContainer_RefreshRequested">
    <ScrollViewer>
      <Grid Name="Image_Grid">
        <Image Source="hogehoge.jpg" Stretch="Uniform"/>
      </Grid>
     </ScrollViewer>
  </RefreshContainer>
</Grid>

後は、追加したイベントにコンテンツを更新するための処理を追加します。

private void RefreshContainer_RefreshRequested(Microsoft.UI.Xaml.Controls.RefreshContainer sender, RefreshRequestedEventArgs args)
{
  //更新処理
}

その他の詳しい内容はMicrosoft公式の［引っ張って更新］をご覧ください。

まとめ

WinUI3プロジェクトで［ScrollView］などでコンテンツをスクロールして更新する機能を追加する方法について紹介しました。

［RefreshContainer］コントロールを組み合わせることでコンテンツを下にスクロールして更新する機能が追加できます。

WinUI 3 アプリで画面をスクロールして更新したい人の参考になれば幸いです。

スポンサーリンク

最後までご覧いただき、ありがとうございます。