Enhancing the User Interface – Propertyパネルを理解する

皆様、こんばんは! さて、Expression Blendですけれども、起動直後の画面でどうしたらいいかわからないという方が結構いますね。そこで、Videoシリーズでも解説する予定ですが、まずは個々のウィンドウの基本的な内容の解説も必要でしょう。今回はプロパティパネルです。 プロパティパネルの構成 下記に主な名称を解説しておきます。これは押さえておいてください。 プロパティ検索フィールド プロパティパネルには、検索フィールドがあります。検索フィールドに、テキスト(例えばWidth等)をタイプすることにより、目的のプロパティを見つけ出すことができます。この検索はインクリメンタルに行われ、たとえば、Widthとタイプし始めると、検索結果の候補としては、MaxWidth、MinWidth、Widthだけが出てきます。 プロパティグループ これらは相互にグループ化されており、どこに何があるかがすぐにわかるようになっています。この図はRectangleコントロールのいくつかのグループを示したものです。これらのプロパティグループは、それぞれのグループ名の前にある小さな三角形をクリックすることで、自由に開閉することができます。 表1 プロパティの共通(Commonグループ) グループ 説明 Brushes このグループは、コントロールの色を決定するプロパティ、例えば、ForegroundやBackground等を含む Appearance このグループは、Visibility、Opacity、BorderThickness 等のプロパティを含む Layout このグループは、コントロールのポジションを決定するプロパティ、例えば、Width や Height 等を含む Common Tooltip、Text、Cursor 等のプロパティを含む Text Font、FontSize 等のプロパティを含む Transform ScalingやRotations 等、Transformationに適用可能なプロパティを含む Miscellaneous Style、Template 等のプロパティを含む(※これについては別途コントロールのスタイリング及びスキニングというブログエントリを後日記述予定) イベント/プロパティ切り替えトグルボタン プロパティパネルには、コントロールのプロパティの設定のみならず、イベントの設定もできるようになっています。その設定はこのトグルボタンで切り替えられます。 アドバンスドプロパティオプション プロパティパネルにあるプロパティの多くは、右側に小さな四角形があり、これをクリックすることで、アドバンスドプロパティオプションを設定できます。このアドバンスドプロパティオプションを設定することがもっとも多いのは、おそらくリセットでしょう。これにより各々のコントロールのプロパティ値はデフォルト値に戻ります。従って、当該コントロールのプロパティを削除できるわけです。例えば、Marginプロパティのリセットをすると、当該コントロールのXAMLからMargin属性を削除することができます。 以上です。このあたりは簡単かもしれませんが、まずは基本中の基本の確認ということで。 鈴木 章太郎

0

Enhancing the User Interface – シリーズ Start(^^;)!

皆様、こんにちは!年末も押し迫って参りましたが、いかがお過ごしでしょうか? 私は、22日の夕方からX’masを経て今まで完全にオフにしており、すっかりくつろいでいたのですが、新書籍の執筆をはじめ、やることが目白押しだったことに改めて気づいて愕然としています。 実は今日もお休みなのですが、Blogの更新は後年内に3回はやりたいと思っています(その他新しくBlogも某所で始める予定なのでそれも書かないといけません(^^;)ゞ)。という訳で、例年通りいろいろやることが多い年の瀬です。(まあ数年前の公共営業部門のアーキテクトの時ほどハードではありませんが…)。 さて、今回から数回、Enhancing the User Interfaceシリーズをお届けしていきたいと思います。これは、丁度いまExpressionのTutorial Video企画等が走っている関係もあり、是非この機会に、あくまで開発者視点でのExpression Blendの利用、ということを、整理してみようと思ったからです。 ※もちろんWCF RIA Services SP1やMVVMは最重要の私のテーマですので、今後も続行予定です。また新しいソリューションサンプルMVVM編等々、いろいろ書きたい&ご紹介したいことがあるのですが、ぐっと我慢してw・・・Silverlightはやっぱり技術的に幅広いです。.NETフレームワークのサブセットという成り立ちからして当然なのですが、そこが面白いと私は思っています。 一応、このシリーズで予定しているのは、下記のような内容です。 ・プロパティパネルを理解する ・ツールパネルでシェイプを描画してみる ・オブジェクトのディメンションを変更する ・色を選択して描写する ・オブジェクトにトランスフォーメーションを適用する ・ページ内でオーディオやビデオを利用する ・アニメーションの作成 とこんな感じで進めてみたいと思います。一部Videoでご紹介すること等と重複する点もあろうかと思いますが、そこは理解を深めて戴くためあえて気にせずw、進めたいと思っています。ぜひご期待ください。 それでは次回は早速(皆様にあまりご理解戴いていない)Blendのプロパティパネルの理解から、行ってみたいと思います。 取り急ぎご報告まで。 鈴木 章太郎

0

WCF RIA Services プロジェクトのWindows Azure への配置上の注意点とAzure Table Storageの利用例

皆様、こんにちは! だいぶご無沙汰してしまいまして申し訳ございません。先日のPDC Japan 10でのHTML5のセッションは、大変高いご評価を戴いたようで誠に有難うございます。今後も良いセッションをご提供できるよう、また最新かつ有益な情報を皆様にご提供できるよう努めていきたいと思います。今後ともよろしくお願いいたします。 さて本日は、久々にWCF RIA Services ネタをご紹介しておきますね。 これ本当は、夏のTech・Edのセッションでご紹介するつもりだったのですが、シナリオ上、Azure連携まで行いますと、時間が足りないため、泣く泣く?省略したものになります(まあ、元々かなりのボリュームでしたので仕方ないのですが(^^;)ゞ) 1.WCF RIA Services プロジェクトのWindows Azure への配置上の注意点 この点は、先日のMVP Open Dayでもご質問を戴いたのですが、意外に知られていないので、共有することにしました。まずはこちらをご参照くださいませ。 前提としては、以下の通りです。 Windows Azure SDK 1.2 以降(.NET 4 対応) がインストールされていることが前提 1.3でももちろんOKです。 手順としては、例えば、 ・Intellitrace をオフにする ・空の Azure プロジェクトを追加 ・Web Role にサーバー側プロジェクトを追加 ・System.ServiceModel.DomainServices.*.dll 3つの Local Copy = True に設定 ・Cloud プロジェクトの発行 (デプロイ) という手順になります。 この手順で下記プロダクトが動作します。特にアンダーラインを引いた2つが重要ですので、ご注意下さい。 Silverlight 4, WCF RIA Services, Windows…

0

PDC Japan 2010、ご来場誠に有難うございました – HTML5 with Internet Explorer 9 フォローアップ

皆様、こんにちは! 先週のPDC Japan 2010、お忙しいところご来場有難うございました。私のセッションにも多くの方にご来場いただき、誠に感謝しております。 早速セッション内容の解説をしていきたいと思います。 1.The Beauty of the Web http://www.beautyoftheweb.com/ 自己紹介に続いてw、最初にこちらのデモサイトから、幾つかデモを見て戴きました。 ・iMDB Videoタグの端的な使い方のご紹介として ・The Shodo Video/Audio/Canvas これらのタグの使用例として。デザインのコンセプトについて。 ・eBay Deals Drag & Drop API の実装例として IE9のBetaのリリース時に合わせて作られたショーケースです。まだご覧戴いていない方は是非ご覧ください。 2. セッション内容 持ち帰って戴きたい事としては、下記の3つでした。纏めも同様です。 ・HTML5 は Web の未来 我々もこれに投資しており、W3Cにも多くのリソースを投入して、製品開発に即時反映しようとしていること、そしてIE9ではここが非常に強く意識されていること ・IE9 とVisual Studio / Expression Web で快適にHTML5 のプログラミングが可能 Visual Studio 及び Expression Web そしてそれらのアドインを使うことにより、新しいタグやマークアップの記述、そしてJavascriptの実装が非常にやり易いこと等 ・HTML5 を適材適所で推進することは極めて重要 HTML5だけでは現在のところ実装が難しいところも多々あります。そこで、Web ブラウザーのプラグインでしか実現できないところと、現状の HTML5 による実装で十分なところをよく理解して、アーキテクトが適用要件を見極めて、実装技術を決定すべきであるということ Silverlightでなければできないこと、例えばプレミアムなメディア体験(著作権保護を含む)、業務アプリケーションにおけるディレクトリサービスとの連携やローカル(COM資産等)との連携、は多々あります。…

0

Windows 7 アプリ投稿キャンペーン連動企画 – Sensor & Location Platformにおける実装(WPF4/Silverlight4)

皆様、こんにちは! 本日は、Windows 7 アプリ投稿キャンペーン連動企画 – Windows 7最新機能実装アプリケーション開発セミナー に足を運んでいただき、誠に有難うございます。 私のセッション、ちょっと時間が押してしまい申し訳ありませんでしたが、使い方も、意外とハードルが低いことがお分かりいただけたのではないかと思います。 ※こちらにスライドがありますので、ダウンロードしてみてください。ソースコードも(WPF及びSilverlight 4 OOBアプリケーション)公開しています。なお、SL4アプリケーションは、こちらのSensor7.NETをインストールする必要があります。 1.Webページのリンク セッション内でご紹介した内容に関するWebページのリンクを下記にご紹介しておきます。 ・Windows Sensor and Location プラットフォーム http://www.microsoft.com/japan/whdc/device/sensors/default.mspx ・Windows® API Code Pack for Microsoft® .NET Framework http://code.msdn.microsoft.com/WindowsAPICodePack ・Windows 7 で実現する新しいアプリケーションの世界を動画でみよう  http://msdn.microsoft.com/ja-jp/windows/ff423757.aspx 2. センサー&ロケーションプラットフォーム解説 Windows 7に備わる「センサー&ロケーション」プラットフォームは、さまざまなセンサデバイスが取得した情報やGPSなどのロケーション情報を活用する共通の基盤であり、NET Framework 4やWPF 4で簡単にデータを活用できるAPI群を有しています。 従来のIT技術はどちらかというと、時間と空間の制約を極小化するという目的に進化してきました。それに対してセンサー&ロケーションプラットフォームは、多様な環境の情報を取り込み、バーチャルとリアルを融合することができます。当該データをBing Mapと組み合わせてマッシュアップしたり、Azureのクラウドストレージにデータをため込んで分析したり、という新しい取り組みが可能になります。 3.センサープラットフォームの利用とプログラミング センサーでできること センサーで広がるPCの可能性として、下記のようなものが挙げられます。 •人感センサー ◦オフィスの座席のプレゼンス情報 ◦ディスプレイの自動OFF→エコにつなげる •加速度センサー ◦モーションによる自然なユーザーインターフェイス •温度センサー ◦室内温度計測と、パーソナル空調制御 •電力センサー ◦家電エコ •脳波センサー…

0

Silverlight 4におけるアプリケーション要件への挑戦 – Printing

皆様、こんにちは!本日はSilverlight 4 の印刷機能につき、ご紹介したいと思います。 印刷機能 Silverlight 4 は、レポートやドキュメントの印刷を可能にする API を搭載しています。画面 UI とは異なる印刷プレビューを作成、表示することも可能です。ページの印刷と、印刷イベントをサポートしています。具体的なサンプルアプリケーションでこの点を詳しく見てみましょう。 印刷 – Print Document クラス PrintDocumentという印刷用のオブジェクトがあります。これをまず生成します。イベントとしては、PrintPageが重要です。印刷ページ毎にこのPrintPageのイベントが走るので、ここで印刷の処理を行うということになります。実際の実装は非常にシンプルです。下記のソースコードをご覧ください。 印刷処理 PrintDocument pd = new PrintDocument(); pd.DocumentName = “印刷文書名”; // 印刷ドキュメント名 pd.PrintPage += (s, args) => // ページ印刷ごとのイベント発生 { args.PageVisual = LayoutRoot; // ①PageVisualの利用 args.HasMorePages = false; // ②HasMorePagesプロパティ }; pd.EndPrint += (s, args)=> //印刷終了時のイベント発生 { MessageBox.Show(“印刷完了”); } pd.Print();…

0

Silverlight 4におけるアプリケーション要件への挑戦 – Right Click Menu & Mouse Wheel

作業効率向上 Silverlight 4では、アプリケーションを開発する際、右クリック、マウスホイール、フルスクリーン時のキーボード入力の活用など、ユーザーの作業効率を高める機能を実装することができます。 右クリックメニュー 業務アプリケーションに必須の機能として、右クリックの実装が可能になったことは非常に重要です。 これまでのSilverlightのアプリケーション上で右クリックすると“Silverlight”というメニュー(設定項目)しか出てこなかったからです。実装方法については、下記のソースで処理を見てみましょう。 右クリックメニューの実装方法 public MainPage() { mediaElement.MouseRightButtonDown += new MouseButtonEventHandler(MouseRightButtonDownHandler); } private void MouseRightButtonDownHandler(object sender, … { e.Handled = true; // ① } private void MouseRightButtonUpHandler(object sender, … { var menu = new MyCustomMenuControl(mediaElement); menu.Show(e.GetPosition(LayoutRoot));   ・・・ ① そのまま右クリックすると “Silverlight”のメニューが出てしまいますので、この段階でHandleして、当該メニューが出ないようにしておきます。 この後、MouseRightButtonDownの箇所で、自分で実装したメニューを出すというような処理を入れても良いですし、MouseRightButtonUpの箇所で、別のメニューを出すというような処理を入れても良いのですが、“ContextMenu”のコントロールは存在していない、という点には注意が必要です。 そこで、実装する必要がある訳ですが、この点で、参考になるソリューションとして、Silverlight 4 Training Kitにある前述のRichTextBoxソリューションで、この点を確認してみましょう。   場所はC:\Silverlight4\Labs\RichTextBox\Source\Ex02\Endです。処理は下記の通りです。 ContextMenuの実装 <MainPage.xaml.cs> … //Mouse Events BEGIN…

0

Silverlight 4におけるアプリケーション要件への挑戦 – Drag & Drop

Drag & Drop 皆様、こんにちは。先程の投稿に次いで、今度はDrag & Dropです。 Silverlight 3の時にも、ブラウザー間でのオブジェクトのドラッグ&ドロップは可能でした。Silverlight 4 では、ローカルシステムから Silverlight アプリケーションへのファイルのDrag & Dropをサポートしました。これによりデスクトップアプリケーションにおける典型的な操作が可能です。 ここでは、まずは、CodeProjectに紹介されているサンプルのご紹介をしておきます。 ツールキットへの参照設定 これはSilverlightの ListBox コントロールの中でのドラッグ&ドロップの実装サンプルであり、2つのListBox間でのドラッグ&ドロップの操作の実装も行われています(これを実装するには、Silverlight 4 Toolkit がインストールされていることが必要です)。 最初のポイントとしては、Silverlight Toolkitへの参照設定及びxmlns:toolkit:toolkit として名前を参照できるようにすることが必要です。 まずVisual Studio 2010で適当な名前でSilverlightのプロジェクトを作成します。そしてMainPage.xamlを開き、編集していきます。 xmlns:toolKit= “clr-namespace:System.Windows.Controls; assembly=System.Windows.Controls.Toolkit” 次に、ListBoxDragDropTarget をGridの中に追加し、プロパティウィンドウで、属性の“AllowDrop” をTrueにしておく必要があります。 ListBoxDragDropTargetの追加とAllowDrop属性の変更 <toolKit:ListBoxDragDropTarget AllowDrop=”True”> </toolKit:ListBoxDragDropTarget> そして、各々がListBoxDragDropTargetに囲まれた2つのListBoxを追加し、配置します。 ListBoxの追加と配置 <StackPanel Orientation=”Horizontal” Margin=”10″ Grid.Row=”1″> <toolKit:ListBoxDragDropTarget AllowDrop=”True”> <ListBox x:Name=”customerListBoxMain” Height=”200″ Width=”200″ DisplayMemberPath=”Name”> <ListBox.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation=”Vertical”/>…

0

Silverlight 4におけるアプリケーション要件への挑戦 – IMEの制御

皆様、おはようございます! 木曜深夜のPDCパブリックビューイングではお世話になりました。参加して戴いた皆様、お疲れ様でした&どうもありがとうございました。 ※ちなみにバンド演奏演奏は、当事者としてはやはり大変楽しかったです。プレゼンもそうですが演奏も、本番というのは全員の集中力がやはり発揮されるものですね。またの機会・・・を再び狙っておりますw。どうぞよろしくお願いいたします。 さて本日は、また小ネタ系ですので、後程もう一つ投稿予定ですが、IMEの制御という非常にシンプルなテーマをご紹介したいと思います。 Silverlight 4では、IMEの制御も可能です。これは実際にアプリケーションを作ってみてみましょう。Visual Studio 2010を起動し、新しいプロジェクトでSilverlightアプリケーションを選びます。 新しいSilverlightアプリケーションの作成 そして、下記のようにテキストボックスとボタンを、画面上にツールボックスから貼り付けて配置します。 画面へのテキストボックスとボタンの配置 ボタン(button1)をダブルクリックして、イベントハンドラに下記のロジックを追加します。 リスト IME制御のロジック private void button1_Click(object sender, RoutedEventArgs e) { System.Windows.Input.InputMethod. SetPreferredImeConversionMode (textBox1, ImeConversionModeValues.Symbol); textBox1.Focus(); } ここで行っている処理は、IMEの制御のターゲットとなるコントロール(ここではtextBox1)の指定と、ConversionMode(日本語のひらがなの場合にはSymbolを選択)指定です。 実行結果は下記の通りで、英数半角入力の途中でボタンを押すと、IMEがオンになり、ひらがなでかな漢字変換が可能になります。その次の行では、フォーカスが途中でボタンに移らないように、セットしています。 IME制御の動作の実行イメージ このようにしてSilverlight上でもIME制御が動作していることがお分かり頂けると思います。 以上です。いかがでしょう?次の投稿はドラッグ&ドロップです。 鈴木 章太郎

1

[更新版]Windows 7 アプリ投稿キャンペーン10月25日現在の投稿作品 – Silverlight 4-updated

コメントをし忘れてしまいましてw、更新して再度Postします。大変失礼しました。 皆様、こんばんは!こちらの投稿は、Windows 7 アプリ投稿キャンペーンに関するものです。 まず、こちらのセミナーは、プレゼントキャンペーン第二弾が開始されましたので、是非奮ってご応募ください。 それでは、投稿された作品のご紹介をします。作品一覧は、以下のサイトより見ることができます。このサイトをチェックしていれば、最新の投稿数がわかります。 http://msdn.microsoft.com/ja-jp/windows/jpwin7cp07.aspx Silverlight 4関連は、今のところ下記のものですね。 rbnr http://www.vector.co.jp/soft/winnt/net/se486758.html インターネット上に公開されている画像を設定して、ローテーションバナーを作成する 「rbnrはインターネット上に公開されている画像URL(JPG/PNG形式のみ対応)を設定することで、ローテーションまたはグループ表示をするバナーコンテンツ(Silverlight)を作成することができます。 生成されたソースをHTMLページに埋め込むだけで設置することができるため、動的にファイルを書き込むことのできるサーバ環境を用意する必要もなく、PCに不慣れな方でも簡単に設定することができます。」とのことで、サーバ上に rbnr.xap と rbnr.html を設置し、編集画面である rbnr.htmlから、編集することになります。非常にシンプルな出来で、使いやすく良くできていると思います。 Snake on Silverlight http://www.vector.co.jp/soft/winnt/game/se486535.html Silverlight上で動作するスネークゲーム こちらはシンプルなゲームで、5分以内になるべく多く点数取るようにします。餌1つにつき10点が取得できます。餌を10個食べると脱皮し、障害物になります。ピンクが餌、灰色が障害物となっています。 障害物や自身に当たるとゲーム終了になります。キー操作(A/S/D/Fか←↑→↓)で方向操作できるのと、Mで加速、Nで減速できるということで、ちょっと慣れが必要ですが、非常に飽きの来ないシンプルな構成といえるでしょう。 Another TL http://www.vector.co.jp/soft/winnt/net/se486502.html ROM専用Twitterクライアントです。このようなクライアントは、特に企業や個人で立場上?直接フォローできない?場合や、フォローしたくない場合w、あるいは自分の別のアカウントでフォローしたい場合等にw、良いかもしれません。 ROM専用のため、投稿やリプライなど自ら情報発信することはできませんが、Twitterアカウントが不要なので、誰でも気軽に利用できます。 フォローしたいキーワードを設定パネルに登録するだけで、検索にヒットしたツイートが時系列に並んで表示されます(Silverlightと設定してみました)。 特徴は、Webブラウザーアプリケーション、ブラウザー外実行(OOB)アプリケーションの両方をサポートしていることで、これは良いと思いました。それぞれにちょっとずつ機能の違いもあったりして、それぞれの特性に良く配慮されていると思います。 カロリーチェック http://www.vector.co.jp/soft/winnt/home/se486782.html カロリーの摂取・消費を楽しく管理できるアプリケーションとのことで、RichなUIを使って、カロリーの摂取・消費を楽しく管理できるアプリです。ためしに適当な値を入れてみたのが下記の図です。これもシンプルで良いですねー。 まだまだ投稿は少ないので、[S4]カテゴリは、狙い目では?是非ご応募ください。 そのためにも?、是非こちらのセミナーにもご来場いただければ幸いです。 お待ちしております! 鈴木 章太郎

0