PDF 形式

第15回 .NET勉強会/ヒーロー島
WPF 4 & Silverlight 4
Genius Seminar delivered for ヒーロー島
マイクロソフト株式会社
パートナービジネス営業統括本部
パートナーテクノロジー本部
プリンシパル テクノロジーアドバイザー
ジニアス平井（平井昌人）
[email protected]
Caution
本資料に掲載されている情報は、開発中
の製品および技術に関するものも含まれ
ております。これらは今後、変更される
可能性もあります。
当日のセミナーで使用する資料は、内容
の変更やスライドの追加を行っている場
合があります。最新のプレゼンテーショ
ン資料は次のサイトからダウンロードし
て下さい。
http://www.MasatoHirai.com/Partner/
Windows Presentation Foundation 4
Technical Workshop for Developer
Visual Studio 2010 – WPF/SL デザイナ
～ Expression Blend に近い操作性を提供 ～
 プロパティ編集機能を強化
 ブラシエディタ
 リソースに抽出
 リソースの適用
 データバインド
Visual Studio 2010 – WPF/SL デザイナ
～ データソースのドラッグ＆ドロップはやはり便利！ ～
 データバインディング
 データソース ウィンドウから
のドラッグ＆ドロップを
サポート
 データテンプレートの
編集機能
 インテリセンスの強化
 {Binding …
 {StaticResource…
データソース ウィンドウ
から WPF デザイナに
ドラッグ＆ドロップ
Visual Studio 2010 Beta2
～ 使用上の注意 ～
 コードエディタ上での IME の ON/OFF
 IME の ON/OFF は [半角全角]キーで行って下さい
 [ALT]+[半角全角]キーだと [ALT] キーでメニューにフォーカス移動
してしまいます。
 WPF / SL デザイナー
 デザイナー上に [デザイン]と[XAML]の両方のウィンドウを開い
ておいて下さい。
 どちらか一方にしておくと ビルド→実行 の後 VS2010 に戻った時に
フリーズしてしまいます。
 スペックのよいマシンで！
 まだ Beta 版なのでかなり重たいです。
 メモリは x86 で 3GB 以上、x64で 8GB 程度欲しいです
 CPU は Core2 Duo 以上がよいと思います
 WPF ベースなので GPU の影響もあります
 OS は Windows 7 が軽くていいです
DataGrid コントロール
～ VB6, Windows フォーム感覚での利用が可能 ～
 カラムの自動生成
<DataGrid ItemSource = "{Binding}" />
 AutoGenerateColumns = "True"
 既定カラムタイプ
 DataGridTextBoxColumn
 DataGridCheckBoxColumn
 DataGridComboBoxColumn
 DataGridHyperlinkColumn
 各種機能
 行ヘッダー＆列ヘッダー
 列幅・行高のリサイズ
 列のオーダー変更
 ソート＆フィルタ
 テンプレート
 CellTemplate
 CellEditingTemplate
列順
行高
列幅
編集
Calendar & DatePicker コントロール
～ WPF Toolkit のコントロールを本採用 ～
 機能
 BlackoutDates
 選択不可期間を設定
 X 表示
 FirstDayOfWeek
 週の開始曜日
 SelectionMode




Blackout Dates
SingleDate
SingleRange
MultipleRange
None
 DisplayMode
 Month
 Year
 Decade
 Style
Selection Mode
Chart コントロール
～ これだけ出来れば十分でしょう！ ～
 チャートの種類
 ColumnSeries
 BarSeries
 PieSeries
 LineSeries
 BubbleSeries
 AreaSeries
 ScatterSeries
縦棒
横棒
円
折れ線
バブル
面
散布図
軸
 LinearAxis, CategoryAxis, DateTimeAxis
 Orientation, Title, Minimum, Maximum, Interval
 カスタマイズ
 各領域にスタイル & テンプレートを適用
 ChartArea, PlotArea, Legend, Title, …
※ Beta2 では未実装
Ribbon コントロール
～ ビジネスアプリケーションには必須アイテム ～
 Office や Windows 7 で採用された UI コンポーネント
 メニューとツールバーが一体化してユーザビリティが向上
<Window.Resources>
 Ribbon CTP として別提供
<r:RibbonCommand x:Key="CutCommand"
 Ribbon モデル







RibbonCommand
Ribbon
RibbonTab
RibbonGroup
RibbonButton, ...
RibbonApplicationMenu
QuickAccessToolbar
CanExecute="CanExecute"
LabelTitle="切り取り"
LargeImageSource="Cut.png" />
<r:RibbonCommand x:Key="PasteCommand"
CanExecute="CanExecute"
LabelTitle="貼り付け"
LargeImageSource="Paste.png" />
</Window.Resources>
<DockPanel>
<r:Ribbon DockPanel.Dock="Top"
Title="ジニアスのリボン">
<r:RibbonTab Label="タブＡ">
<r:RibbonGroup>
<r:RibbonButton
Command="{StaticResource CutCommand}"/>
<r:RibbonButton
Command="{StaticResource
PasteCommand}"/>
</r:RibbonGroup>
</r:RibbonTab>
</r:Ribbon>
</DockPanel>
Visual State Manager
～ VSM を正式サポート ～
 コントロールテンプレートとスタイルの新モデル
 状態とその状態でのスタイルおよび遷移のトランジションを定義






Normal
MouseOver
Pressed
Disabled
Genius
more ...
:
:
:
:
:
赤
0.5 秒で緑
黄色
灰色
レインボー
 Silverlight の VSM と互換
 Blend 3 よりデザイナ
サポートあり
 WPF 3.5（VS2008）での
利用
 WPF Toolkit をインストール
 参照の追加で ¥Program Files¥WPF Toolkit¥WPFToolkit.dll
データバインディングの変更
～ 細かいコンバータを作らなくても大丈夫 ～
 データバインディング パイプラインを変更
 UI コントロールのプロパティを設定後にバインディングソース
からもう一度プロパティ値を取得するように変更
 Set アクセッサのロジック内でのプロパティ値の変更が反映される
 細かいコンバーターが不要になる
 INotifyPropertyChanged の実装の有無に影響しない
class SimpleClass {
private string _ProductCode;
public string ProductCode {
get { return _ProductCode; }
set {
_ProductCode = value;
if (! String.IsNullOrEmpty(_ProductCode)) {
_ProductCode = _ProductCode.ToUpper();
}
}
}
Easing 関数
～ アニメーションにイージング関数を導入 ～
 EasingFunction プロパティ
 アニメーションにおける値の補完をカスタマイズする機能
 従来は KeySpline で実現
 バネのような動きなど多彩な表現が可能
 11 種類のビルトイン関数
 BackEase, BounceEase, CircleEase, CubicEase,
ElasticEase, ExponentialEase, PowerEase,
QuadraticEase, QuarticEase, QuinticEase, SineEase
 Blend 4 ではデザイナがサポート
<Storyboard x:Key="Storyboard1">
<DoubleAnimationUsingKeyFrames …>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="300">
<EasingDoubleKeyFrame.EasingFunction>
<BounceEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
Cached Composition
～ 大幅なパフォーマンス向上が期待できる ～
 CacheMode プロパティ
 コントロールやベクトルジオメトリなど任意のビジュアルを
ビデオメモリにビットマップとしてキャッシュする機能
 再描画の際にキャッシュしたビットマップを使用（GPU処理）
 伸縮・移動・回転時のパフォーマンスを向上
 元サイズより大幅に拡大するとイメージは荒くなる
<Button CacheMode="BitmapCache" Content="Cached" />
<Canvas.CacheMode>
<BitmapCache EnableClearType="False" RenderAtScale="2"/>
</Canvas.CacheMode>
オリジナル
Cache なし（既定）
Cache あり
Layout Rounding
～ くっきりはっきりした UI になります！ ～
 UseLayoutRounding プロパティ
 描画をピクセル単位に揃える丸め処理を使用するかどうか
 Silverlight 2 で導入
 WPF 4 では既定値 False
 True の場合は要素をピクセル境界上に強制配置
 従来の WPF はサブピクセルの座標位置を計算し、サブピクセルの
境界線上に位置する要素が複数の物理的なピクセルにわたってアン
チエイリアス化されるためにボケた表示となっていた
16ピクセルのビットマップを
Canvas.Left="0.5" で表示
True
False
Text Rendering API
～ 新しくなったテキスト描画スタック：文字もより明瞭に！ ～
 TextFormattingMode 添付プロパティ
 Ideal： WPF 既定のメトリックス
 Display： GDI 互換のメトリックス
<TextBox TextOptions.TextFormattingMode="Ideal" />
<TextBox TextOptions.TextFormattingMode="Display" />
 TextRenderingMode 添付プロパティ
 ClearType：
ClearType オン
 Grayscale：
グレースケール
 Aliased：
Nonアンチエイリアッシング
Selection & Caret Brush
～ テキスト選択の背景色やキャレット色のカスタマイズが可能 ～
<TextBox SelectionBrush="Green"
 Selection ブラシ
SelectionOpacity="0.5">
 SelectionBrush プロパティ
</TextBox>
 テキスト選択時の背景色
 グラデーションなども可能
 SelectionOpacity プロパティ
 ブラシの透明度
 [0.0～1.0]既定 0.6
 Foreground 指定不可
 Silverlight では OK
 SelectionBackground
 SelectionForeground
<TextBox SelectionOpacity="0.7">
<TextBox.SelectionBrush>
<LinearGradientBrush>
<GradientStop Color="Blue" Offset="0" />
<GradientStop Color="Red" Offset="1" />
</LinearGradientBrush>
</TextBox.SelectionBrush>
</TextBox>
 Caret ブラシ
 CaretBrush プロパティ <TextBox CaretBrush="Red"
 カーソルの色
 幅や形状の変更は不可
Text="ジニアス">
</TextBox>
WPF Other Features
～ WPF するなら 絶対に 4.0 がお勧めです ～
 Custom Dictionary
 スペルチェックに使用するカスタム辞書の追加が可能
<TextBox xml:lang="en-US"
SpellCheck.IsEnabled="True">
<SpellCheck.CustomDictionaries>
<sys:Uri>GeniusDic.txt</sys:Uri>
</SpellCheck.CustomDictionaries>
</TextBox>
#LID 1033
GeniusHirai
 Pixel Shader 3.0 のサポート
 WPF 3.5 SP1 は Pixel Shader 2.0 をサポート
 PS 3.0 では劇的に洗練れている
 Radeon X1300-X1950, Intel GMA X3000, GeForce 6, 7
 ハードウェア対応の確認 API
 RenderCapability.IsPixelShaderVersionSupported(3, 0)
 RenderCapability.IsPixelShaderVersionSupportedInSoftware(3, 0)
 RenderCapability.IsShaderEffectSoftwareRenderingSupported
Windows 7 ジャンプリスト
～ コードでも XAML でも OK ～
 app.xml（Application.xaml）で定義
 アプリケーションに渡されたコマンドライン引数で処理を判断
 アイコンは Win32 リソースか ICOファイル
<Application x:Class="Application"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<JumpList.JumpList>
<JumpList ShowRecentCategory="True" >
<JumpTask CustomCategory="ジニアス"
Title="Wake up!"
Arguments="/wakeup"
IconResourcePath="c:¥MyIcon.ico">
</JumpTask>
</JumpList>
</JumpList.JumpList>
</Application>
Windows 7 タスクバー
～ Windows 7 らしいアプリケーション ～
 TaskbarItemInfoクラスを提供
<Window.TaskbarItemInfo>
<TaskbarItemInfo x:Name="MyTaskbar1"
ProgressState="Paused"
ProgressValue="0.85"
ThumbnailClipMargin="0"
Overlay="redNG.ico"
Description="XAMLで定義">
<TaskbarItemInfo.ThumbButtonInfos>
<ThumbButtonInfo x:Name="tbButton1"
Command="Close"
ImageSource="redNg.ico"
Description="終了"
Click="tbButton1_Click"
CommandTarget="{Binding ElementName=Button1}"" />
</TaskbarItemInfo.ThumbButtonInfos>
</TaskbarItemInfo>
</Window.TaskbarItemInfo>
タッチ & マルチタッチ
～ WPF 4.0 でなら楽勝！ ～
 Multi-Touch サポート
 UIElements と UIElements3D を対応
 IsManipulationEnabled プロパティ
 マルチキャプチャのサポート
 マニュピュレーション＆イナーシャ
 操作（パン・ズーム・ローテーション）
 慣性（弾き飛ばすような動き）
 境界フィードバック（端までいったらどうする）
 イベント




ManipulationStarting
ManipulationDelta - 各種変換を適用
ManipulationInertiaStarting - 慣性を設定
TouchDown, TouchMove, TouchUp などの RAW
イベントもある
 Mouse イベント ≒ Touch イベント
GUI
NUI
Manipulation イベントハンドリング例
～ 慣性（イナーシャ）と境界フィードバックがミソ！ ～
Private Sub Canvas1_ManipulationStarting(…
e.ManipulationContainer = Me
End Sub
Private Sub Canvas1_ManipulationDelta(…
If e.DeltaManipulation.Translation.Length <> 0 Then
TRN.X += e.DeltaManipulation.Translation.X
End If
Dim delta = New ManipulationDelta(Overshoot(e.OriginalSource),
0,
New Vector(1.0, 1.0),
New Vector())
e.ReportBoundaryFeedback(delta)
End Sub
Private Sub Canvas1_ManipulationInertiaStarting(…
e.TranslationBehavior.DesiredDeceleration
= 10 * 96 / (1000 * 1000)
End Sub
ClickOnce 新機能
～ 完全信頼の配置は容易になった ～
 ClickOnce の権限昇格プロンプト
が XBAP にも有効化
 完全信頼の XBAP アプリケーションの
配置が簡略化
 バッググラウンド アップデート
 大きな XBAP の更新もスムーズ
 Script InterOp（XBAP-HTML 相互運用）
 BrowserInteropHelper.HostScript
 XBAP をホストしている window オブジェクトへのアクセス
 Frame 内にホストさせておく
Private Sub Button1_Click(…
Dim so = BrowserInteropHelper.HostScript
MsgBox("これは XBAP から")
so.alert("これは HostScript から")
so.close()
End Sub
<body>
<iframe src="Menu.htm">
</iframe>
<iframe src="FullTrust.xbap">
</iframe>
</body>
Silverlight 4
Technical Workshop for Developer
Silverlight の状況
～ 年１回のバージョンアップ ～
 リリース







2007年 春
2007年9月
2008年 春
2008年10月
2009年 春
2009年7月
2010年
Silverlight
Silverlight
Silverlight
Silverlight
Silverlight
Silverlight
Silverlight
1
1
2
2
3
3
4
(Beta)
リリース
(Beta)
リリース
(Beta)
リリース
(Beta)
 状況
 Version 1 リリースからたった 27ヵ月
 4 億以上のダウンロード（３台に１台）
 全世界で 40 万人を超えるデザイナーと開発者
 30ヵ国で 200 社を超えるパートナー企業
 マイクロソフトも 350 を超えるアプリケーションを展開
 地球上で１万を超えるアプリケーション展開
Silverlight サンプル
～ どうぞ！お試しください ～
 Microsoft Office Web Application（プレビュー版）
 現在開発中の Office の Web バージョン
 Excel, PowerPoint, Word, OneNote を提供
 http://home.live.com/
 SkyDrive に保存
Silverlight サンプル
～ ここまで出来れば文句なし！ ～
 MS Health CUI – Patient Journey Demo
 http://www.mscui.net/PatientJourneyDemonstrator/
Silverlight 3 新機能
～ 見た目は完璧に 3D ！～
 擬似 3D のサポート
 平面を3次元空間に投影
※ GPU アクセラレーション未対応
<Image Source="genius.jpg">
<Image.Projection>
<PlaneProjection RotationX="-13"
RotationY="-43"
RotationZ="8.5"/>
</Image.Projection>
</Image>
 WriteableBitmap
 任意の UIElement のスクリーンショットが可能
'再生中のメディアからビットマップを作成
Dim bmp As New WriteableBitmap(Video1, Nothing)
'作成したビットマップからImageオブジェクト作成
Dim img As New Image()
img.Height = 128
img.Source = bmp
Silverlight 3 メディア機能
～ 映像の綺麗さと頭出しの快適さをお楽しみ下さい ～
 メディア機能の強化
 IIS Smooth Streaming (IIS Media Services 2.0/3.0併用)
 H.264 / AAC のサポート
<MediaElement Source="HD720p.wmv"
AutoPlay="True" Margin="32">
 HD フルスクリーン再生
<MediaElement.CacheMode>
 コンテンツ保護の強化（DRM）
<BitmapCache />
 GPU アクセラレーション
</MediaElement.CacheMode>
</MediaElement>
<div id="silverlightControlHost">
<param name="enableGPUAcceleration" value="true"/>
<param name="enableCacheVisualization" value="true"/>
 サポートメディア形式
 Windows Media 7, 8, 9,






Advanced Profile（VC1）
Windows Media Audio 7, 8, 9, 10
H.264（Base, Main, High Profiles）
AAC-LC（Low Complexity）, MP3
YV12 – YCrCb（4:2:0）
RGBA – 32ビット Alpha, R, G, B
8ビット/16ビットPCM (wav形式)
Silverlight 3 Out-of-Browser
～ Silverlight はついにブラウザの外へ！～
 ブラウザー外実行
 インストール
 デスクトップショートカット
 スタートメニューへの追加
 安全で堅牢なセキュリティ
 変更の自動検知と自動更新
 VSの構成ダイアログで設定
 ネットワーク接続検知
 NetworkAddressChanged イベント
 GetIsNetworkAvailable プロパティ
Silverlight 4 - Printing
～ 待望の印刷機能を実装しました ～
 PrintDocument
 イベント : StartPrint, PrintPage, EndPrint
 メソッド : Print
 PrintPageEventArgs
 プロパティ: PrintableArea, PageVisual, HasMorePages
private void button1_Click(object sender, RoutedEventArgs e) {
PrintDocument pd = new PrintDocument() { DocumentName = "PrintDemo1" };
pd.PrintPage += new EventHandler<PrintPageEventArgs>(pd_PrintPage);
pd.Print();
}
void pd_PrintPage(object sender, PrintPageEventArgs e) {
Canvas root = new Canvas();
TextBlock head = new TextBlock() { Text = "ジニアス", FontSize = 24 };
head.Width = e.PrintableArea.Width;
head.TextAlignment = TextAlignment.Center;
root.Children.Add(head);
e.PageVisual = root;
e.HasMorePages = false;
}
Silverlight 4 - 新機能
～ お客様のご要望にお応えしました ～
 ドラッグ＆ドロップ
 UIElement.AllowDrop プロパティ
 UIElement.Drop/DragEnter/DragLeave/DragOver イベント
 マウス制御
 右クリック対応
 MouseRightButtonUp
 MouseRightButtonDown
 ホイール対応
 MouseWheel イベント
 クリップボード
 Clipboard クラス
 GetText, SetText メソッド
 Webカメラ
 CaptureSource クラス
 CaptureDeviceConfiguration
Silverlight 4 – Controls & DataBind
～ データバインドの機能を拡張！ バリデーションも OK ～
 RichTextArea コントロール
 リッチテキストの表示・編集
 DataGrid コントロール
 Auto-Size カラム
 ViewBox コントロール
 Stretch と StretchDirection プロパティ
 依存プロパティとのデータバインド
 Slider.Value ⇔ TextBox.Text
 データバインディング
 StringFormat, TargetNullValue, FallbackValue を新設
 SelectedValue と SelectedValuePath
 IDataErrorInfo, INotifyDataErrorInfo のサポート
 ClientHttpWebRequest での クレデンシャルサポート
 req.Credentials = new NetworkCredential(username, password);
Silverlight 4 - Out of Browser
～ デスクトップアプリ並みの快適さ ～
 Sandbox モード
 大きさ、位置、最前列表示などのウィンドウ制御
 NotificationWindow によるトーストポップアップ
 WebBrowser による HTML の表示
 オフライン
if (Application.Current.IsRunningOutOfBrowser) {
Application.Current.MainWindow.TopMost = true;
DRM
NotificationWindow w = new NotificationWindow();
w.Content = new TextBlock() {Text = "ジニアス"};
w.Show(5000);
}
 権限昇格モード
 ローカルファイルシステムへのアクセス
 クロスドメインポリシーファイルの設置が不要
 COM Automation サポート (IDispatch) Windows 限定
if (Application.Current.HasElevatedPermissions) {
File.CreateText(@"c:¥demo.txt"));
}
Silverlight 4 - その他
～ Silverlight 4 で大規模ビジネスアプリケーション開発 ～
 IME 対応
 InputMethod.SetPreferredImeState メソッド
 IME のオン・オフ
 InputMethod.SetPreferredImeConversionMode メソッド
 入力モード（Katakana, FullShape, Fixed, Native, … ）
InputMethod.SetPreferredImeConversionMode(TextBox1,
ImeConversionModeValues.Katakana)
 WCF RIA Services（旧 .NET RIA Services）
 JSON（JavaScript Object Notation）フォーマット
 VS2010 テンプレートも提供
 Silverlight Business Application
 WCF RAI Services Class Library
 Right-to-Left サポート
 FlowDirection プロパティ
 アラビア語、ヘブライ語をサポート
第15回 .NET勉強会/ヒーロー島
アンケートにご協力ください。
本セッション専用のアンケート用紙がございます。
ご面倒をお掛けしますが、ご協力ほどお願いします。