■ はじめに
https://blogs.yahoo.co.jp/dk521123/37801875.htmlで、画像比較スライダーを扱ったが、今回は、Windows Formで実装する。 その際に、Splitter (仕切り線) を利用したので紹介する。
■ Splitter
* Windowsフォームを分割するためのもの
■ 主なイベント
SplitterMoving / SplitterMoved
* 境界線の動いている時と動いた後のイベント[[https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.forms.splittereventargs?view=netframework-4.7.2]]
MouseEnter / MouseHover / MouseLeave
* MouseEnter : マウスカーソルが乗った瞬間にイベントが発生 * MouseHover : マウスカーソルが一定時間以上動かなかった時のみ発生 * MouseLeave : マウスカーソルが離れたらイベントが発生
■ サンプル
* 特に、コーディングは不要。
コントロール構成
+ Panel (Name:panel1)
+ PictureBox (親にドッキング。比較画像１を設定)
+ Panel (Name:panel2, Dock:Left)
| + PictureBox (親にドッキング。比較画像２を設定)
+ Splitter (MinExtra:0, MinSize:0, Size.Width:5(任意：境界線の太さ))
PictureBox については、以下の関連記事を参照のこと https://blogs.yahoo.co.jp/dk521123/23504075.html
補足１：境界線の状態を保存したい場合
https://blogs.yahoo.co.jp/dk521123/37889424.htmlのように、アプリ状態を保存したい場合、 境界線の状態を保存するには「子Panelの幅・Width（上記の例の場合、panel2）」を保持しておけばいい ～～～～～～ // 境界線の状態を保存 Properties.Settings.Default.FormSplitterWidth = this.panel2.Width; Properties.Settings.Default.Save(); ～～～～～～
補足２：マウスムーブ時に変更を反映するには...
SplitterMovingイベントで「子Panelの幅・Width（上記の例の場合、panel2）」を変更するusing System; using System.Windows.Forms; namespace SampleForm { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void splitter1_SplitterMoving(object sender, SplitterEventArgs e) { // For Debug Console.WriteLine("e.X : " + e.X + " e.SplitX : " + e.SplitX); this.panel2.Width = e.SplitX; this.pictureBox1.Invalidate(); } private void splitter1_SplitterMoved(object sender, SplitterEventArgs e) { var splitter = sender as Splitter; splitter.Invalidate(); // For Debug Console.WriteLine("this.panel2.Width : " + this.panel2.Width); } } }
参考文献
https://www.ipentec.com/document/csharp-splitter-controlhttp://www.atmarkit.co.jp/fdotnet/dotnettips/276splitter/splitter.html
https://so-zou.jp/software/tech/programming/c-sharp/control/splitter/
