前々回からの続き

WPF、自動サイズCanvasをGroupThumbに使ってみた - 午後わてんのブログ gogowaten.hatenablog.com

今回の結果

子要素の移動後には親要素の位置が変更(修正)する処理を追加したので違和感がなくなっている
この位置変更処理が必要になるのは、子要素が親要素の左側と上側の範囲外(マイナス座標)になったときで、今回はこの処理を子要素の移動後に行っている

テストアプリのコード

2024WPF/20241212_ReLayoutGroupThumb at master · gogowaten/2024WPF

github.com

環境

作成と動作環境
Windows 10 Home バージョン 22H2
Visual Studio Community 2022 Version 17.12.3
WPF
C#
.NET 8.0

ExCanvas.cs

using System.Windows.Controls;
using System.Windows;

namespace _20241212_ReLayoutGroupThumb
{
    /// <summary>
    /// 子要素に合わせてサイズが変化するCanvas
    /// ただし、子要素のマージンとパディングは考慮していないし
    /// ArrangeOverrideを理解していないので不具合があるかも
    /// </summary>
    public class ExCanvas : Canvas
    {
        protected override Size ArrangeOverride(Size arrangeSize)
        {
            if (double.IsNaN(Width) && double.IsNaN(Height))
            {
                base.ArrangeOverride(arrangeSize);
                Size resultSize = new();
                foreach (var item in Children.OfType<FrameworkElement>())
                {
                    double x = GetLeft(item) + item.ActualWidth;
                    double y = GetTop(item) + item.ActualHeight;
                    if (resultSize.Width < x) resultSize.Width = x;
                    if (resultSize.Height < y) resultSize.Height = y;
                }
                return resultSize;
            }
            else
            {
                return base.ArrangeOverride(arrangeSize);
            }
        }
    }
}

子要素に応じでサイズ調整するCanvasは前々回からのコピペ

CustomControl1.sc

using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Data;
using System.Windows.Markup;
using System.Windows.Media;
using System.Collections.Specialized;

namespace _20241212_ReLayoutGroupThumb
{


    /// <summary>
    /// 基礎Thumb、すべてのCustomControlThumbの派生元
    /// </summary>
    public abstract class KisoThumb : Thumb
    {
        #region 依存関係プロパティ

        public double MyLeft
        {
            get { return (double)GetValue(MyLeftProperty); }
            set { SetValue(MyLeftProperty, value); }
        }
        public static readonly DependencyProperty MyLeftProperty =
            DependencyProperty.Register(nameof(MyLeft), typeof(double), typeof(KisoThumb), new PropertyMetadata(0.0));

        public double MyTop
        {
            get { return (double)GetValue(MyTopProperty); }
            set { SetValue(MyTopProperty, value); }
        }
        public static readonly DependencyProperty MyTopProperty =
            DependencyProperty.Register(nameof(MyTop), typeof(double), typeof(KisoThumb), new PropertyMetadata(0.0));

        public string MyText
        {
            get { return (string)GetValue(MyTextProperty); }
            set { SetValue(MyTextProperty, value); }
        }
        public static readonly DependencyProperty MyTextProperty =
            DependencyProperty.Register(nameof(MyText), typeof(string), typeof(KisoThumb), new PropertyMetadata(string.Empty));

        #endregion 依存関係プロパティ

        //親要素の識別用。自身がグループ化されたときに親要素のGroupThumbを入れておく
        public GroupThumb? MyParentThumb { get; internal set; }
        static KisoThumb()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(KisoThumb), new FrameworkPropertyMetadata(typeof(KisoThumb)));
        }
        public KisoThumb()
        {
            DataContext = this;
            Focusable = true;
        }
    }

    public class TextBlockThumb : KisoThumb
    {
        static TextBlockThumb()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(TextBlockThumb), new FrameworkPropertyMetadata(typeof(TextBlockThumb)));
        }

    }

    public class EllipseTextThumb : TextBlockThumb
    {
        #region 依存関係プロパティ

        public double MySize
        {
            get { return (double)GetValue(MySizeProperty); }
            set { SetValue(MySizeProperty, value); }
        }
        public static readonly DependencyProperty MySizeProperty =
            DependencyProperty.Register(nameof(MySize), typeof(double), typeof(EllipseTextThumb), new PropertyMetadata(30.0));
        #endregion 依存関係プロパティ

        static EllipseTextThumb()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(EllipseTextThumb), new FrameworkPropertyMetadata(typeof(EllipseTextThumb)));
        }

    }

    [ContentProperty(nameof(MyThumbs))]
    public class GroupThumb : KisoThumb
    {
        #region 依存関係プロパティ

        public ObservableCollection<KisoThumb> MyThumbs
        {
            get { return (ObservableCollection<KisoThumb>)GetValue(MyThumbsProperty); }
            set { SetValue(MyThumbsProperty, value); }
        }
        public static readonly DependencyProperty MyThumbsProperty =
            DependencyProperty.Register(nameof(MyThumbs), typeof(ObservableCollection<KisoThumb>), typeof(GroupThumb), new PropertyMetadata(null));

        #endregion 依存関係プロパティ

        #region コンストラクタ

        static GroupThumb()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(GroupThumb), new FrameworkPropertyMetadata(typeof(GroupThumb)));
        }
        public GroupThumb()
        {
            MyThumbs = [];
            Loaded += GroupThumb_Loaded;
            MyThumbs.CollectionChanged += MyThumbs_CollectionChanged;
            FrameworkPropertyMetadata newmeta = new(typeof(GroupThumb));


        }

        #endregion コンストラクタ

        #region 初期化

        private void GroupThumb_Loaded(object sender, RoutedEventArgs e)
        {
            var temp = GetTemplateChild("PART_ItemsControl");
            if (temp is ItemsControl ic)
            {
                var ec = GetExCanvas(ic);
                if (ec != null)
                {
                    _ = SetBinding(WidthProperty, new Binding() { Source = ec, Path = new PropertyPath(ActualWidthProperty) });
                    _ = SetBinding(HeightProperty, new Binding() { Source = ec, Path = new PropertyPath(ActualHeightProperty) });
                }
            }
        }


        //子要素を辿ってExCanvasを取り出す
        private static ExCanvas? GetExCanvas(DependencyObject d)
        {
            if (d is ExCanvas canvas) return canvas;
            for (int i = 0; i < VisualTreeHelper.GetChildrenCount(d); i++)
            {
                ExCanvas? c = GetExCanvas(VisualTreeHelper.GetChild(d, i));
                if (c is not null) return c;
            }
            return null;
        }


        private void MyThumbs_CollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
        {
            if (e.Action == NotifyCollectionChangedAction.Add && e.NewItems?[0] is KisoThumb nnt)
            {
                nnt.MyParentThumb = this;
            }
            else if (e.Action == NotifyCollectionChangedAction.Remove && e.OldItems?[0] is KisoThumb ot)
            {
                ot.MyParentThumb = null;
            }
        }
        #endregion 初期化

        /// <summary>
        /// 再配置、子要素の座標を元に位置を修正する
        /// </summary>
        public void ReLayout()
        {
            //すべての子要素で最も左上の座標を取得
            double left = double.MaxValue; double top = double.MaxValue;
            foreach (var item in MyThumbs)
            {
                if (left > item.MyLeft) { left = item.MyLeft; }
                if (top > item.MyTop) { top = item.MyTop; }
            }

            //自身の座標と比較、同じ(変化なし)なら終了
            if (left == MyLeft && top == MyTop) return;

            //座標変化の場合は、自身と全ての子要素の座標を変更する
            if (left != 0)
            {
                foreach (var item in MyThumbs) { item.MyLeft -= left; }
                MyLeft += left;
            }
            if (top != 0)
            {
                foreach (var item in MyThumbs) { item.MyTop -= top; }
                MyTop += top;
            }

            //ParentThumbにも伝播させる
            MyParentThumb?.ReLayout();
        }

        /// <summary>
        /// ReLayoutの左上座標取得をRectのUnion版、いまいち
        /// </summary>
        public void ReLayout2()
        {
            //子要素すべてが収まる範囲Rectを計算
            KisoThumb tt = MyThumbs[0];
            Rect uRect = new(tt.MyLeft, tt.MyTop, tt.ActualWidth, tt.ActualHeight);
            foreach (var item in MyThumbs)
            {
                Rect r = new(item.MyLeft, item.MyTop, item.ActualWidth, item.ActualHeight);
                uRect.Union(r);
            }

            //今の範囲Rectと比較、座標変化なしなら終了
            if (uRect.Left == MyLeft && uRect.Top == MyTop) return;

            //座標変化の場合は、自身と全ての子要素の座標を変更する
            if (uRect.Left != 0)
            {
                foreach (var item in MyThumbs) { item.MyLeft -= uRect.Left; }
                MyLeft += uRect.Left;
            }
            if (uRect.Top != 0)
            {
                foreach (var item in MyThumbs) { item.MyTop -= uRect.Top; }
                MyTop += uRect.Top;
            }

            //ParentThumbにも伝播させる
            MyParentThumb?.ReLayout2();
        }

    }

}

Thumbを継承したカスタムコントロール群は前回からのコピペ改変

親要素の位置変更処理

これを実行するのは親要素だけど、そのきっかけは子要素にあるので、子要素は親要素を知っている必要がある。ってことで親要素を入れておくプロパティを用意、MyParentThumbって名前にした、194行目とかにあるもの
これで位置変更があったら、更に親の親と遡って処理することもできる

MyParentThumbに親要素をいれるタイミング
親要素が子要素を管理しているプロパティはMyThumbs、これはCollection型なので要素変更時に動くCollectionChangedっていうイベントがあるのでそこで行うようにした

子要素追加時に自身を子要素のMyParentThumbに登録、これは必須。削除時にMyParentThumbをnullにしているけど、必要ないかも

Generic.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:_20241212_ReLayoutGroupThumb">



  <Style x:Key="kiso" TargetType="{x:Type local:KisoThumb}">
    <Setter Property="Canvas.Left" Value="{Binding MyLeft}"/>
    <Setter Property="Canvas.Top" Value="{Binding MyTop}"/>
  </Style>


  <Style TargetType="{x:Type local:TextBlockThumb}"
         BasedOn="{StaticResource kiso}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate>
          <TextBlock Text="{Binding MyText}"
                     Background="{TemplateBinding Background}"/>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>


  <Style TargetType="{x:Type local:EllipseTextThumb}"
         BasedOn="{StaticResource kiso}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate>
          <Grid>
            <Ellipse Width="{Binding MySize}"
                     Height="{Binding MySize}"
                     Fill="{TemplateBinding Background}"/>
            <TextBlock Text="{Binding MyText}"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center"/>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>


  <Style TargetType="{x:Type local:GroupThumb}"
         BasedOn="{StaticResource kiso}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate>
          <ItemsControl x:Name="PART_ItemsControl"
                        ItemsSource="{Binding MyThumbs}"
                        Background="{TemplateBinding Background}">
            <ItemsControl.ItemsPanel>
              <ItemsPanelTemplate>
                <local:ExCanvas/>
              </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <!--<ItemsControl.ItemContainerStyle>
              <Style TargetType="Thumb">
                <Setter Property="Canvas.Left" Value="{Binding MyLeft}"/>
                <Setter Property="Canvas.Top" Value="{Binding MyTop}"/>
              </Style>
            </ItemsControl.ItemContainerStyle>-->
          </ItemsControl>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>


</ResourceDictionary>

カスタムコントロール用
前回にも使ったBasedOnが活躍している
子要素を持つことができるGroupThumbの部分は以前の
WPF、ItemsControlを使って要素を入れ子にできるカスタムコントロールThumb、グループ化みたいなもの - 午後わてんのブログ

gogowaten.hatenablog.com
ここからのコピペ改変
今回は子要素を並べるPanelには自動リサイズのExCanvasを使っているので、子要素の位置とサイズによってExCanvasのサイズが変化して、ExCanvasのサイズとGroupThumbのサイズをBindingしているのでGroupThumbのサイズも自動で変化する

コメントアウトになっているところ
子要素の位置プロパティをCanvasの添付プロパティのLeftとTopにBindingする必要があると思って書いたんだけど、無くても動いたのでコメントアウトした。これはたぶんKisoThumbのStyleでBindingしているのを、BasedOnで継承しているから？

MainWindow.xaml

<Window x:Class="_20241212_ReLayoutGroupThumb.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:_20241212_ReLayoutGroupThumb"
        mc:Ignorable="d"
               Title="MainWindow" Height="350" Width="500">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition/>
      <ColumnDefinition Width="140"/>
    </Grid.ColumnDefinitions>

    <Canvas>
      <Canvas.Resources>
        <Style TargetType="{x:Type local:KisoThumb}" x:Key="kiso">
          <EventSetter Event="DragCompleted" Handler="KisoThumb_DragCompleted"/>
          <EventSetter Event="DragDelta" Handler="Thumb_DragDelta"/>
        </Style>
        <Style TargetType="{x:Type local:TextBlockThumb}" BasedOn="{StaticResource kiso}"/>
        <Style TargetType="{x:Type local:EllipseTextThumb}" BasedOn="{StaticResource kiso}"/>
        <Style TargetType="{x:Type local:GroupThumb}" BasedOn="{StaticResource kiso}"/>
      </Canvas.Resources>

      <local:GroupThumb x:Name="MyRootGroup" Background="Lavender">
        <local:TextBlockThumb MyText="Group0-1" Background="LightSteelBlue"/>

        <local:GroupThumb x:Name="MyGroup1" MyLeft="20" MyTop="20" Background="Salmon">
          <local:TextBlockThumb x:Name="MyItem1_1" MyLeft="0" MyTop="0"
                                MyText="Group1-1" Background="LightSalmon"/>
          <local:EllipseTextThumb MyLeft="50" MyTop="50" MySize="60"
                                  MyText="Group1-2" Background="Gold"/>
        </local:GroupThumb>

        <local:GroupThumb x:Name="MyGroup2" MyLeft="100" MyTop="140" Background="Violet">
          <local:TextBlockThumb x:Name="MyItem2_1" MyLeft="0" MyTop="0"
                                MyText="Group2-1" Background="Pink"/>
          <local:EllipseTextThumb MyLeft="50" MyTop="30" MySize="60"
                                  MyText="Group2-2" Background="Gold"/>
        </local:GroupThumb>

      </local:GroupThumb>
    </Canvas>

    <StackPanel Grid.Column="1">
      <Button x:Name="MyButtonText" Content="Group1-1を左に100移動" Click="MyButtonText_Click"/>
      <GroupBox Header="Group0" Background="{Binding Background}" DataContext="{Binding ElementName=MyRootGroup}">
        <StackPanel>
          <TextBlock Text="{Binding Path=MyLeft, StringFormat={}{0:0.0} Left}"/>
          <TextBlock Text="{Binding Path=MyTop, StringFormat={}{0:0.0} Top}"/>
          <TextBlock Text="{Binding Path=ActualWidth, StringFormat={}{0:0.0} width}"/>
          <TextBlock Text="{Binding Path=ActualHeight, StringFormat={}{0:0.0} height}"/>
        </StackPanel>
      </GroupBox>
      <GroupBox Header="Group1" Background="{Binding Background}" DataContext="{Binding ElementName=MyGroup1}">
        <StackPanel>
          <TextBlock Text="{Binding Path=MyLeft, StringFormat={}{0:0.0} Left}"/>
          <TextBlock Text="{Binding Path=MyTop, StringFormat={}{0:0.0} Top}"/>
          <TextBlock Text="{Binding Path=ActualWidth, StringFormat={}{0:0.0} width}"/>
          <TextBlock Text="{Binding Path=ActualHeight, StringFormat={}{0:0.0} height}"/>
        </StackPanel>
      </GroupBox>
      <GroupBox Header="Group2" Background="{Binding Background}" DataContext="{Binding ElementName=MyGroup2}">
        <StackPanel>
          <TextBlock Text="{Binding Path=MyLeft, StringFormat={}{0:0.0} Left}"/>
          <TextBlock Text="{Binding Path=MyTop, StringFormat={}{0:0.0} Top}"/>
          <TextBlock Text="{Binding Path=ActualWidth, StringFormat={}{0:0.0} width}"/>
          <TextBlock Text="{Binding Path=ActualHeight, StringFormat={}{0:0.0} height}"/>
        </StackPanel>
      </GroupBox>
      
    </StackPanel>
  </Grid>
</Window>

後半のStackPanelの中身は、位置とサイズの確認用なので必要ない

MainWindow.xaml.cs

using System.Windows;
using System.Windows.Controls.Primitives;

namespace _20241212_ReLayoutGroupThumb
{
   public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Thumb_DragDelta(object sender, DragDeltaEventArgs e)
        {
            if (sender is KisoThumb t)
            {
                t.MyLeft += e.HorizontalChange;
                t.MyTop += e.VerticalChange;
                e.Handled = true;
            }
        }

        private void MyButtonText_Click(object sender, RoutedEventArgs e)
        {
            MyItem1_1.MyLeft -= 100;
            MyItem1_1.MyParentThumb?.ReLayout();
        }

        //ドラッグ移動終了時
        private void KisoThumb_DragCompleted(object sender, DragCompletedEventArgs e)
        {
            //親要素の再配置
            if (sender is KisoThumb t && t.MyParentThumb is not null)
            {
                t.MyParentThumb.ReLayout();
            }
            //イベントをここで停止
            e.Handled = true;
        }
    }
}

ドラッグ移動終了時イベントのKisoThumb_DragCompletedで、親要素の位置変更を実行している
ドラッグ移動しているのは子要素だけど、位置変更処理はその親要素なので、子要素は親要素を知っている必要があったのがここ、そのためのMyParentThumbだったわけ
今思ったけど親要素の型(クラス)は必ずGroupThumbなんだから、MyParentGroupって名前のほうが良かったかも

ボタンのクリックイベントMyButtonText_Click
ここでは子要素のの左位置の値を-100した後に、親要素位置の変更をしている