午後わてんのブログ

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

WPFはスゴイ級、次のPixtack紫陽花はWPFで作成

今まで作ったアプリは「Windowsフォームアプリ」って言うものだったらしい
らしいってのは、あんまり気にしてなかったからなんだけど
最近知っておっこれいいじゃん!ってなったのが「WPFアプリ」
言語はVisual Basicも使えるので
Windowsフォーム+Visual Basic(今まで)
WPFVisual Basic(最近知った)
ってことなのかな、同じWindows用アプリの作り方にも色いろあるんだなあと
 

WPFがスゴイのは

半透明の処理を自動で行ってくれる!
Windowsフォームは手動だったので、めんどくさいし処理に時間がかかるしメモリも大量に消費で大変
WPFだとこれが自動!メモリ消費も普通に画像表示しているときと変わらないくらい少ない

半透明の色で塗ったRectangleを重ねて表示したところ
イメージ 1
WPFだとこんなふうに自動で半透明処理して表示してくれる!
 
そんなWPFアプリ作成はWindowsフォームアプリを作るのに使っていた
Visual Studio Community 2015
これでできるしVisual Basicも使える

Visual Studioのアプリの新規作成の画面で
f:id:gogowaten:20191024152942p:plain
これが今までのWindowsフォームアプリの新規作成
その下にあるのが

f:id:gogowaten:20191024153333p:plain

WPFアプリ
すっごい近くにあったw
WPFアプリって言われてもWindows用のアプリが作れるなんて気づかないよw
Windows Presentation Foundationの頭文字でWPF
登場は約10年前と結構昔からあったんだなあ
 
デザイン画面とXAML

f:id:gogowaten:20191024153345p:plain

Windowsフォームアプリのデザイン画面に似ている
XAML(ザムル)って言う言語?で記述していく
StackPanelにボタンを4つ並べたところ
 

f:id:gogowaten:20191024153357p:plain

ツールボックスもあってここからコントロールを追加できるのも
Windowsフォームアプリにそっくり
 
プロパティ

f:id:gogowaten:20191024153408p:plain

プロパティの画面もあってここからコントロール
背景色の指定やイベントの指定もできる、これもそっくり
 
プログラム書くところ

f:id:gogowaten:20191024153419p:plain

さっきのXAMLの画面でF7キー押すと表示される画面
ここにプログラムコードを書いていく
Visual Basicで書けるけど
Windowsフォームアプリとはやっぱり違う
Visual BasicWPFのコントロールを動かすってことなのかなあ
 
半透明■Rectangleを表示してみる

f:id:gogowaten:20191024153429p:plain

デザイン画面とXAML
半透明の赤の■Rectangleの記述は
<Rectangle Fill="Red" Opacity="0.5" Width="100" Height="100" Canvas.Top="10" Canvas.Left="20"/>
Fillが塗る色、Opacityが透明度、あとは大きさと位置の指定だけ
これだけで半透明の処理をしてくれる
Windowsフォームアプリのコントロールのプロパティにも透明度を指定する
OpacityやTransparentがあったけど自分自身に対しての透明度だったので
他のコントロールと重なっても半透明にはならなかった
 
デザイン画面
イメージ 9
半透明の紫のRectangleを15度回転させる記述
 
<Rectangle Fill="Purple" Opacity="0.5" Width="100" Height="100" Canvas.Top="50" Canvas.Left="50" RenderTransformOrigin="0.5,0.5">
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="15"/>
                </Rectangle.RenderTransform>
            </Rectangle>
こういう回転して表示するのもたったこれだけでできる

プロパティ画面を使って回転

f:id:gogowaten:20191024153441p:plain

 

赤の■Rectangleを選択してプロパティ画面の変換のAngleを10にしたところ
XAMLには自動で記述されてデザイン画面にも反映される
これならよくわからんRenderTransformとかの英語を覚えていなくても楽にできる


Pixtack紫陽花を作り直したくていろいろ調べていたらWPFってのがいいらしい
ってことで試しに半透明のコントロールを重ねてみたら…
自動で半透明処理してくれた、スゴイ!ってなって
この1ヶ月くらいずーっとWPFだった
次のPixtack紫陽花はWPFで作るって決めた

 

2019/10/24追記

なお次期Pixtack紫陽花は3年経っても完成していない模様

欲張りすぎたのが主な原因

追記ここまで