C# WinUI3 のScrollViewをマウスホイールで横向きにスクロールさせる手順

C# WinUI 3アプリを作っていく途中で、調べたことを忘録的に投稿します。今回はWinUI3プロジェクトで、Xamlに追加したScrollViewコントロールに表示したコンテンツをマウスのホイールで横向きにスクロールさせたい場合の手順です。

ScrollViewのマウスホイール動作

Xamlに［ScrollView］を追加して［GridView］などでコンテンツを並べます。

実行すると画面に、［ScrollView］で指定した範囲の画像が表示され、スクロールで移動が可能になります。。

この際、既定値ではマウスのホイール操作でも画面がスクロールしてくれます。

［ContentOrientation］で横向きに操作を可能にして、表示される画像を横に並べて配置すると画面を横向きにスクロールが可能になります。

しかし、マウスのホイール操作は縦向きのスクロール操作になっているのでScrollViewの横スクロールには対応してくれません。

マウスのホイール操作で横スクロール

色々考えた所、こんな感じでマウスのホイール操作で［ScrollView］を横方向でスクロールさせることが可能でした。

簡単に原理を説明すると、通常はXamlに追加した［ScrollView］と内包するコンテンツは次のような関係になっています。

縦長のコンテンツの一部を［ScrollView］で切り取って表示する見せ方になっています。

なので、こんな感じで内包しているコンテンツを［RotateTransform］で半時計周りに90度回転させます。

その後に、［ScrollView］を時計周りに90度回転させると、Xamlでは縦スクロールのコントロールを画面上で横スクロールに表示できます。

Xamlでは縦方向のスクロールになっているので、マウスのホイール操作をすると画面では左右にスクロールしてくれます。

ホイールの上下でスクロールする方向を逆向きにしたい場合は［ScrollView］と内包するコンテンツの回転方向を逆に設定します。

例えば［GridView］のテンプレートでコンテンツを配置している場合は、Xamlを次のように編集するとマウスのホイール操作で横向きにスクロールする［ScrollView］を表示できます。

<Grid>
  <ScrollView
    ContentOrientation="Vertical"
    VerticalAlignment="Center" HorizontalAlignment="Center"    
    RenderTransformOrigin="0.5,0.5">
    <ScrollView.RenderTransform>
      <RotateTransform Angle="90" />
    </ScrollView.RenderTransform>
    <GridView VerticalAlignment="Center" HorizontalAlignment="Center">
      <GridView.ItemTemplate>
        <DataTemplate x:DataType="x:String">
          <Grid>
            <Image Source="{Binding imgSource}" Width="480" Height="480" Stretch="Uniform" RenderTransformOrigin="0.5,0.5">
              <Image.RenderTransform>
                <RotateTransform Angle="270" />
              </Image.RenderTransform>
            </Image>
          </Grid>
        </DataTemplate>
      </GridView.ItemTemplate>
    </GridView>
  </ScrollView>
</Grid>

まとめ

今回は短い記事ですが、Visual StudioのWinUI3プロジェクトで、ScrollViewコントロールに表示したコンテンツをマウスのホイールで横向きにスクロールさせたい場合の手順について紹介しました。

既定値ではマウスのホイール操作は縦方向の操作になっています。

［ScrollView］コントロールと内包するコンテンツの表示方向を回転させるとホイール操作で横向きにスクロールが可能です。

WinUI 3アプリで［ScrollView］をマウスのホイール操作で横向きにスクロールさせたい人の参考になれば幸いです。

スポンサーリンク

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