C# WinUI3 でScrollViewにコードから画像を追加する手順

C# WinUI 3アプリを作っていく途中で、調べたことを忘録的に投稿します。今回はWinUI3プロジェクトで、Xamlに追加したScrollViewコントロールにC#コードから複数の画像を追加する場合の手順です。

ScrollViewコントロールに画像を追加

WinUI3プロジェクトでScrollViewコントロールに、C#コードから画像を追加するには［Content］プロパティに直接指定します。

Xamlに［ScrollView］を追加して、コードから取得できるように “Name” を追加します。

<Grid>
  <ScrollView Name="sv_main" Height="300" Width="400" VerticalAlignment="Center" HorizontalAlignment="Center">
  </ScrollView>
</Grid>

C#コードでは画像クラスを作成して［ScrollView］クラスの［Content］プロパティに設定します。

public ScrollView()
{
  this.InitializeComponent();
  Microsoft.UI.Xaml.Controls.Image img = new Microsoft.UI.Xaml.Controls.Image();
  String path = "H:\\Users\\t_nak\\Downloads\\001.jpg";
  Uri uri = new(path);
  BitmapImage bitmapImg = new BitmapImage();
  bitmapImg.UriSource= uri;
  img.Source = bitmapImg;
  sv_main.Content = img;
}

実行すると画面に、指定した画像が表示されスクロールで移動します。

複数の画像を追加

複数の画像を追加する場合、GridViewなどのレイアウトコントロールを利用した方が楽に実装できました。

ScrollViewは、特別なコントロールではなく内包した要素（［Content］プロパティ）をトリミングしてスクロールを行うだけなので、利用しやすいレイアウトを配置すれば簡単に実装が可能です。

例えば［GridView］などを追加してテンプレートで配置します。

<Grid>
  <ScrollView ContentOrientation="Vertical" Name="sv_main" Height="300" Width="400" VerticalAlignment="Center" HorizontalAlignment="Center" Background="White">
    <GridView Name="Image_GridView">
      <GridView.ItemTemplate>
        <DataTemplate x:DataType="x:String">
          <Grid Name="Image_Grid">
            <Image Source="{Binding ImageUrl}" Width="400" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"/>
          </Grid>
        </DataTemplate>
      </GridView.ItemTemplate>
    </GridView>
  </ScrollView>
</Grid>

新しい画面を［ImageList］クラスとして表示するコードを追加します。

List<ImageList> imglist = new List<ImageList>();
public ScrollView()
{
  this.InitializeComponent();

  imglist.Add(new ImageList() { Name = "1", ImageUrl = "001.jpg" });
  imglist.Add(new ImageList() { Name = "2", ImageUrl = "002.jpg" });
  imglist.Add(new ImageList() { Name = "3", ImageUrl = "003.jpg" });
  imglist.Add(new ImageList() { Name = "4", ImageUrl = "004.jpg" });
  imglist.Add(new ImageList() { Name = "5", ImageUrl = "005.jpg" });
  Image_GridView.ItemsSource = imglist;
}

class ImageList
{
    public string Name { get; set; }
    public string ImageUrl { get; set; }
}

実行すると、こんな感じで［ScrollView］に画像が追加されてスクロール表示されます。

まとめ

今回は短い記事ですが、Visual StudioのWinUI3プロジェクトで、Xamlに追加したScrollViewコントロールにC#コードから複数の画像を追加する場合の手順について紹介しました。

単一の画像を追加する場合は［ScrollView］クラスの［Content］プロパティに設定することが表示が可能です。

複数の画像を追加する場合はレイアウトコントロールを利用して配置して表示が可能です。

WinUI 3アプリで［ScrollView］に複数の画像を追加して表示したい人の参考になれば幸いです。

スポンサーリンク

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