午後わてんのブログ

ベランダ菜園とWindows用アプリ作成(WPFとC#)

WPFとVB.NETでカラーピッカーその5、もっと色を登録できるようにした

VB.NET #ソフトウェア WPF

前回は3日前

gogowaten.hatenablog.com

の続き
WPFとVB.NETでカラーピッカーその4、パレットを作って色を登録できるようにした ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
http://blogs.yahoo.co.jp/gogowaten/14048893.html
 
レイアウト変更
登録できる□マスを増やした、120*10*10=12000箇所
 
 
イメージ 1
レイアウト

f:id:gogowaten:20191025124741p:plain

前回まで上に位置していたスライダーたちを色表示の右側に変更するために
Gridパネルを使って縦半分に仕切った
0列目に色表示の画像が詰まっているStackPanelを配置
1列目にHSVとARGBの各スライダーを配置
 
0列目の横幅はAutoに指定、1列目の横幅は0列目の残り全部
0列目の実際の横幅は起動時に設定することにした
イメージ 3
spp2が色表示の画像が詰まっているStackPanel
DesiredSize.WidthはMarginを含めた横幅
これが250以下なら250に指定、250以上ならそのまま

アプリ全体の横幅Widthの指定は
TabPaletteはパレットを配置しているTabControlのことで
これの幅＋spp2の幅＋20にした、+20はつじつま合わせみたいなもの適当

アプリ全体の縦幅は
SizeToContentプロパティにSizeToContent.Heightを指定
これで表示されているものがぴったりになる縦幅に自動で合わせてくれる

SV画像の大きさを100に指定して起動した場合
イメージ 4
 
SV画像の大きさを255に指定して起動した場合
イメージ 5
重ねて比べると
イメージ 6
こうしてみるとあまり大きさ変わらないなあ
 
 
パレットの部分は
TabControlにTabItemを配置
その中にWrapPanelを配置
その中に□マスになるBorderを配置
 
デザイン画面とXAMLではTabControlだけ配置している

f:id:gogowaten:20191025124758p:plain

TabControl x:Name="tabPalette" HorizontalAlignment="Left"
っていう1行だけ
のこりはVBのコードで配置して、その時に色データのデシリアライズとかもしている
 
色データの入れ物、グローバル変数
イメージ 8
今回のパレットは複数のページ(Item)になったので色データを入れておく変数の型を「リスト」から「リストのリスト」に変更、ややこしい
PaletteARGBからList(Of PaletteARGB)に変更
 
対になるマスのBorderを入れておくのが
Private PaletteBorderMainList As New List(Of List(Of Border))
こういうList(Of List(Of Border))っていうのもありなんだなあ

パレットの□マスにするBorderの作成、120個作る
sukimaは□と□の隙間の間隔、bdSizeは□の大きさ
イメージ 10
作った□120個をbListに入れて、それをPaletteBorderMainListに入れる
色データ120個はargbListに入れて、それをPaletteArgbMainListに入れる
このメソッドで前回と違うのはこれだけ
これはタブページの枚数分繰り返されることになる

全体のパレットになるTabControlにTabItemを配置してその中にWrapPanelを配置
イメージ 9
565行目がさっきの120個の□を追加するところ
 
TabControlの横幅決定もなんかイマイチでつじつま合わせみたいになった
横に12個□を並べた時にぴったりにしたかったので
(□の横幅と隙間の大きさ)*12
これでいい気がするんだけどこれだと足りないのでいろいろ足している
SystemParameters.BorderWidthはWindowsで設定されているアプリの枠の太さ
だと思う、Windows 10だと1
 
 
色データのシリアライズ
イメージ 11
コメントアウトになっているところは前回のもの
前回はバイナリ形式で保存していたけど今回はxml形式にした
それ以外はほとんど同じだけど
        Dim serializer As New Xml.Serialization.XmlSerializer(GetType(List(Of PaletteARGB)))
の型指定がややこしい
GetType(List(Of PaletteARGB)))
っていうところ
 
バイナリ形式をテキストエディタで開くと

f:id:gogowaten:20191025124816p:plain

こんな感じで意味不明
 
xml形式のものだと

f:id:gogowaten:20191025124825p:plain

読めるし、たぶんそのまま編集もできると思う
ファイルサイズは大きくなってしまうけど
たかが知れているのでこっちのほうが良さそうって事になった
 
イメージ 14
シリアライズと同じ感じの変更
 
 
右クリックメニューの動作
イメージ 15
ここは前回と同じかな、リストの名前が変わっているだけ
 
 
アプリ起動時に色データファイルをデシリアライズして取得した色データをパレットに流し込む処理
イメージ 16
今後バージョンアップでパレットの枚数を増やした時にエラーにならないようにしたけど、出番はないかなｗ
 
 
イメージ 17
横に広げた時はスライダーだけ広がって、それ以外の画像やパレットのサイズは変化なし
 
実行ファイルダウンロード先
 
ヤフーボックス
 
コード