C# WinUI3の［RefreshContainer］で更新アイコンが表示されない場合の対処法

C# WinUI 3アプリを作っていく途中で、調べたことを忘録的に投稿します。今回はWinUI3プロジェクトで［RefreshContainer］コントロールでコンテンツをスクロールしてもアイコンが表示されない場合の対処法です。

［RefreshContainer］コントロール

WinUI3プロジェクトで［RefreshContainer］コントロールを利用すると［引っ張って更新］（PullToRefresh）が実装できます。

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

詳しい内容は、別記事をご覧ください。

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

タッチパッドやタッチスクリーンが必要

［RefreshContainer］は、タッチパッドやタッチスクリーンでスクロールしないと下画像のようなアイコンは表示されません。

マウスなどの入力デバイスでは、下向きにスクロールしても上限を越えてコンテンツをスライドができません。

そのため、［RefreshContainer］コントロールで実装された［引っ張って更新］（PullToRefresh）を利用するには、タッチパッドやタッチ機能付きのスクリーンなどのデバイスが必要です。

スクロール［ScrollView］が必要

例えば、［RefreshContainer］コントロールを使う場合、こんな感じで実装します。

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

しかし、このコードでは実行して画面をスクロールしても更新アイコンが表示されません。

［RefreshContainer］コントロールで［引っ張って更新］（PullToRefresh）を利用する場合には［ScrollView］または［ScrollViewer］コントロールが必要です。

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

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

実行して、画面をスクロールすると更新アイコンが表示されます。

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

まとめ

WinUI3プロジェクトで［RefreshContainer］コントロールでコンテンツをスクロールしてもアイコンが表示されない場合の対処法について紹介しました。

［RefreshContainer］コントロールで画面のスクロールを検出して処理をする場合、［ScrollView］または［ScrollViewer］コントロールと組み合わせて利用する必要があります。

また、マウスなどの入力デバイスでは［RefreshContainer］コントロールが反応しないため実装の確認をする場合にタッチパッドやタッチスクリーンなどのデバイスが必要です。

WinUI 3 アプリで［RefreshContainer］コントロールでコンテンツをスクロールしてもアイコンが表示されない人の参考になれば幸いです。

スポンサーリンク

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