SilverLight

Canvas と Grid の違い

片桐　継（Tugu Katagiri） — Sun, 27 Jun 2010 15:10:00 GMT

GridでできることはGridで
http://blogs.wankuma.com/naka/archive/2010/06/27/190644.aspx

のお話なんだけれど、単純な話、Gridでできることってなんなん？と思ったのね。

色々と思考錯誤の結果の結論としては、

PowerPoint と　Excel　の違いだと思った。

Canvasは、子要素を座標指定で配置できる

Gridは、格子で仕切った中に子要素を配置して、全体が決まる。

画像の拡大縮小とか、こう、子要素に対して、

あんなことやこんなことをしたいって時や

ウインドウのサイズ変更とかある場合には、

Gridを使って、サイズの変更や配置の最適化を任せてしまうのが

きっと良いのだと思う。

そういうこともなくて、単純な表示だけで

機能の拡張もないのなら、Canvasできっと十分。

今回の私の作りたいWPFは、Canvasで十分だけどねｗ

はじめて、WPFってのを真面目に作った

片桐　継（Tugu Katagiri） — Sun, 27 Jun 2010 12:38:00 GMT

いや、作らなきゃなーなんて思ってて、作らなきゃならないことにはならなかったから手つかず。

でも諸事情でWPFいるなーっとなったので、作ってみることにした。

最初はお約束でXAMLからだよね。＜何か間違ってるかもしれないｗ

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="はじめてなのよ" AllowsTransparency="True"
    WindowStyle="None" Background="Transparent" Width="300" Topmost="True">
    <Grid>
        <Label Margin="12,12,12,20" Name="Scripting"
           FontSize="30" Width="254" HorizontalAlignment="Center"
           VerticalAlignment="Center" Panel.ZIndex="1"
           Height="48">ほげー</Label>
        <Image Name="Prompt" Stretch="None"
           Source="C:\work\test\prompt.png" VerticalAlignment="top"
           Width="278" Height="79" />
        <Image Name="DispImage" Stretch="None"  />
    </Grid>
</Window>

やりたかったことは、Scriptingと、Promptは重なった状態で、その下にDispImageを表示したかったの。

でも、<Grid>使うと、XAMLデザイン画面では重なっているのに、実行すると重ならないの。

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="はじめてなのよ" AllowsTransparency="True"
    WindowStyle="None" Background="Transparent" Width="300" Topmost="True">
    <Canvas>
        <Label Margin="12,12,12,20" Name="Scripting"
           FontSize="30" Width="254" HorizontalAlignment="Center"
           VerticalAlignment="Center" Panel.ZIndex="1"
           Height="48">ほげー</Label>
        <Image Name="Prompt" Stretch="None"
           Source="C:\work\test\prompt.png" VerticalAlignment="top"
           Width="278" Height="79" />
        <Image Name="DispImage" Stretch="None" Canvas.Left="0" Canvas.Top="80" />
    </Canvas>
</Window>

<Grid>を<Canvas>に変えたら、重なった。

新規XAMLでいきなり<Grid>って書いてるから、書き変えちゃいけないのかしら？とか思うじゃないかｗ

目的一つ達成。

慣れてくると、面白いね、WPFって。

MVVMやってて行きついた一つの答えをメモしてみた

片桐　継（Tugu Katagiri） — Sat, 06 Feb 2010 11:33:00 GMT

Under17の「こたえ」もAngelaの「未来という名の答え」も好きな曲。

MVVMってものを色々と、作りながらあーでもないこーでもないと悩んでいたのだけれど、結局は「これでいいんじゃね？」と行きついた一つの答えというか、そんな結論をまとめてみたのでメモしておく。

図にまとめるとこんな感じ。上から行くと、

View部分

Viewクラスが一つ。ここが画面。ユーザーにみえる所。モノはFormだったり、aspxページだったり、Silverlightコンテンツだったりするけど、もちろん、ルックス重視で外面の良いタイプが適任。コントロールが配置されたり、表示されたりでイベントも発生させるし、イベントドリブンの簡単なコードはあるけれど、それ以外のことは全部ViewModelに丸投げｗ。

ViewModel部分

ViewModelクラス

外面だけ良い八方美人のViewを支える縁の下の力持ち、というか、パートナー、というか、執事。Viewとは１：１の関係で、Viewで発する色々なイベント処理やデータ処理の実体実働はここ。場合によっては複数のModelをコントロールしなくちゃだから、やることはたくさん。といっても、細かな処理についてはModelにさせてしまうので「あれしろ」「これしろ」とメソッド呼び出しするのがお仕事。何も考えていないViewModelのために「何を表示するのか」を定義したViewRecordも管理してくれていたりと、致せり尽くせり。

ViewRecordクラス

View部分に配置されるGridViewやDetailView用に作成する自己完結したクラス。各要素をプロパティで公開して、必要であればチェックメソッド何かを持っていたりする。ViewModelに属しているようでいてViewにも媚びている板挟みの立場ｗ

Model部分

ここはModelクラス－DataControlクラス－DataSourceクラスのトリオ。３兄弟か姉妹かグループなのかは判んないけどね。ModelとDataControlは、List （of DataRecord）というクラスを共有してうまく仕事を連携できるようにしてる。DataSourceはデータの内容そのものには何も関係してないから、気にしてないけどｗ

Modelクラス

ViewModelクラスとのやりとりを一気に引き受ける窓口で交渉人。実質のリーダーというか一番上。正体はDataControlのラッパークラスで、メソッドを公開して命令を受けて、連番処理とかキー付与とかそういう小細工が必要ならしてくれるけど、大体においてはその命令をそのまますぐ下のDataControlに丸投げｗ

DataControlクラス

Modelクラスから受けたメソッドを真面目にこつこつと処理する。List (of DataRecord)を持ち、データ処理の中心部分。真ん中はつらいよね。

DataSourceクラス

データ接続やロード処理だけを引き受けるクラス。データベースであれば接続切断やSQLの実行、ファイルであれば読み込みや書き込みをする。ModelクラスとDataControlクラスが「どこの」データを処理しているのか全く意識しなくて済んでいるのは実はこのクラスのおかげ。無関心を装って実は要？

DataRecordクラス

データベースであればテーブルと、ファイルであればファイルレコードと、それぞれ一致したデータ要素を持つクラス。要素はプロパティで公開。Modelが一緒に外部に公開しているけれども、実体はDataControlと密接な関係に……ってそれなんてトライアングラーｗ　Modelクラスとのやり取りがある、さらにその上のViewModelクラスからも見守られていたりするヒロイン属性ｗ

いじょ。

時間とパワーがあれば、サンプルコードも書いてみたいんだけどな。

つか、擬人化してるのは、きっと気のせいｗ

SliverLight Business Application Project を開けてみた

片桐　継（Tugu Katagiri） — Fri, 04 Dec 2009 19:47:00 GMT

Download details: Data-Driven RIA with Silverlight 3

を入れてみたので、早速、ちょっと、いじってみた。

選択できるプロジェクトが増えてる。とりあえず、

「SliverLight Business Application」を選択して、作ってみた

こ、こんなにたくさんっ！

実はモデルはMVC＋Helper＋Liblary(DLL)+Assets ＜ってそのまんまやんｗ

それぞれがどの役割なんだろう。MVVMとはまた随分違うよね。

ドキュメントは、WCF RIA Services　にあって、

Walkthrough: Using the Silverlight Business Application Template

を読んでみた。ま、とりあえずはビルド実行してみる？　ってわけで何もせずに、F5

すると、

たしかに、こういうのが出てきた！でもって、右端の「Login」をクリックすると

うっひょー、ログイン画面出てきた！すげー、何もコード書いてないのに、もうできてる！

テンプレートってすごい！

でもって、左下の「Register Now」をクリックしてみた。

ダイアログ、回転！！！！！　なにこれ！おもしろいっ！

登録画面、出ましたー。何もコード書いてな（ｒｙ

ここまでで、もうかなりお腹一杯ｗ　さて、とりあえず、画面の日本語化してみようかなｗ

いろいろといじって楽しめそうです。

俺の屍を越えて行け！＜へんじがない

片桐　継（Tugu Katagiri） — Fri, 04 Dec 2009 18:30:00 GMT

森さんのところでもご紹介のあった

WCF RIA Services Beta for Visual Studio 2008 SP1

せっかくだから、俺はこのツールをインストールするぜ！って人は

Silverlight 3 Tools

を忘れずに入れておきましょう

「SliverLight3 Tools が入ってない！、インストールしないからね！」と

インストーラに叱られますｗ

べ、別に、私がそうなっちゃったからとか、そういうんじゃないんだからねっ！

くるみの脳みそでテンプレっぽいものをかじってみる～MVVMモデルパターン　その４～

片桐　継（Tugu Katagiri） — Thu, 10 Sep 2009 14:14:00 GMT

さて、VisualStudio2008 に SliverLight3 Tool kit いれて、VB.NetでMVVMモデルパターンのプログラムを作ってみるですよ

作るアプリケーションのクラスイメージモドキっぽいものはこちら

くるみの脳みそでテンプレっぽいものをかじってみる～MVVMモデルパターン　その３～

まずは、新規プロジェクトを選択。

SliverLightプロジェクトテンプレートがあるので、これをクリックして、新規作成。

まぁ、これは、そのまま、「OK」。さて、テンプレできたんで、ここに、モノを入れていってみるですよ。順序は、MODEL　→　VIEWMODEL　→　VIEW　→　MainPage。と絵の右から左、そこから上にいくカンジで。

MODELクラスの作成

まずは「HelloWorld」クラスをつくる。くるみの脳みそはファイルがすぐにゴチャゴチャになるのでフォルダに分けてみた。

プロジェクトに「Model」フォルダを作って、その中に「VBクラス」を一つ作成、名前を「HelloWorld」

INotifyPropertyChanged ってものが大事らしく、これをインターフェイスとして実装させておく。インテリセンスって便利で、INotifyPropertyChanged ってフツーに打ちこむとエラーになって、「System.ComponentModel を Import しとけ」と叱られるので素直に言う事を聞いておくと楽かも。

すると、Public Event PropertyChanged っていうのも勝手に出てくるので、これもそのまま。このイベントは、このクラスが持つことになるアイテムが「変更されたよー」ってことを通知するためのものなの

このクラスで、外部とやり取りしたいのは、HelloText。なので、これをプロパティで公開。変更された時には「変更されたよー」通知をしてあげたいので、イベントが発生するようにロジックを仕込んでおく。

ここでいったん、リビルド。

VIEWMODELクラスの作成

同じようにプロジェクトに「ViewModel」フォルダを作って、その中に「VBクラス」を一つ作成、名前を「HelloWorldViewModel」

イメージとしては、たくさんのHelloを並べてみたいなぁ、ということで、HelloWorldクラスを並べて一つのデータの塊としてていきょうできる ObservableCollection クラスってものを使ってみることにした。はじめListにしてたんだけど、うまくいかなくてorz

で、調べてて、ListクラスにINotify系インターフェイスがくっついてるこのクラスを使うといいらしいと知ったのね。

ObservableCollection ジェネリッククラス (System.Collections.ObjectModel)

まぁ使い方はListクラスと一緒だから、そこのロジックは大丈夫。このクラスでは、「SayHello」というメソッドで、HelloTextsというたくさんの「こんにちは」が入ったList（ObservalbeCollection）を作成。

でもって、ここで、またリビルド。（いちいちやらないと安心できない、それが、くるみの脳ｗ）

VIEWクラスの作成

同じようにプロジェクトに「View」フォルダを作って、その中に「SliverLightユーザーコントロール」を一つ作成、

名前を「HelloWorldView」。

今度はxaml。テキストブロックを跳び箱みたいに積み上げるだけのコントロールをちまちまと書き入れ。絵にイメージしたとおり、表示したいTextBlockには DisplayText と名前を付けて、HelloText という要素から表示する内容を取ってきてね、と Binding ロジックを埋め込み。

このHelloText、が　HelloWorldクラスにも同じ名前であることが大事。違うと表示されないの。

でもって、やっぱり、ここでもリビルド。

MainPage.xamlとMainPage.xaml.vbの変更

で、最後に接着剤。まずは、xaml側。

すでにリビルドできているから、インテリセンスも出てくるし、少し楽。

まずは、xmlns:views=”clr-namespace:SliverLightApplication1” を追記。つか、xmlnsを選んでViewsすると出来ちゃうけど。それを入れた後で、Gridの中に<views:HelloWorldView x:name=”HWDataView”> を作成。x:nameってのは、これは「この名前で呼ばれますぅ」ということなので、好きにつけても大丈夫。ってこれも大部分はインテリセンス様が助けてくださるので大変ではなく。

これで、MainPage.xaml にHelloWorld表示準備はOK。まぁまだ皮だけだけど。

皮が出来たら、次は中身。これはVBコードでセット。

「はろーはろー！こんにちは！」ってわけではないですがｗ

MainPageが表示し終わったら、HelloWorldViewModelクラスを処理して、HelloTextsを生成、それをxamlにおいたコントロールのDataContextにセット。ここが大事な接着剤。

そして、これを、再度リビルド、そして実行！

ソリューションのテンプレートにあるASPサイトからSliverLightが呼ばれて、ブラウザに「こんにちは」が並びます。

最後に、VB4脳のつなたいソースですが、よろしければ、こちらからどぞ。

Expression Blend3 評価版が日本語になってた

片桐　継（Tugu Katagiri） — Thu, 10 Sep 2009 11:49:00 GMT

再度、Hyper-V上で開発環境を作りなおしたのだけれど、ついでにと思って、Blend3をとりに行ったら

評価版 | MicrosoftR ExpressionR

評価版が来てましたｗ

Blendはこちら

ダウンロードの詳細 : Expression Blend 3 + SketchFlow 試用版

インストールから60日間、使えるまする。

くるみの脳みそでテンプレっぽいものをかじってみる～MVVMモデルパターン　その３～

片桐　継（Tugu Katagiri） — Wed, 09 Sep 2009 15:37:00 GMT

さて、そろそろ、ちょっと、前に進んでみる。

最終目的はSilverLight3でVBでなんか作ってみたい、それもMVVMで、ってところまでまとまってきたのでここで脳内を整理。

必要なものは

MainPage.xaml
ユーザーコントロールxaml(Viewクラス)
View用のModelViewクラス
本体とかデータとかのクラス

なんじゃないかなぁと何となく思ってきた。そこで、お約束、HelloWorldで置き換えて考えてみると

MainPage.xaml
HelloWorldView.xaml(HelloWorldViewクラス)
HelloWorldViewModelクラス
HelloWorldクラス

こんな風になると思うの。これを、HelloWorld、を表示するためのTextBlockでHelloText　って名前で使うこととして

図にしてみたらこうかなぁ。いろいろとツッコミどころはありそうだけど、脳内のイメージはこんな感じ。

実際に、これで、VisualStudio2008＋SilverLight3ToolKitを使って、いろんなHelloWorldを表示するSilverLightアプリをVBでつくってみようと思う。

AAGにさまようことだってある

片桐　継（Tugu Katagiri） — Fri, 04 Sep 2009 14:31:00 GMT

MVVMパターンについて勉強していて、たまに脱線する。

「Application Architecture Guide 2.0」とか

http://apparchguide.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=24681

あ、日本語が良い人は解説がここに

http://www.atmarkit.co.jp/fdotnet/apparcguide/index/index.html

今更感なきにしもあらずなんだけど、やっぱり、読んでないなら読んどけ、とちょっと思うｗ

そして、次のサンプルに着手

Code for "Model-View-ViewModel In Silverlight 2 Apps"

もちろん、C#もVBもあるでよｗ

こっちの接着剤はまた違った方法だったので、こっちもしっかり読みとらねばね

くるみの脳みそでテンプレっぽいものをかじってみる。～MVVMモデルパターン　その２～

片桐　継（Tugu Katagiri） — Thu, 03 Sep 2009 16:22:00 GMT

前回はこちら

http://blogs.wankuma.com/esten/archive/2009/09/03/180810.aspx

さて、サンプルコードのプロジェクトを読んでいての素朴な疑問。

CustomerView.xaml と CustomerViewModel はどうやってつながるんだろう。

ちょこっと普段は覗かない「クラスビュー」なるものを見てみると、「！」なものが

CustomerView.xamlの中のTextBoxオブジェクトの名前が、CustomerViewクラスの中にいるのを発見。

属性はTextBoxで、

オブジェクトブラウザでも確認できた。xamlのFirstNameTxtという名前のところをもう少し見てみると、このTextBoxにはPorpertyChangedというイベントトリガとFirstNameというPathで準備されていることがわかる。そこでそれをキーワードに、さらに探すと、CustomerViewModel.vbの中に、

というのを発見。やはり、CustomerView.xamlとCustomerViewModel.vbには関係があるのだろう。

さらにキーワード、CustomerViewModelで検索してみると、MainWindowResources.xamlにこれを発見。

おー、これが、もしかして、接着剤の部分？　「これ、CustomerViewをCustomerViewModelクラスのインスタンスにくっつけちゃうテンプレな！」とコメントにあるとおり。

で、脳内がこうなった。

これが、最初の図でどーなってるんだろうと思った矢印の部分の中身だったわけね。ちょっとすっきりした。

SilverLight

Canvas と Grid の違い

はじめて、WPFってのを真面目に作った

MVVMやってて行きついた一つの答えをメモしてみた

View部分

ViewModel部分

ViewModelクラス

ViewRecordクラス

Model部分

Modelクラス

DataControlクラス

DataSourceクラス

DataRecordクラス

SliverLight Business Application Project を開けてみた

俺の屍を越えて行け！＜へんじがない

くるみの脳みそでテンプレっぽいものをかじってみる～MVVMモデルパターン その４～

MODELクラスの作成

VIEWMODELクラスの作成

VIEWクラスの作成

MainPage.xamlとMainPage.xaml.vbの変更

Expression Blend3 評価版が日本語になってた

くるみの脳みそでテンプレっぽいものをかじってみる～MVVMモデルパターン その３～

AAGにさまようことだってある

くるみの脳みそでテンプレっぽいものをかじってみる。～MVVMモデルパターン その２～

くるみの脳みそでテンプレっぽいものをかじってみる～MVVMモデルパターン　その４～

くるみの脳みそでテンプレっぽいものをかじってみる～MVVMモデルパターン　その３～

くるみの脳みそでテンプレっぽいものをかじってみる。～MVVMモデルパターン　その２～