Quantcast
Channel: 午後わてんのブログ
Viewing all articles
Browse latest Browse all 420

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

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

WPFがスゴイのは
半透明の処理を自動で行ってくれる!

半透明の色で塗ったRectangleを重ねて表示したところ
イメージ 1
WPFだとこんなふうに自動で半透明処理して表示してくれる!

そんなWPFアプリ作成はWindowsフォームアプリを作るのに使っていた
Visual Studio Community 2015
これでできるしVisual Basicも使える

Visual Studioのアプリの新規作成の画面で
イメージ 2
これが今までのWindowsフォームアプリの新規作成
その下にあるのが
イメージ 3
WPFアプリ
すっごい近くにあったw
WPFアプリって言われてもWindows用のアプリが作れるなんて気づかないよw
Windows Presentation Foundationの頭文字でWPFで
登場は約10年前と結構昔からあったんだなあ

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

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

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

プログラム書くところ
イメージ 6
さっきのXAMLの画面でF7キー押すと表示される画面
ここにプログラムコードを書いていく
Visual Basicで書けるけど
Windowsフォームアプリとはやっぱり違う
Visual BasicでWPFのコントロールを動かすってことなのかなあ

半透明■Rectangleを表示してみる
イメージ 7
デザイン画面と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>
こういう回転して表示するのもたったこれだけでできる

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


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



Viewing all articles
Browse latest Browse all 420

Latest Images

Trending Articles