回答編集履歴

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

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

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

-

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

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

-

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

-

- ---

-

- 検証中はMVVMにこだわらずコードビハインドに書いていいと思います。

- 希望の動作になったら移せばいいので。

-

- 追記

- ---

-

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

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

-

- **注意**

- * Prism.Coreだけ入れました

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

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

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

- * Rectangleなのも特に意味はないです

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

-

- Width Heightのバインディングが必要ないなら、`ItemsControl`自体のドラッグで全ての`ContentPresenter`をリサイズするほうが簡単そうな気もします（位置補正まですると大差ないかもしれない）

-

- ```xaml

- <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>

- ```

-

- ```C#

- 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;

- rectangle.CaptureMouse();

- oldPos = Mouse.GetPosition(null);

- }

- private void Rectangle_MouseMove(object sender, MouseEventArgs e)

- {

- if(!dragging) return;

-

- 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;

- }

- }

- }

- ```