Scrollable image stack using Blazor Component

user_10468047 0
Viewed 1776

Is it possible to use C# for creating a scrollable image stack in a Blazor app, much like what you’d see in a DICOM viewer? Or is this something better suited for JavaScript? I have all of the images I want to scroll through as bitmaps, but I don’t know how to go about using a scroll event in Blazor without using JS.

blazor c#
1 Answers

This is an extremely basic implementation of an Image Stack - you would probably need to optimise it for high res images.

<h1>ImageStack</h1>

<div class="container-fluid">
    <div class="row">@img</div>
    <div class="row"><img src="@img" onmousewheel="@MouseWheel" /></div>
</div>

@functions
{

  int imgNumber = 0;
  string img => $"/images/explosion {imgNumber}.png";

  Task MouseWheel(UIWheelEventArgs args)
  {
      imgNumber += Math.Sign(args.DeltaY);
      if (imgNumber == 43) imgNumber = 0;
      if (imgNumber == -1) imgNumber = 42;
      return Task.CompletedTask;
  }
}

DeltaY returns a positive or negative number depending on the direction of movement of the mousewheel .

I'm working with a set of 43 images named "explosion N.png" where N ranges from 0 to 42.

The img tag has a binding "onmousewheel" to the method MouseWheel which simply increments or decrements the imgNumber (and keeps it within the range 0 to 42).

The img "src" is bound to the property "img" which builds a string pointing to the image file under wwwroot.

You would need to adjust that system to whatever method of storing your image locations you require.

user_26586970
Related