C# WinUI3の［引っ張って更新］のアイコンを変更する方法

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

［RefreshContainer］コントロール

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

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

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

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

スクロール時に表示されるアイコン変更

タッチパッドやタッチスクリーンでスクロールをした際に既定値では下画像のようなアイコンが表示されます。

このアイコンは［RefreshVisualizer］で変更が可能です。

例えば、FontIconを利用したい場合には、こんな感じで指定します。

<Grid>
  <RefreshContainer>
    <RefreshContainer.Visualizer>
      <RefreshVisualizer>
        <RefreshVisualizer.Content>
          <SymbolIcon Symbol="Sync"/>
        </RefreshVisualizer.Content>
      </RefreshVisualizer>
    </RefreshContainer.Visualizer>

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

実行すると、表示されるアイコンが変更できました。

オリジナルの画像リソースを使いたい場合には、こんな感じ。

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

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

<Grid>
  <RefreshContainer>
    <RefreshContainer.Visualizer>
      <RefreshVisualizer>
        <RefreshVisualizer.Content>
          <Image Source="avator.png" Width="64"/>
        </RefreshVisualizer.Content>
      </RefreshVisualizer>
    </RefreshContainer.Visualizer>

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

実行すると、好きな画像をアイコンに変更できます。

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

まとめ

WinUI3プロジェクトで［RefreshContainer］コントロールでコンテンツをスクロールして更新する際に表示されるアイコンを変更する方法について紹介しました。

［RefreshVisualizer］コントロールを組み合わせることでコンテンツを下にスクロールした際に表示されるアイコンの変更が可能です。

WinUI 3 アプリで［引っ張って更新］する際に表示されるアイコンを変更したい人の参考になれば幸いです。

スポンサーリンク

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