回答編集履歴

  `DragDelta`はクリックした位置からの差分なので、毎回足していくとどんどん伸びることになります。

  前回の`HorizontalChange`を引くか、クリックした時の`Width`を覚えておくかになると思います。

  そうなると`DragStarted`や`DragCompleted`の監視が必要になりそうです。

 

  そもそもとして左端の`Thumb`はいいですが、右のほうの`Thumb`はサイズが変わったことで移動してしまい`DragDelta`が大きく暴れてしまいます。

  `DragDelta`が使えないとなると、`Mouse.GetPosition(Application.Current.MainWindow).X`とかになるでしょうが「どうなの？」って気はします。

 

  もうすこし用途というかシナリオが分かればいい方法もありそうな気がしますが、かなり凝ったことをされているようなので説明しづらいでしょうね^^;

 

 

 

  ---

 

  追記

  一応それっぽくはなったのですが、非常に泥臭くなってしまいました^^;

  これはビヘイビアにするのが正攻法でしょうね（ViewModelでやる処理じゃないですね）

 

  **注意**

  * Prism.Coreだけ入れました

  * 構造は全部決め打ちです

  * 画像のサイズが同じという前提です（違うならサイズでなくてマージンで調整か？）

  * 縦線や半透明ピンクは確認用なので深い意味はないです

  * 画像も確認用なので特に意味はないです

 

 

  <Window

  x:Class="Questions276037.MainWindow"

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  Width="525"

  Height="350">

  <Window.Resources>

  <!-- 個々のアイテム -->

  <DataTemplate x:Key="itemTemplate">

  <Grid>

  <Image

  x:Name="image"

  HorizontalAlignment="Center"

  VerticalAlignment="Center"

  Source="{Binding Source}" />

  <Rectangle

  Width="{Binding Width}"

  Height="{Binding Height}"

  MinWidth="{Binding ActualWidth, ElementName=image}"

  MinHeight="{Binding ActualHeight, ElementName=image}"

  Fill="#4CFF0000"

  MouseDown="Rectangle_MouseDown"

  MouseMove="Rectangle_MouseMove"

  MouseUp="Rectangle_MouseUp" />

  </Grid>

  </DataTemplate>

 

  <!-- 目印用グリッド線 -->

  <VisualBrush

  x:Key="lineBrush"

  TileMode="Tile"

  Viewbox="0,0,25,25"

  ViewboxUnits="Absolute"

  Viewport="0,0,25,25"

  ViewportUnits="Absolute">

  <VisualBrush.Visual>

  <Path Data="M0,0L0,25" Stroke="Gray" />

  </VisualBrush.Visual>

  </VisualBrush>

  </Window.Resources>

 

  <ItemsControl ItemTemplate="{StaticResource itemTemplate}" ItemsSource="{Binding List}">

  <ItemsControl.Template>

  <ControlTemplate>

  <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">

  <ItemsPresenter />

  </ScrollViewer>

  </ControlTemplate>

  </ItemsControl.Template>

  <ItemsControl.ItemsPanel>

  <ItemsPanelTemplate>

  <StackPanel Background="{StaticResource lineBrush}" Orientation="Horizontal" />

  </ItemsPanelTemplate>

  </ItemsControl.ItemsPanel>

  </ItemsControl>

  </Window>

  ```

 

  using System;

  using System.Collections.ObjectModel;

  using System.Windows;

  using System.Windows.Controls;

  using System.Windows.Input;

  using System.Windows.Media;

  using System.Windows.Media.Imaging;

  using System.Windows.Shapes;

  using Prism.Mvvm;

 

  namespace Questions276037

  {

  public partial class MainWindow : Window

  {

  private readonly BitmapImage i1 = new BitmapImage(new Uri("https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail.jpg"));

  private readonly BitmapImage i2 = new BitmapImage(new Uri("https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/105091/d8tKNb7D_thumbnail.jpg"));

 

  public ObservableCollection<Item> List { get; } = new ObservableCollection<Item>();

 

  public MainWindow()

  {

  InitializeComponent();

 

  for(var i = 0; i < 5; i++)

  {

  List.Add(new Item() { Width = 95, Height = 95, Source = i1, });

  List.Add(new Item() { Width = 95, Height = 95, Source = i2, });

  }

  DataContext = this;

  }

 

  private Point oldPos;

  private bool dragging;

 

  private void Rectangle_MouseDown(object sender, MouseButtonEventArgs e)

  {

  dragging = true;

 

  var rectangle = sender as Rectangle;

  var newPos = Mouse.GetPosition(null);

  var deltaX = newPos.X - oldPos.X;

  oldPos = newPos;

 

  if(rectangle.Width + deltaX < rectangle.MinWidth) return; // 画像より小さくしない

 

  var contentPresenter = rectangle.FindAncestor<ContentPresenter>();

  var stackPanel = rectangle.FindAncestor<StackPanel>();

  var scrollViewer = rectangle.FindAncestor<ScrollViewer>();

  var itemsControl = rectangle.FindAncestor<ItemsControl>();

 

  foreach(Item item in itemsControl.Items)

  item.Width += deltaX;

 

  var offset = scrollViewer.TranslatePoint(new Point(), stackPanel); // StackPanelがScrollViewerからはみ出た長さ

  var index = itemsControl.ItemContainerGenerator.IndexFromContainer(contentPresenter);

  var total = (index + 1 - 0.5) * deltaX; // カーソル左側の伸びた分合計

 

  scrollViewer.ScrollToHorizontalOffset(offset.X + total); // スクロールバー調整

  }

 

  private void Rectangle_MouseUp(object sender, MouseButtonEventArgs e)

  {

  dragging = false;

  var rectangle = sender as Rectangle;

  rectangle.ReleaseMouseCapture();

  oldPos = new Point();

  }

  }

 

  public class Item : BindableBase

  {

  private double _width = 0;

  private double _height = 0;

  public double Width { get => _width; set => SetProperty(ref _width, value); }

  public double Height { get => _height; set => SetProperty(ref _height, value); }

  public BitmapImage Source { get; set; }

  }

 

  internal static class DependencyObjectExtensions

  {

  public static T FindAncestor<T>(this DependencyObject obj) where T : DependencyObject

  {

  do

  {

  obj = VisualTreeHelper.GetParent(obj);

  if(obj == null) return null;

  } while(!(obj is T));

 

  return obj as T;

  }

  }

  }

  ```