PowerPoint プレゼンテーション

Size: px

Start display at page:

Download "PowerPoint プレゼンテーション"

あやかかみこ
8 years ago
Views:

1 グレープシテゖ株式会社八巻雄哉

2 .NET Framework 3.0 で追加された Windows ゕプリケーションのための GUI サブシステム 2

3 Windows GDI User Direct3D OpenGL DirectShow 2D 2D 2D 3D ビデオビットマップフォント GUI 3

4 Windows WPF 2D 3D ビデオビットマップフォント GUI 4

5 うちの業務ゕプリでは 3D や動画は使わないのですが大丈夫ですどこの業務ゕプリでも 3D や動画は使いません 5

6 WPF UIフレームワークは全く新しいマクロソフトの最新 UI 基盤 20 年来のWin16/32ベースの GUIから大きく進化業務ゕプリでも大きな恩恵画面 (GUIコントロール 2D 描画 ) ゕプリケーション開発 6

7 WPF のクロスプラットフォーム実装旧称 :WPF/E(Everywhere) 実装はサブセット ( 限定部分 ) Silverlight にしかない機能もある Web ブラウザプラグンとして動作 7

8 用語 WPF UIフレームワークは WPFとSilverlightで共通仕様となっているUI 基盤を指します本セッションでご紹介するすべの内容は WPFとSilverlightの両方で同様に動作します 8

http://www.atmarkit.co.jp/fdotnet/vblab/uiframework_index/ 第 1 回 WPF と Silverlight をまとめて習得しよう 1.XAML 構文の基礎 2.Panel によるレゕウト (StackPanel/Canvas) 3.Panel によるレゕウト (Grid/ そのほかの Panel) 4.

9 第 1 回 WPF と Silverlight をまとめて習得しよう 1.XAML 構文の基礎 2.Panel によるレゕウト (StackPanel/Canvas) 3.Panel によるレゕウト (Grid/ そのほかの Panel) 4. コントロールの種類第 2 回データの表示と入力に必要な知識 1. データバンデゖングの基本 2. より実践的なデータバンデゖング 3. 双方向データバンデゖング 4. コンバータによるデータ変換 / コレクションオブジェクトへのバンド 5. 表示をカスタマズできるデータテンプレート第 3 回見た目を決めるリソースとスタイル 1. リソースの概要 / 静的リソース参照 2. 動的リソース参照 / リソースデゖクショナリフゔル 3. スタルの基礎 / スタルの共有と継承第 4 回見た目を決めるコントロールテンプレート 1. コントロールテンプレートの概要 2. コントロールテンプレートによる外観の定義方法 3. コントロールテンプレート内で動的に外観を定義する方法 9

10 Visual Studio 2010 Beta 2.NET Framework 4 Beta 2 WPF 4.0 Beta 2 Silverlight 4 Beta 10

11 XAMLの基本レゕウトとスケーリングコントロールの種類データバンデゖングコンバーターデータテンプレート

12 XAML Fundamentals 12

13 XMLをベースに独自の拡張を施した宣言型言語 WPF SilverlightのUI 作成に使用メリット可読性人 ( デザナー ) ツール ( デザナー )

14 Dim Canvas1 As New Canvas() Dim Button1 As New Button() Button1.Content = " ボタン Button1.FontSize = 24 Canvas.SetTop(Button1, 50) Canvas.SetLeft(Button1, 50) Canvas1.Children.Add(Button1) 可読性に注目! <Canvas> <Button Content=" ボタン " Canvas.Top="50" Canvas.Left="50" FontSize="24"/> </Canvas>

15 XAMLは.NET Frameworkにおけるクラスのンスタンス化を宣言的に記述したもの XAMLの親子関係はそのままUIの親子関係となる Tech Ed 2008 Yokohama 開発者なら知っておきたい XAML の書き方セッション資料

16 Layout and Scaling 16

17 絶対配置座標指定相対配置水平方向または垂直方向への整列上下左右の端にドッキングして整列 Windows フォームデフォルト ( パネルなし ) FlowLayoutPanel Dock プロパテゖ ( パネルなし ) 列と行で構成される格子状の領域へ配置 TableLayoutPanel WPF UI フレームワーク Canvas StackPanel DockPanel Grid UniformGrid 17

18 添付プロパテゖ Left Top 要素の左端と親 Canvas の左端との距離要素の上端と親 Canvas の上端との距離 <Canvas Background="White"> <Button Content="Button" Canvas.Top="30" Canvas.Left="70"/> <TextBox Text="TextBox" Canvas.Top="100" Canvas.Left="30"/> </Canvas>

19 Orientation プロパテゖ子要素が配置される方向 ( 水平か垂直 ) <StackPanel Orientation="Vertical"> <Button Content="Button" Margin="10,20,30,40"/> <TextBox Text="TextBox" Margin="0"/> </StackPanel>

<Grid Background="White" ShowGridLines="True"> <Grid.ColumnDefinitions> <ColumnDefinition Width="6*"/> <ColumnDefinition Width="4*"/> </Grid.ColumnDefinitions> <Grid.

20 <Grid Background="White" ShowGridLines="True"> <Grid.ColumnDefinitions> <ColumnDefinition Width="6*"/> <ColumnDefinition Width="4*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="3*"/> <RowDefinition Height="4*"/> <RowDefinition Height="3*"/> </Grid.RowDefinitions> <Button Content="Button" Grid.ColumnSpan="2"/> <TextBox Text="TextBox" Grid.Column="1" Grid.Row="2"/> </Grid>

21 Viewbox コントロールの大きさに合わせて子要素が拡縮される 21

22 Control Types 22

*1 Silverlight では ItemsControl の派生クラス *2 Silverlight では Control の派生クラス Calender ContentControl ButtonBase Button RepeatButton ToggleButton Checkbox RadioButton ComboBoxItem Label ListBoxItem

23 *1 Silverlight では ItemsControl の派生クラス *2 Silverlight では Control の派生クラス Calender ContentControl ButtonBase Button RepeatButton ToggleButton Checkbox RadioButton ComboBoxItem Label ListBoxItem ScrollViewer TabItem DataGrid DatePicker ItemsControl Selector ComboBox ListBox TabControl *1 TreeView PasswordBox RangeBase ProgressBar ScrollBar Slider Thumb GridSplitter *2 UserControl TextBox

24 Windows フォーム Form FlowLayoutPanel GroupBox Panel SplitContainer TabControl TableLayoutPanel など ASP.NET(Web フォーム ) FormView ListView Page Panel PlaceHolder Repeater UpdatePanel UpdateProgress などコンテナ系のコントロールだけが子コントロールを持つ

25 Button コントロールなども子要素を持つ要素の種類 Panel ContentControl ItemsControl 子要素の種類子要素の数該当する代表的な要素 UIElementオブジェクト複数 Canvas Grid StackPanelなど文字列オブジェクト単一 Button CheckBox RadioButtonなど文字列オブジェクト複数 ListBox ComboBox TabControlなど

26 ゕコン付ボタンの例ヘルプ <Button> <StackPanel Orientation="Horizontal"> <Image Source="Help.gif"/> <Button> ヘルプ </Button> <TextBlock Text=" ヘルプ " VerticalAlignment="Center"/> </StackPanel> </Button>

27 Data Binding 27

28 基本思想は Windows フォームと同様柔軟性や機能面で大幅向上データバンデゖングを広く活用可 28

29 UI とロジックの分離 MainWindow.xaml MainWindow.xaml.vb 29

30 UI とロジックの分離データバンデゖング MainWindow.xaml.vb MainWindow.xaml Logic.vb 30

31 2 つのオブジェクトのプロパテゖに対する単方向または双方向の値の同期処理バンデゖングターゲットバンデゖングソース AAA プロパテゖ BBB プロパテゖ桃太郎桃太郎 31

32 UI( ビュー ) Person オブジェクト Height プロパテゖ ( 身長 ) 検証ロジック Weight プロパテゖ ( 体重 ) 検証ロジック Bmi プロパテゖ Calculate メソッド (BMI の計算 ) 32

33 コンバーターを使用することでデータ変換を伴った値の同期処理が可能となる IValueConverter ンターフェス Convert メソッドソースからターゲット方向への値を変換 ConvertBack メソッドターゲットからソース方向への値を変換 33

34 バンデゖングターゲット Converter 1 桃太郎 2 金太郎 3 浦島太郎バンデゖングソース CCC プロパテゖ DDD プロパテゖ 1 桃太郎 34

35 UI( ビュー ) Person オブジェクト Height プロパテゖ ( 身長 ) 検証ロジック Weight プロパテゖ ( 体重 ) 検証ロジック Bmi プロパテゖ Calculate メソッド (BMI の計算 ) 35

36 コレクションデータとバンデゖングし視覚化する役割を担うのが ItemsControl ComboBox ItemsControl Selector StatusBar TreeView ListBox TabControl 36

37 ListBox コントロールデータオブジェクト ItemsSource プロパテゖ正門森上木下田中明山 string[] 正門森上木下田中明山 37

38 ItemTemplate プロパテゖ (DataTemplate 型 ) 1 項目分のデータをどのように視覚化するかを DataTemplate を使って定義 ItemsPanel プロパテゖ (ItemsPanelTemplate 型 ) 各項目のレゕウトに使用されるパネルを ItemsPanelTemplate を使って定義 ListBox の既定値は VirtualizingStackPanel 38

39 エデゖション for Windows Forms 2010J for ASP.NET 2010J for Silverlight 2010J Enterprise 2010J 概要 Windows フォーム開発用の 12 コンポーネント ASP.NET 開発用 Ajax に対応した 28 のコンポーネント Silverlight 3 開発用の 39 のコンポーネント上記のすべてのコンポーネントと WPF 用のコンポーネント合計 80 種を収録した最上位エデゖション 39

40 20 年来のWin16/32から初めて刷新されたのがWPF UIフレームワーク高い柔軟性とUI 分離のしやすさは業務ゕプリにも大きく貢献レゕウトとスケーリング限りなく自由なGUI 部品強力なデータバンデゖング 40

41 41

XAMLDo-It-Yourself 第 2 回. レゕウト今回は XAML でウゖンドウにパネルやボタンメニューなどの基本的なコントロールを配置する方法を学びますここでは次のことを学習します XAML におけるレゕウトの基本主要なパネルとその記述方法 XAML (WPF) で利用可能な

XAML Do-It-Yourself シリーズ第 2 回レゕウト -1- XAMLDo-It-Yourself 第 2 回. レゕウト今回は XAML でウゖンドウにパネルやボタンメニューなどの基本的なコントロールを配置する方法を学びますここでは次のことを学習します XAML におけるレゕウトの基本主要なパネルとその記述方法 XAML (WPF) で利用可能なコントロール典型的なコントロールの記述方法