グラフィックス 目次

Size: px
Start display at page:

Download "グラフィックス 目次"

Transcription

1 WPF 入門 第 7 回 WPF UI 要素の基礎とレイアウト用のパネルを学ぼう 前回までで XAML/WPF の基礎的な仕組みについての説明を終え 今回からは個々の UI( ユーザー インターフェイス ) 要素の説明に入っていく まず今回は WPF の UI 要素を表すクラスの継承階層と レイアウト用のパネルについて説明する UI 要素の継承階層 WPF の UI 要素について MSDN ライブラリで調べて見ると クラスの継承階層の深さに驚くかもしれない 例えば Button クラス (System.Windows.Controls 名前空間 ) のページを見てみると Figure 1 に示すような継承階層が書かれている Figure 1: Button クラスの継承階層 WPF の UI 要素も.NET Framework のクラスとして作られているので Object クラス (= すべてのクラスに共通の基底クラス ) を継承しているのは当然として その下に多くのクラスが並んでいる コントロールの共通基底クラスである Control クラス (System.Windows.Controls 名前空間 ) より上に 5 つのクラスが並んでいるが これらの 5 つについて簡単に説明しておこう (1)DisptacherObject クラス DispatcherObject クラス (System.Windows.Threading 名前空間 ) は 単一のスレッドのみが直接操作可能なオブジェクトを表すクラスで ほかのスレッドからは ディスパッチャ (Dispatcher: 配送係り ) と呼ばれるオブジェクトを介してアクセスしなければならない WPF では (WPF に限らず グラフィックを扱うほとんどのフレームワークでは ) パフォーマンス上 -1-

2 の理由から UI 要素に対する操作を単一のスレッド上で行わなければならない ( このようなスレッドを UI スレッド と呼ぶ ) ところが一方で UI スレッド上で時間のかかる ( 描画以外の ) 処理をしてしまうと アプリケーションそのものをフリーズさせてしまうことになる このような処理は UI スレッドとは別のスレッドで行わなければならない 実際に時間のかかる処理を別スレッドで行い その結果に応じて UI 要素の状態を変更したい場合には 別スレッドから UI スレッドに処理を戻す必要があり この作業を担うのがディスパッチャである ( つまり 作成元のスレッドでこの処理を実行してほしい というメッセージを配送する ) Windows フォームでは コントロール自身がこの役割を担っていたが WPF では Dispatcher クラス ( System.Windows.Threading 名前空間 ) に役割を分離している (DispatcherObject クラスの Dispatcher プロパティを通して利用 ) 例えば ボタンが押されたときに何か時間のかかる処理を開始し 処理中はボタンを押せなくしたいというような場合には List 1 に示すようなコードを書く必要がある Visual Basic Private Sub StartButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles StartButton.Click Dim dispatcher = Me.Dispatcher Dim asyncwork As Action = Sub() HeavyWork() dispatcher.invoke( New Action( Sub() ' 処理が完了したらボタンを利用可能に戻す Me.StartButton.IsEnabled = True End Sub)) End Sub ' いったんボタンを利用不可にする Me.StartButton.IsEnabled = False asyncwork.begininvoke(nothing, Nothing) End Sub Private Shared Sub HeavyWork() ' 時間のかかる処理を Sleep を使って疑似的に作る System.Threading.Thread.Sleep(3000) End Sub -2-

3 Visual C# private void StartButton_Click(object sender, RoutedEventArgs e) { var dispatcher = this.dispatcher; Action asyncwork = () => { HeavyWork(); dispatcher.invoke(new Action(() => { // 処理が完了したらボタンを利用可能に戻す this.startbutton.isenabled = true; })); }; // いったんボタンを利用不可にする this.startbutton.isenabled = false; } asyncwork.begininvoke(null, null); private static void HeavyWork() { // 時間のかかる処理を Sleep を使って疑似的に作る System.Threading.Thread.Sleep(3000); } List 1: ディスパッチャの利用例 ( 上 :C# 下 :VB) XAML コード中に StartButton という名前の <Button> 要素があり Click イベントに Button_Click メソッドが結び付けられているものとする (2)DependencyObject クラス 第 3 回で説明したように WPF では 依存関係プロパティ という独自の 値の保持機構 を持っている DependencyObject クラス (System.Windows 名前空間 ) は この依存関係プロパティを利用するための共通基底クラスとなる (3)Visual クラス -3-

4 Visual クラス (System.Windows.Media 名前空間 ) は 画面への描画にかかわる要素の共通基底クラスとなる WPF の理念の 1 つに データ駆動による UI の作成というものがある すなわち データとして UI 記述を行い フレームワークの内部でデータを実際の描画命令に置き換えて UI を表示する 例えば 画面上に円を描画したい場合 Windows フォームでは List 2 に示すように ( 基本的に ) ペイント イベントを拾って描画のための手続きを書いていた Visual Basic Protected Overrides Sub OnPaint(ByVal e As PaintEventArgs) Dim g = e.graphics Dim pen = New Pen(Color.Blue) g.drawellipse(pen, 0, 0, 100, 100) End Sub Visual C# protected override void OnPaint(PaintEventArgs e) { var g = e.graphics; var pen = new Pen(Color.Blue); g.drawellipse(pen, 0, 0, 100, 100); } List 2: Windows フォームでの円の描画 これに対して WPF では List 3 の C#/VB コード もしくは List 4 の XAML コードに示すように データの宣言によって描画を ( 単に表示だけでなく ヒット テストなども ) 制御する XAML <Ellipse Width="100" Height="100" Stroke="Blue" StrokeThickness="1" /> Visual Basic Me.Content = New Ellipse With {.Width = 100,.Height = 100,.Stroke = New SolidColorBrush(Colors.Blue),.StrokeThickness = 1 } Visual C# this.content = new Ellipse { Width = 100, Height = 100, Stroke = new SolidColorBrush(Colors.Blue), StrokeThickness = 1, }; List 3,4: WPF での円の描画 -4-

5 このような描画に関連するデータに応じて 以下のような処理を行うのが Visual クラスの役割である 画面への実際の表示 ( 拡大 縮小 回転などの ) 変形 クリッピング ヒット テスト (= 要素がクリックされたかどうかの判定 ) (4)UIElement クラス UIElement クラス (System.Windows 名前空間 ) は UI 要素として必要な最低限の機能を備える共通基底クラスで 以下のような処理を行う レイアウト (= 要素のサイズや配置の決定 ) 用の抽象メンバ ユーザー入力への応答 ルーティング イベントの発生 最低限の ( 一般的な ) アニメーション (5)FrameworkElement クラス FrameworkElement クラス (System.Windows 名前空間 ) は UIElement クラスに以下のような WPF 固有の機能を追加したものである レイアウトの具体的な実装 スタイル プロパティ値の包含継承 WPF 固有のアニメーション ( ストーリーボードなど ) WPF の UI 要素となるクラスのほとんどは この FrameworkElement クラスを継承している UIElement クラスと FrameworkElement クラスは 将来的な拡張や第三者によるフレームワーク開発を想定して 2 層に分けられている このため アセンブリも 汎用的な利用を想定した PresentationCore アセンブリ (UIElement クラスを含む ) と WPF 固有の機能を集めた PresentationFramework アセンブリ (FrameworkElement クラスを含む ) の 2 層に分かれている コラム 画面描画の共通基底クラスに関する補足 : Freezable クラス -5-

6 ブラシやアニメーションのタイムラインなど 描画に関連はするが 直接画面に描画されるわけではないもの ( つまり Visual クラスには適さないもの ) もあり このような要素の場合は Freezable クラス (System.Windows 名前空間 ) を継承する Freezable クラスは オブジェクトの状態を固定 (freeze) して読み取り専用にできる ( 書き込み可能なものを途中から読み取り専用に切り替えられるので 不変 (immutable) ではなく固定可能 (freezable) と呼ぶ ) DispatcherObject クラスの項で説明したとおり パフォーマンス上の理由から グラフィックに関連する要素は単一のスレッドからのみアクセス可能になっている場合が多いが 読み取り専用であればほかのスレッドからアクセスされても問題は生じない Freezable クラスの場合 オブジェクトが固定された状態 (frozen) のときだけ ほかのスレッドからのアクセスを許可している FrameworkElement クラスの下にはさまざまな派生クラスが存在する 今回は まず レイアウト用のパネルについて説明していこう パネル ( レイアウト用の UI 要素 ) WPF には柔軟なレイアウトを簡単に実現するための仕組みが備わっている ここでは レイアウトの背景 基礎的な概念 および 標準で提供されているレイアウト用のパネルについて説明していく 背景 かつて技術が未成熟だったころ GUI アプリケーションは固定レイアウト ( 要素のサイズや配置をすべてハード コーディング ) になることが多かったが 技術の進歩とともに 柔軟なレイアウトが可能となった レイアウトを柔軟にすることには以下のような利点がある 多様な表示方法への対応 以下に挙げるような理由から GUI アプリケーションは環境ごとに表示方法が異なってくる ハードウェア上の制約 : PC の場合 ディスプレイのサイズは機器ごとにかなりの差がある 利用者の嗜好 : ある人は全画面表示を好み ある人は小さくしたウィンドウを複数並べることを好むなど 利用者ごとに好むウィンドウ サイズが異なる アクセシビリティ : 弱視や老眼の人の利用が想定される場合 フォント サイズは容易にカスタマイズ可能にする必要がある 固定レイアウトでは このような多様な表示方法への対応は難しい 多言語対応 文章の長さは使用言語ごとに異なり 特に例えば 漢字文化圏とアルファベット文化圏では長さが倍以上変わる場合もある 多言語対応が必要な場合に固定レイアウトを行っていると 言語によって文字が途中で切れるか 逆に余白が残りすぎるなどといった問題が生じる 柔軟なレイアウト手法によってサイズや配置を自動調整できれば 他言語対応に伴う GUI の再調整作業は必要なくなり 他言語対応の手間をほぼ翻訳の手間 -6-

7 だけにできる WPF のレイアウトの基礎概念 柔軟なレイアウトを実現するため WPF の UI 要素は自分自身だけでなく レイアウト用のパネル ( 後述する Canvas や Grid など ) などを親要素とし Figure 2 に示すように 親子間で協調しながらサイズや配置を決定していく 親子間の協調のため UIElement クラスには以下のようなメソッドが用意されている DesiredSize プロパティ : 要素が希望するサイズ Measure メソッド : 親要素から利用可能な領域サイズを渡し DesiredSize プロパティの値を更新する Arrange メソッド : 実際に要素のサイズや配置を決定する 希望サイズを測るだけの Measure メソッドと実際にサイズや配置を決定する Arrange メソッドに分かれているのは 正式にレイアウトを決定するまでの間に ほかの要素との兼ね合いで何度も測り直しが発生するためである 希望サイズの決定 Measure での希望サイズや配置の決定に当たって FrameworkElement クラスは以下のようなプロパティを持っている Width, Height: 幅 高さを具体的に指定する ただし 親要素によって希望サイズが拒否される可能性もあるため 必ずしもこの値が最終的なサイズにはならない MinWidth, MaxWidth, MinHeight, MaxHeight: 幅 高さの最小値 最大値を指定する Margin: 要素の外側の余白幅を指定する HorizontalAlignment, VerticalAlignment: 配置される空間よりも要素のサイズの方が小さい場合に 要素を上下左右のどちらに寄せるかを指定する -7-

8 Width プロパティと Height プロパティを用いることで 具体的な幅 高さを直接指定することも可能ではあるが 思ったとおりの見た目を得やすい半面 前述のような多様な表示方法への適応力が弱まるという問題もある 具体的な値の指定は可能な限り避けた方がいいだろう また この Width プロパティや Height プロパティはあくまで希望サイズを指定するためのものであって レイアウト決定後の実際の値ではない これらのプロパティを指定せず 親要素や子要素に応じてサイズを自動決定した場合 その値はデフォルト値 (NaN: Not a Number 無効な数値 ) のままになっている レイアウト決定後の値を取得したい場合には ActualWidth プロパティと ActualHeight プロパティを利用する 標準提供されるパネル WPF で標準提供されているパネルを紹介していこう ここで紹介するクラスはいずれも Panel クラス (System.Windows.Controls 名前空間 ) の派生クラスとなっている StackPanel StackPanel クラス (System.Windows.Controls 名前空間 ) では 子要素を縦または横一列に整列する List 5 に示すように特に何も指定しなければ縦に List 6 に示すように Orientation 属性で Horizontal を指定すると横に整列する List 5 List 6 の実行結果をそれぞれ Movie 1 Movie 2 に示す <Window x:class="atmarkit07.panels.stackpanelsample" xmlns=" xmlns:x=" Title="StackPanel( 縦 )" Height="300" Width="300"> <StackPanel> <Button Content=" 幅指定なし " /> <Button Content=" 幅 100 右寄せ " HorizontalAlignment="Right" /> <Button Content=" 幅 100 中央 " HorizontalAlignment="Center" /> <Button Content=" 幅 100 左寄せ " HorizontalAlignment="Left" /> <Button Content=" 幅 200~250" MinWidth="200" MaxWidth="250" /> <Button Content=" 余白 30" Margin="30" /> </StackPanel> </Window> List 5: StackPanel( 縦 ) の例 (XAML) Movie 1: StackPanel( 縦 ) の実行例 <Window x:class="atmarkit07.panels.stackpanelhorizontalsample" xmlns=" xmlns:x=" -8-

9 Title="StackPanel( 横 )" Height="300" Width="300"> <Window.Resources> <Style TargetType="Button"> <Setter Property="LayoutTransform"> <Setter.Value> <RotateTransform Angle="-90" /> </Setter.Value> </Setter> </Style> </Window.Resources> <StackPanel Orientation="Horizontal"> <Button Content=" 高さ指定なし "/> <Button Content=" 高さ 100 上寄せ " VerticalAlignment="Top" /> <Button Content=" 高さ 100 中央 " VerticalAlignment="Center" /> <Button Content=" 高さ 100 下寄せ " VerticalAlignment="Bottom" /> <Button Content=" 高さ 200~250" MinWidth="200" MaxWidth="250"/> <Button Content=" 余白 30" Margin="30" /> </StackPanel> </Window> Movie 2: StackPanel( 横 ) の実行例 WrapPanel WrapPanel クラス (System.Windows.Controls 名前空間 ) では 子要素を左から右に順番に並べ 幅を超えた分は右端で折り返すようにレイアウトする HTML でのインライン要素のレイアウトを想像するといいだろう List 8 に WrapPanel の利用例となる XAML コードを Movie 3 にその実行結果を示す <Window x:class="atmarkit07.panels.wrappanelsample" xmlns=" xmlns:x=" Title="WrapPanelSample" Height="300" Width="300"> <WrapPanel> <Button Content="1" Height="80" /> <Button Content=" 上寄せ " Width="80" VerticalAlignment="Top" /> <Button Content=" 中央 " -9-

10 Width="80" VerticalAlignment="Center" /> <Button Content=" 下寄せ " Width="80" VerticalAlignment="Bottom" /> <Button Content=" 上寄せ " Width="80" VerticalAlignment="Top" /> <Button Content=" 中央 " Width="80" VerticalAlignment="Center" /> <Button Content=" 下寄せ " Width="80" VerticalAlignment="Bottom" /> </WrapPanel> </Window> List 7: WrapPanel の例 (XAML) Movie 3: WrapPanel の実行例 DockPanel DockPanel クラス (System.Windows.Controls 名前空間 ) では パネルの上下左右に子要素を貼り付ける ( ドッキング ) ようにレイアウトする ドッキングする位置は DockPanel.Dock 属性 ( 実体は添付プロパティ ) によって行う List 8 に DockPanel の利用例となる XAML コードを Movie 4 にその実行結果を示す <Window x:class="atmarkit07.panels.dockpanelsample" xmlns=" xmlns:x=" Title="DockPanel" Height="300" Width="300"> <Window.Resources> <Style TargetType="Button"> <Setter Property="Padding" Value="15" /> </Style> </Window.Resources> <DockPanel> <Button Content="1" DockPanel.Dock="Left" Background="#ffcccc" /> <Button Content="2" DockPanel.Dock="Top" Background="#ccffcc" /> <Button Content="3" DockPanel.Dock="Right" Background="#ccccff" /> <Button Content="4" DockPanel.Dock="Bottom" Background="#ccffff" /> -10-

11 <Button Content="5" DockPanel.Dock="Left" Background="#ffffcc" /> <Button Content="6" DockPanel.Dock="Right" Background="#ffccff" /> <Button Content="7" Background="#ffffff" /> </DockPanel> </Window> List 8: DockPanel の例 (XAML) Movie 4: DockPanel の実行例 Canvas あまり場面は多くないが どうしても固定レイアウトが必要なときには Canvas クラス (System.Windows.Controls 名前空間 ) を利用する 配置の指定は Canvas.Left 属性や Canvas.Top 属性 ( いずれも実体は添付プロパティ ) を用いて行う List 9 に Canvas の利用例となる XAML コードを Figure 3 にその実行結果を示す <Window x:class="atmarkit07.panels.canvassample" xmlns=" xmlns:x=" Title="Canvas" Height="300" Width="300"> <Canvas> <Button Canvas.Left="23" Canvas.Top="26" Content="A" Height="53" Width="53" Background="#ffcccc" /> <Button Canvas.Left="55" Canvas.Top="103" Content="B" Height="53" Width="53" Background="#ccffcc" /> <Button Canvas.Left="119" Canvas.Top="12" Content="C" Height="53" Width="53" Background="#ccccff" /> <Button Canvas.Left="158" Canvas.Top="85" Content="D" Height="53" Width="53" Background="#ccffff" /> </Canvas> </Window> List 9: Canvas の例 (XAML) -11-

12 Figure 3: Canvas の実行例 Grid Grid クラス (System.Windows.Controls 名前空間 ) は 表形式 ( 列位置と行位置の指定 ) でレイアウトを行う Visual Studio のウィンドウのテンプレートで使われているため 目にする機会は多いだろう ただし Visual Studio の視覚デザイン ツールを利用すると 表形式といっても 余白 (Margin 属性 ) やサイズ (Width 属性と Height 属性 ) を使った固定的なレイアウトになりがちである Windows フォーム時代と同じ感覚でレイアウトができて手軽ではあるものの 多様な表示方法に対応するためには注意が必要である 表を何行 何列にするかや 各列の幅 各行の高さを決めるために <Grid> 要素の RowDefinitions プロパティ および ColumnDefinitions プロパティを設定する 列の幅 および 行の高さには 以下のように 3 種類の指定方法がある 固定値指定 : Width="100" というように 数値のみを与えると 固定幅 / 高さになる 比率指定 : Width="2*" というように 数値の後ろにアスタリスクを付けると 比率指定となる <Grid> 要素自身のサイズ変更に応じて 比率を保ったまま行 / 列のサイズも変化する 自動 : Width="auto" というように auto を指定すると 子要素のサイズに応じて行 / 列のサイズが自動調整される また 子要素を何行目 何列目に配置するかを指定するため Grid.Row 属性 および Grid.Column 属性 ( いずれも実体は添付プロパティ ) を設定する 複数行 複数列にまたがる子要素を作るためには Grid.RowSpan 属性および Grid.ColumnSpan 属性を指定する List 10 に Grid の利用例となる XAML コードを Movie 5 にその実行結果を示す <Window x:class="atmarkit07.panels.gridsample" xmlns=" xmlns:x=" -12-

13 Title="Grid" FontSize="16" Height="320" Width="480"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="*" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid> <Grid.RowDefinitions> <RowDefinition Height="50" /> <RowDefinition Height="50" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="150" /> <ColumnDefinition Width="150" /> <ColumnDefinition Width="150" /> </Grid.ColumnDefinitions> <Button Content=" 固定幅 " Background="#ffcccc" /> <Button Content="A" Background="#ccffcc" Grid.Column="1" /> <Button Content="B" Background="#ccccff" Grid.Column="2" /> <Button Content="190" Background="#ccffff" Grid.Row="1" /> <Button Content="190" Background="#ffccff" Grid.Row="1" Grid.Column="1" /> <Button Content="190" Background="#ffffcc" Grid.Row="1" Grid.Column="2" /> </Grid> <Grid Grid.Row="1"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="2*" /> <ColumnDefinition Width="3*" /> <ColumnDefinition Width="4*" /> </Grid.ColumnDefinitions> -13-

14 <Button Content=" 比率 " Background="#ffcccc" /> <Button Content="A" Background="#ccffcc" Grid.Column="1" /> <Button Content="B" Background="#ccccff" Grid.Column="2" /> <Button Content="2*" Background="#ccffff" Grid.Row="1" /> <Button Content="3*" Background="#ffccff" Grid.Row="1" Grid.Column="1" /> <Button Content="4*" Background="#ffffcc" Grid.Row="1" Grid.Column="2" /> </Grid> <Grid Grid.Row="2"> <Grid.RowDefinitions> <RowDefinition Height="auto" /> <RowDefinition Height="auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="auto" /> <ColumnDefinition Width="auto" /> <ColumnDefinition Width="auto" /> </Grid.ColumnDefinitions> <Button Content=" 自動 " Background="#ffcccc" /> <Button Content=" 長いテキスト " Background="#ccffcc" Grid.Column="1" /> <Button Content=" 短い " Background="#ccccff" Grid.Column="2" /> <Button Content="auto" Background="#ccffff" Grid.Row="1" /> <Button Content=" 短い " Background="#ffccff" Grid.Row="1" Grid.Column="1" /> <Button Content=" 長いテキスト " Background="#ffffcc" Grid.Row="1" Grid.Column="2" /> </Grid> </Grid> </Window> List 10: Grid の例 (XAML)

15 Movie 5: Grid の実行例 特に auto はフォント サイズの変更と相性がよい また 多言語対応によって文字幅が変化した場合にも自動的に対応できる Movie 6 に例を示そう この例では コントロール キーを押しながらマウス ホイールを回すとフォント サイズが変化するコードを記述している <Grid> 要素の行 列のサイズは auto を指定してあり フォント サイズの変化に 行 列のサイズが追従している Movie 6: フォント サイズの変更の例 場合によっては <Grid> 要素の行 列のサイズを動的に変更したい場合もあるだろう そういう場合 List 11 に示すように <Grid> 要素の子に <GridSplitter> 要素を配置する 実行結果は Movie 7 に示すようになる <Window x:class="atmarkit07.panels.splittersample" xmlns=" xmlns:x=" Title=" スプリッター " Height="300" Width="300" FontSize="20"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Button Content="A" Background="#ffcccc" /> <Button Content="B" Background="#ccffcc" Grid.Column="2"/> <Button Content="C" Background="#ccccff" Grid.Row="2" /> <Button Content="D" Background="#ccffff" Grid.Row="2" Grid.Column="2"/> <GridSplitter Grid.Row="1" Grid.ColumnSpan="3" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Center" /> <GridSplitter Grid.Column="1" Grid.RowSpan="3" Width="5" HorizontalAlignment="Center" VerticalAlignment="Stretch" /> </Grid> </Window> -15-

16 List 11: GridSplitter の例 (XAML) Movie 7: GridSplitter の実行例 ただし <GridSplitter> 要素を利用する場合 以下のような注意点がある <GridSplitter> 要素自体 <Grid> 要素のセルを 1 つ占有する そのため 一般的には <GridSplitter> 要素を配置するための行 列を auto 指定で作成しておく <GridSplitter> 要素は デフォルトの状態では幅も高さも 0 で不可視となる HorizontalAlignment 属性などを指定して 見えるサイズに調整する必要がある 特定の 1 行だけ列幅を変えたい というようなことは 1 つの <Grid> 要素内では行えない もしその必要があるなら <Grid> 要素を入れ子にして 内側の <Grid> 要素だけに <GridSplitter> 要素を追加するなどの工夫が必要になる そのほか そのほかにも いくつか Panel クラスの派生クラスがある ここでは 2 つのクラスを簡単に紹介しておこう ( いずれも System.Windows.Controls 名前空間 ) UniformGrid クラス : すべての行 列が同じサイズの単純な表形式でレイアウトを行う 柔軟性はないものの 描画の性能はよい VirtualizingPanel クラス : 子要素を仮想化する ( スクロールされるまで隠れていて見えない子要素を 実際に表示されるタイミングまで サイズ計測も配置も行わない ) ためのパネル 単体で利用するよりは 次回以降で説明する ListBox クラスなどの内部で利用する コラム パネルに関する補足 Z 順序 レイアウトの仕方によっては UI 要素が重なってしまう場合がある このとき 特に指定のない場合 後方で (XAML コード中の下の方で ) 定義された UI 要素が上に表示される この順序 ( 慣例的に Z 順序 (Z-order) と呼ばれる 横方向を X 縦方向を Y で表すことが多いため 前後関係を Z で表現する ) を明示的に指定するには UI 要素に Panel.ZIndex 添付プロパティを設定する この添付プロパティの値が大きいほど手前に表示されることになる レイアウト丸め WPF では UI 要素の位置を浮動小数点数で正確に位置を計算していて 自動レイアウトの結果 UI 要素や文字の描画位置が非整数ドットになる場合がある この際 デフォルトでは 補間処理によって UI 要素が非整数ドット位置にあるかのように描画を行う このような動作が好ましい場合ももちろんあるが 補間のせいで境界線や文字がにじんで見えるという問題もある そこで.NET Framework 4 では FrameworkElement クラスに UseLayoutRounding プロパティが追加され このプロパティを true に設定すれば 描画位置が整数ドットになるように位置の丸め処理を行ってくれるようになった -16-

17 次回は主にコントロールについて説明する 第 8 回 WPF の コントロール を学ぼう レイアウト用のパネルに続き 今回は ユーザー / アプリケーション間の対話を担う要素 いわゆるコントロールを中心として WPF の UI 要素について説明していく コントロール コントロールは ユーザーとの対話を担う要素で GUI アプリケーション開発の中心的存在といえる コントロールは マウスやキーボードなどのユーザー操作を受け取ったり 処理の途中経過や結果を適宜表示したりするために利用する コントロールの全体像 まず コントロールや 関連する UI 要素のクラス階層を見てみよう 主要なものを Figure 1 に示す Figure 1: WPF の主要な UI 要素 前回説明したとおり FrameworkElement クラス (System.Windows 名前空間 ) は WPF のほとんどの UI 要素の共通基底となる基礎的なクラスで Panel クラス (System.Windows.Controls 名前空間 ) は子要素と協調してレイアウトを決定するためのパネルの基底クラスである 一方 今回初出となる Decorator クラス (System.Windows.Controls 名前空間 ) は 子要素やその周辺に何らかの装飾を施すためのクラスで 例えば UI 要素の回りを枠線で囲ったり ビュレット (= 個条書き用の中点 ) を付けたりするために用いる -17-

18 そして Control クラス (System.Windows.Controls 名前空間 ) が 今回の主題であるコントロールの基底クラスとなる それではまず Control クラスをはじめ さまざまなコントロールの基底クラスとなるいくつかの主要なクラス (=Figure 1 で 青色の枠線で囲われているもの ) について説明していこう 主要な基底クラス Control クラス Control クラスはすべてのコントロールの基底となるクラスで Table 1 に示すようなメンバを持っている 機能外観設定フォント内容物のレイアウト決定フォーカス管理コントロール テンプレートマウス イベント Table 1: Control クラスの機能 メンバ Background BorderBrush BorderThickness Foreground FontFamily FontSize FontStretch FontStyle FontWeight HorizontalContentAlignment VerticalContentAlignment Padding IsTabStop TabIndex Template MouseDoubleClick PreviewMouseDoubleClick マウス イベントの各メンバはルーティング イベントである それ以外はすべてプロパティ 以下 何点か補足説明をしていこう 外観設定 Background プロパティ Foreground プロパティ および BorderBrush プロパティは それぞれ背景や前景 枠線の塗りつぶしを行うためのブラシとなっている 純色での塗りつぶしだけでなく 以下のようなブラシを利用することで グラデーションや画像を使った塗りつぶしも可能である SolidColorBrush: 純色で塗りつぶす LinearGradientBrush: 線形グラデーションで塗りつぶす -18-

19 RadialGradientBrush: 放射状グラデーションで塗りつぶす ImageBrush: 画像を使って塗りつぶす DrawingBrush: Drawing クラス (=2D 描画 ) を使って塗りつぶす VisualBrush: Visual クラス (=WPF の UI 要素の共通基底クラス ) を使って塗りつぶす 例えば DrawingBrush に対して <VideoDrawing> 要素を与えたり VisualBrush に対して <MediaElement> 要素を与えたりすることで コントロールの背景に動画を表示することも可能である SolidColorBrush の場合には RGB 値や色名からの変換が定義されていて XAML の属性構文を使って以下のような色指定が可能である <!-- # 6 ケタの 16 進数で RGB 指定 --> <TextBox Background="#0000ff" /> <!-- 色名からの変換が働く Colors クラスの静的メンバーとして定義されている --> <TextBox Background="Blue" /> <!-- SystemColors クラスの静的メンバーを参照することで システム色を利用可能 --> <TextBox Background="{x:Static SystemColors.ActiveCaptionBrush}" /> XAML の属性構文を使った SolidColorBrush の色指定のコード例 (XAML) どのような色名やシステム色が利用できるかは MSDN の Colors クラス (System.Windows.Media 名前空間 ) および SystemColors クラス (System.Windows 名前空間 ) のページを参照してほしい また LinearGradientBrush RadialGradientBrush および ImageBrush は Visual Studio や Expression Blend を使ってブラシの設定が可能である Movie 1 に Visual Studio を使ったブラシ設定の例を示す Movie 1: Visual Studio を使った背景ブラシの編集 フォント フォントに関しては ファミリ サイズ スタイル (= 標準 / 太字 / 斜体 / 打ち消し線付き / 下線付き ) 線の太さ 伸縮と 一通り設定可能になっている このうち フォント ファミリについて補足しておこう FontFamily プロパティに単にフォント名を指定した場合 システムにインストールされたフォントが利用される 当然 指定されたフォントがインストールされていない環境では そのフォントが適用されない ( 既定のフォントが使用される ) <!-- システムにインストールされたフォントを使う --> <!-- フォントがインストールされていない環境では適用されない --> <TextBlock Text=" テスト試作 " FontFamily="HGPGyoshotai" /> フォント ファミリ指定のコード例 (XAML) -19-

20 システムにフォントがインストールされていない場合を想定して フォント ファミリはカンマ区切りで複数指定可能である また どんな環境でも意図したとおりのフォントで表示できるように アプリケーションにフォントを埋め込むこともできる 手順としては まず フォントをアセンブリ リソース (=Visual Studio の [ プロパティ ] ウィンドウで [ ビルドアクション ] を Resource にしたもの ) としてアプリケーションに埋め込む そして XAML コード中では FontFamily="./#font name" というように # に続けてフォント名を記述する Figure 2 に フォントの埋め込みの例を示す Figure 2: フォントの埋め込みの例 ちなみに このサンプルで指定している たぬき油性マジック は商用利用可能なフリー フォント ただし 配布を自由に認めているフォントでも アプリケーションへ埋め込んでの配布は認めていない場合があるので ライセンスに注意が必要である ContentControl クラス ContentControl クラス (System.Windows.Controls 名前空間 ) は ボタンなどのように コンテンツを 1 つだけ持つコントロールの基底クラスである アプリケーション本体となることの多い Window クラスも ContentControl クラスから派生している コンテンツを表す Content プロパティは object 型になっていて 何でも格納することができる 格納した型によって 以下のように 異なる表示が行われる -20-

21 UIElement クラスの場合 そのまま UI 要素として表示が行われる (OnRender メソッドで描画を行う ) そのほかのクラスの場合 データ テンプレートが設定されていればテンプレートを使った表示が行われる ( 連載第 5 回を参照 ) データ テンプレートも設定されていない場合 ToString メソッドを使って文字列化された結果が表示される ContentControl クラスの派生クラスの中に複数の UI 要素を並べたい場合 まず <Grid> 要素などのパネルを置いて その中に UI 要素を並べる コンテンツへのテンプレート適用は ContentTemplate プロパティで明示的に指定するか 第 5 回で説明したように DataType プロパティを使った自動適用で行う HeaderedContentControl クラス Figure 3 に示すように <GroupBox> 要素や <Expander> 要素など 一部のコントロールはヘッダ情報とコンテンツを持っている このようなコントロールの基底となるのが HeaderedContentControl クラス (System.Windows.Controls 名前空間 ) である Figure 3: ヘッダとコンテンツを持つコントロールの例 ヘッダ情報を指定するための Header プロパティも Content プロパティと同様に object 型となっていて データ テンプレートや ToString メソッドを介した表示が行われる データ テンプレートを明示的に指定したい場合には HeaderTemplate プロパティを使って指定する ItemsControl クラス ItemsControl クラス (System.Windows.Controls 名前空間 ) は <ListBox> 要素などのように複数の項目を持つコントロールの基底クラスである ItemsControl クラスの内部構造は Figure 4 に示すようになっていて 以下のように カスタマイズできる個所が 3 つある item: <ItemsControl> 要素内に表示したい項目 ItemsSource プロパティを通して与える <ContentControl> 要素の Content プロパティと同様に データ テンプレートが適用可能で 明示 -21-

22 的にテンプレートを与えたい場合には ItemTemplate プロパティを用いる container: ItemsSource プロパティで与えた項目は直接表示されるわけではなく 1 段階コンテナを挟んで表示される コンテナは ListBox コントロールなら <ListBoxItem> 要素 ComboBox コントロールなら <ComboBoxItem> 要素というように ItemsControl クラスの派生クラスごとに決まっている コンテナを丸ごと差し替えることはできないが ItemContainerStyle プロパティを用いることでスタイルの変更が可能である item panel: 複数の項目のレイアウトを決定するためのパネル ItemsPanel プロパティで明示的に指定することで レイアウト方法を変えられる Figure 4: ItemsControl クラスの内部構造 List 1 に ItemsControl クラスのカスタマイズの例を Figure 5 にその表示結果を示す XAML <Window x:class="atmarkit08.itemscontrolsample" xmlns=" xmlns:x=" Title="ItemsControl サンプル " Height="150" Width="150"> <Grid> <ItemsControl ItemsSource="{Binding}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <CanvasItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemContainerStyle> <Style> -22-

23 <Setter Property="Canvas.Left" Value="{Binding X}" /> <Setter Property="Canvas.Top" Value="{Binding Y}" /> </Style> </ItemsControl.ItemContainerStyle> <ItemsControl.ItemTemplate> <DataTemplate> <Button Content="{Binding Text}" /> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </Grid> </Window> Visual Basic Me.DataContext = { New With {.Text = "a",.x = 20,.Y = 80 }, New With {.Text = "b",.x = 80,.Y = 80 }, New With {.Text = "c",.x = 80,.Y = 20 }, New With {.Text = "d",.x = 20,.Y = 20 } } Visual C# this.datacontext = new[] { new { Text = "a", X = 20, Y = 80 }, new { Text = "b", X = 80, Y = 80 }, new { Text = "c", X = 80, Y = 20 }, new { Text = "d", X = 20, Y = 20 }, }; List 1: ItemsControl クラスのカスタマイズの例 Figure 5: List 1 の表示結果 この例では ItemsPanel プロパティに <Canvas> 要素を指定することで 頒布図のようなレイアウトを行っている Canvas.Left 添付プロパティは <Canvas> 要素の直接の子要素に指定する必要があるため ItemTemplate プロパティに指定するデータ テンプレート内ではなく ItemContainerStyle プロパティに指定するスタイル内で設定しなければならない -23-

24 コレクション ビュー ItemsSource プロパティ経由で <ItemsControls> 要素に渡されたデータ ソースは Figure 6 に示すように 実際には間にコレクション ビュー (collection view) というものが挟まったうえで表示される コレクション ビューは データ ソースを変更せずに ビュー上でだけデータの整列やグループ化を行うためのものである Figure 6: コレクション ビュー コレクション ビューという言葉は 名称に ビュー という言葉が入っているのが尐し紛らわしいが いわゆる ビューとモデル のビュー ( 見た目に関する部分 ) のことではなく データベース用語のビュー (= 表示用にデータ ソースを整形したもの ) の意味合いで使われている ItemsControl クラスの ItemsSource プロパティに コレクション ビューを表す ICollectionView インターフェイス (System.ComponentModel 名前空間 ) のインスタンスを渡すと それがそのまま表示されるが ほかのコレクションを与えた場合には 内部的にコレクション ビューが作成され ラッピングされる ItemsControl クラスには ItemsSource プロパティのほかに Items プロパティというものもあるが こちらはこのコレクション ビューに対して直接要素の追加や読み出しを行う場合に利用する XAML コード中で明示的にコレクション ビューを作りたい場合 <CollectionViewSource> 要素 (System.Windows.Data 名前空間 ) を利用する List 2 にコレクション ビューの利用例を Movie 2-24-

25 にその実行結果を示す XAML <Window x:class="atmarkit08.collectionviewsourcesample" xmlns=" xmlns:x=" xmlns:cm="clr-namespace:system.componentmodel;assembly=windowsbase" xmlns:dat="clr-namespace:system.windows.data;assembly=presentationframework" Title="CollectionView サンプル " Height="500" Width="500"> <Window.Resources> <CollectionViewSource x:key="sorted" Source="{Binding}"> <CollectionViewSource.SortDescriptions> <cm:sortdescription PropertyName="Category" /> </CollectionViewSource.SortDescriptions> </CollectionViewSource> <CollectionViewSource x:key="grouped" Source="{Binding}"> <CollectionViewSource.GroupDescriptions> <dat:propertygroupdescription PropertyName="Category" /> </CollectionViewSource.GroupDescriptions> </CollectionViewSource> </Window.Resources> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="auto" /> <RowDefinition Height="*" /> <RowDefinition Height="auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <TextBlock Text=" 同じコレクション ビューを参照 " Grid.ColumnSpan="2" HorizontalAlignment="Center" /> <DataGrid ItemsSource="{Binding}" Grid.Row="1" Grid.Column="0" /> <DataGrid ItemsSource="{Binding}" Grid.Row="1" Grid.Column="1" /> <TextBlock Text="SortDescription 付き " Grid.Row="2" /> <DataGrid -25-

26 ItemsSource="{Binding Source={StaticResource Sorted}}" Grid.Row="3" Grid.Column="0" /> <TextBlock Text="GroupDescription 付き " Grid.Row="2" Grid.Column="1" /> <DataGrid ItemsSource="{Binding Source={StaticResource Grouped}}" Grid.Row="3" Grid.Column="1"> <DataGrid.GroupStyle> <GroupStyle /> </DataGrid.GroupStyle> </DataGrid> </Grid> </Window> Visual Basic Me.DataContext = { New With {.Name="Button",.Category=" ボタン " }, New With {.Name="CheckBox",.Category=" 選択 " }, New With {.Name="ComboBox",.Category=" 選択 " }, New With {.Name="TextBlock",.Category=" 文字表示 " }, New With {.Name="RadioButton",.Category=" 選択 " }, New With {.Name="RichTextBlock",.Category=" 文字表示 " }, New With {.Name="ScrollBar",.Category=" 表示 " }, New With {.Name="ToolTip",.Category=" 表示 " } } Visual C# this.datacontext = new[] { new { Name="Button", Category=" ボタン " }, new { Name="CheckBox", Category=" 選択 " }, new { Name="ComboBox", Category=" 選択 " }, new { Name="TextBlock", Category=" 文字表示 " }, new { Name="RadioButton", Category=" 選択 " }, new { Name="RichTextBlock", Category=" 文字表示 " }, new { Name="ScrollBar", Category=" 表示 " }, new { Name="ToolTip", Category=" 表示 " }, }; List 2: コレクション ビューの利用例 Movie 2: List 2 の実行結果 この例では 2 行 2 列で 4 つの <DataGrid> 要素を表示している 上の 2 つは同じデータ ソースを参照していて ( 内部的に生成されるコレクション ビューも同じものが共有される ) 片方での整列の結 -26-

27 果が他方にも反映される 下の 2 つの <DataGrid> 要素には それぞれ整列およびグループ化されたコレクション ビューを与えている HeaderedItemsControl クラス Figure 7 に示すように <MenuItem> 要素や <TreeViewItem> 要素など ヘッダ情報と複数の項目を持 っているものもあり このようなコントロールは HeaderedItemsControl クラス (System.Windows.Controls 名前空間 ) を基底クラスとしている Figure 7: ヘッダと複数の項目を持つコントロールの例 次のページでは WPF のコントロールを用途ごとに分類する コントロールを用途ごとに分類 今度は WPF が標準提供しているコントロールや関連する UI 要素を 用途ごとに分類して見ていこう 用途 : レイアウト 前回説明したパネル (= 複数の子要素と協調的にレイアウトを決定する UI 要素 ) 以外にも Table 2 に示すように レイアウトに関係する UI 要素がいくつかある 分類 UI 要素 説明 レイアウト Window StackPanel WrapPanel DockPanel ウィンドウ 前回参照 -27-

28 Grid Canvas VirtualizingStackPanel ScrollViewer コンテンツが指定サイズに収まらない場合にスクロール可能にする GroupBox グループを表すヘッダと枠線を表示する Expander コンテンツを折りたたんで表示 / 非表示を切り替える Viewbox コンテンツを指定サイズになるように拡大 / 縮小する TabControl 複数のパネルをタブで切り替える Separator GridSplitter メニューなどで使う区切り線 <Grid> 要素の行や列の幅 / 高さを調整するためのスプリッタ ResizeGrip ウィンドウのサイズを変更するためのつまみ レイアウト部品 ScrollBar Thumb スクロールバー スクロールバーのつまみなど ユーザーがドラッグできる部分 RepeatButton マウス ボタンを押し続けている間中クリック イベントが発生するボタン スクロールバーなどの部品として使う 装飾 Border BulletDecorator UI 要素の回りに枠線を表示する ビュレット (= 個条書き用の中点 ) を表示する Table 2: レイアウトに関係する UI 要素 System.Windows 名前空間に所属するクラス : Window System.Windows.Controls 名前空間に所属するクラス : StackPanel WrapPanel DockPanel Grid Canvas VirtualizingStackPanel ScrollViewer GroupBox Expander Viewbox TabControl Separator GridSplitter Border System.Windows.Controls.Primitives 名前空間に所属するクラス : ResizeGrip ScrollBar Thumb -28-

29 RepeatButton BulletDecorator ウィンドウ ウィンドウ (=<Window> 要素 ) も ContentControl クラスを継承する一種のレイアウト用コントロールである ウィンドウのサイズは <Windows> 要素に Width 属性および Height 属性を用いて明示的に指定するほかに SizeToContent 属性を用いてコンテンツのサイズに合わせることも可能である SizeToContent 属性に WidthAndHeight を指定することで タイトルバーや枠線の太さを気にすることなく コンテンツのサイズをぴったり指定できる ウィンドウでは 以下のような属性を指定することで ウィンドウの見た目や機能をいろいろとカスタマイズ可能である WindowStyle: タイトルなしのウィンドウや ダイアログ形式 (= 固定サイズ ) のウィンドウを作れる ResizeMode: リサイズ可能かどうかを指定する AllowsTransparency: ウィンドウの背景色を半透明にする際に 背後のウィンドウやデスクトップが透けて見えるようにするためには AllowsTransparency 属性に True を設定する必要がある 例えば List 3 に示すような XAML コードで 枠線なし リサイズ可能 半透明のウィンドウを作ることができる Figure 8 に実行結果を示す <Window x:class="atmarkit08.nonestylewindow" xmlns=" xmlns:x=" WindowStyle="None" ResizeMode="CanResizeWithGrip" AllowsTransparency="True" Background="# " SizeToContent="WidthAndHeight"> <Grid> <TextBlock FontSize="50"> 半透明ウィンドウ </TextBlock> </Grid> </Window> List 3: 枠線なし リサイズ可能 半透明のウィンドウ Figure 8 : List 3 の実行結果 この場合 ウィンドウの背後に Visual Studio の C# コード エディターが表示されている このようなウィンドウを作った場合 タイトルバーが存在しないため そのままではドラッグによるウ -29-

30 ィンドウの移動ができない ウィンドウの移動を可能にしたければ 以下のように マウス クリック イベントのハンドラに DragMove メソッドを呼び出すコードを記述する (C# の例 ) Visual Basic Visual C# this.mouseleftbuttondown += (sender, e) => { this.dragmove(); }; ウィンドウを閉じるのも コンテキスト メニューやキー入力イベントなどを使うといいだろう 例えば以下のようなコードで (C# の例 ) 任意のキーが入力されたときにウィンドウを閉じるようにできる Visual Basic Visual C# this.keydown += (sender, e) => { this.close(); }; 用途 : ユーザーとの対話 ボタン Table 3 にボタンに関連する UI 要素を示す UI 要素 ButtonBase Button ToggleButton Table 3: ボタン要素 ボタンの共通基底 通常のボタン 説明 CheckBox コントロールなどの オン / オフを切り替えられるコントロールの基底クラス 前節で レイアウト部品として紹介した RepeatButton コントロールも ButtonBase クラス (System.Windows.Controls.Primitives 名前空間 ) から派生している ButtonBase クラスの ClickMode プロパティを設定することで Click イベントが発生するタイミングを Release (= ボタンを押して離したとき ) Press (= ボタンを押したとき ) Hover (= ボタンの上にマウス カーソルを載せたとき ) の 3 つの中から選べる また Button クラスでは IsDefault プロパティに true を設定することで いわゆるデフォルト ボタン (=Windows フォームでいうところの AcceptButton [ Enter] キーを押したときに Click イベントが発生する ) に IsCancel プロパティに true を設定することでキャンセル ボタン (= 同 CancelButton [ Escape] キーを押したときに Click イベントが発生する ) にすることができる ToggleButton クラス (System.Windows.Controls.Primitives 名前空間 ) は オン / オフの 2 つの状態を表すクラスであるが IsThreeState プロパティが true の場合 オン / オフ / 未設定の 3 つの状態 (= IsChecked プロパティが false のときと null のときで異なる表示が行われる ) を表すことも可能である テキスト入力 -30-

31 Table 4 にテキスト入力に関連する UI 要素を示す TextBox UI 要素 RichTextBox PasswordBox Table 4: テキスト入力要素 通常のテキストボックス 説明 リッチ テキストを編集するためのテキストボックス パスワード用のテキストボックス 入力された文字列は伏せ字で表示され 内部的に暗号化される <TextBox> 要素および <RichTextBox> 要素では テキストボックス内で選択されている文字列に関する情報を SelectionStart プロパティ SelectionLength プロパティ および SelectedText プロパティを通して取得できる また AutoWordSelection プロパティに true を設定することで マウスでドラッグした際に単語単位で文字列選択されるよう 選択範囲が自動調整されるようになる <TextBox> 要素内で複数行のテキストを表示したい場合には TextWrapping プロパティに Wrap を設定する 複数行テキストを表示する際 MinLines プロパティおよび MaxLines プロパティを設定しておくと 実際の行数が変わる場合にも表示上のサイズを固定することができる また [Enter] キーで改行を入力したい場合には AcceptsReturn プロパティに true を設定する また WPF にはスペルチェック機能があり <TextBox> 要素や <RichTextBox> 要素の SpellCheck.IsEnabled 添付プロパティに true を設定することで スペルチェックが働くようになる コラム UI 要素上の文字がにじんで見える場合の対処法 (WPF 4 以降 ) WPF アプリケーションでは UI 要素の位置などを浮動小数点精度で計算し 非整数ドットになった場合には補間処理を行っている この挙動は アニメーション時に滑らかな表示ができるという利点はあるものの 動きがない場合でフォント サイズが小さいときに文字がにじんで見えるという問題があった そこで WPF 4 では TextOptions クラス (System.Windows.Media 名前空間 ) で定義された添付プロパティを用いて アニメーションの有無をヒントとして与えたり ClearType フォント表示を行うかどうかを指定したりすることで文字の描画方法を制御できるようになった そのほかの対話要素 Table 5 にそのほかの対話的 UI 要素を示す 分類 UI 要素説明 データ 選択 DataGrid グリッド状にデータを表示 編集 Calendar カレンダ DatePicker 日付を選択 CheckBox チェックボックス RadioButton ラジオボタン パネル内では 1 つだけがチェック可能 *1-31-

32 ComboBox ListBox TreeView Slider Menu メニュー ContextMenu ToolBar TextBlock Label ToolTip 情報表示 Popup ProgressBar StatusBar NavigationWindow Frame ナビゲーション Page Hyperlink Table 5: そのほかの対話的 UI 要素 コンボボックス いわゆるドロップダウン形式で項目を選択する リストボックス ツリー形式で項目を表示 選択する つまみをスクロールすることで値を変化させる メニュー 右クリックで表示するコンテキスト メニュー ツールバー テキストを表示 テキストボックスなどに付けるラベル ショートカット キーを設定可能 マウス カーソルを重ねたときにポップアップ表示されるツールチップ *2 ポップアップ ツールチップと異なり 表示 / 非表示の切り替えは IsOpen プロパティを用いて明示的に行う 処理の進捗 ( しんちょく ) 状況を表示する ステータスバー 戻る 進む などの機能を有するウィンドウ ページを格納するためのフレーム ページ ページを遷移するためのリンク *1 <RadioBox> 要素は GroupName プロパティを指定することでグループ化できる 同一のグループ内でチェックできるのは 1 つだけとなる 特に GroupName プロパティを指定しなかった場合には 同一のパネル (=Panel クラスを継承する <Grid> などの要素 ) 内でグループ化される *2 ツールチップでは ToolTipService クラス (System.Windows.Controls 名前空間 ) で定義された添付プロパティを用いて 表示する位置や時間などの設定が行える 用途 : そのほか Table 6 にそのほかのコントロールや関連する UI 要素を示す 分類 UI 要素説明 メディア ドキュメント Image MediaElement DocumentViewer FlowDocumentPageViewer FlowDocumentReader 画像を表示する 動画などを表示する ドキュメント表示 -32-

33 デジタル インク FlowDocumentScrollViewer StickyNoteControl InkCanvas Table 6: そのほかのコントロールや関連する UI 要素 付せんのように 付帯情報を表示する 次回は基本図形や 2D 描画など グラフィック関係について説明していく マウス タッチ スタイラスなどの操作でストロークを描画するための領域 第 9 回 WPF の グラフィックス を学ぼう 第 1 回で説明したように WPF では コントロール メディア 文書など さまざまな UI 要素を統一的に扱うことができる メディアだけを見ても ビットマップ画像 ベクタ グラフィックス 3D グラフィックスなど さまざまなメディアを対象としている 今回は このようなメディア関連の UI 要素と ブラシ 変形 ビットマップ効果などグラフィックスに関連する項目について説明していく メディア関連要素 WPF では 以下のようなメディアを統一的に取り扱える ベクタ グラフィックス (= 幾何学図形 ) ビットマップ画像 動画 / 音声 グリフ (= 文字の描画 ) 3D グラフィックス 各メディアの話に入る前に 1 つ補足をしておこう 補足 :FrameworkElement 派生クラスと Drawing 派生クラス WPF には FrameworkElement クラス (System.Windows 名前空間 ) から派生するものと Drawing クラス (System.Windows.Media 名前空間 ) から派生するものの 2 系統のクラス群が存在する FrameworkElement クラスは UI 要素として利用する分には非常に便利なレイアウトやスタイルなどの機能を有するが これらの機能は単に描画を行いたいだけの場合には機能過多で 性能上の問題となることもある そこで レイアウトなどの機能を持たず 描画機能だけを提供する軽量にベクタ グラフィックスを描画するクラスとして提供されているのが Drawing クラスである Table 1 に示すように 3D グラフィックス以外は FrameworkElement クラスから派生するものとほぼ 1 対 1 に Drawing クラスから派生するクラスが存在する FrameworkElement 幾何学図形 Shape GeometryDrawing 画像 Image ImageDrawing Drawing -33-

34 FrameworkElement 動画 / 音声 MediaElement VideoDrawing グリフ Glyphs GlyphRunDrawing 3D Viewport3D ( なし ) Drawing Table 1: メディア関連の FrawemorkElement 派生クラスと Drawing 派生クラス 直接利用する機会が多いのは FrameworkElement から派生する側のクラス群だろう 一方で Drawing クラスは以下のクラスで利用する DrawingImage クラス : Drawing オブジェクトを画像として利用 DrawingBrush クラス : Drawing オブジェクトをブラシ ( 背景の塗りつぶしなど ) として利用 DrawingVisual クラス : 軽量な Visual オブジェクト (=WPF の UI 要素の共通基底クラスのオブジェクト ) を生成する また Drawing クラスは Freezable クラス ( 第 7 回のコラム参照 ) から派生しているため 固定化 (frozen) してあればマルチスレッドで利用可能である グラフィックス関係のオブジェクトを複数のスレッドから参照するなら Drawing クラスを使う必要がある 差し当たって Drawing クラスから派生するクラス群は高速な描画が必要な際に使う とだけ覚えておけばいいだろう 以下の各メディアの解説では 利用頻度の高い FrameworkElement クラスから派生する UI 要素についてのみ説明する メディア : 幾何学図形 (= ベクタ グラフィックス ) Shape クラス (System.Windows.Shapes 名前空間 ) から派生する UI 要素によって 四角形 (= 矩形 ) やだ円などの幾何学図形を描画できる ( 以下 これらの UI 要素を総称して Shape 要素 と呼ぶ ) WPF ではこれらの幾何学図形はベクタ グラフィックスとして描画されるため Figure 1 に示すように 拡大しても荒くならない -34-

35 Figure 1: Shape 要素の拡大 この例では <Ellipse>( だ円 ) 要素を 2/5/10/30 倍に拡大している Shape 要素には以下のような UI 要素が存在する ( いずれも System.Windows.Shapes 名前空間 ) Rectangle: 四角形を描画する 角の丸い四角形も描画可能 Ellipse: だ円を描画する Line: 2 点間をつなぐ線分を描画する Polygon: 与えられた複数の頂点をつなぐ多角形を描画する Polyline: 与えられた複数の頂点をつなぐ折れ線を描画する Path: 後述する ジオメトリ を使って任意の幾何学図形を描画する 注意点として <Rectangle> 要素や <Ellipse> 要素では 斜め向きの図形は作れない ( 辺や長軸 / 短軸が x 軸 /y 軸と平行なものだけを作れる ) 斜め向きにしたければ さらに 後述する変形 (= RenderTransform プロパティなど ) を用いて回転処理を掛ける 塗りつぶしと枠線 すべての Shape 要素に共通して 塗りつぶしと枠線の描画方法を設定できる Fill プロパティによって塗りつぶしに使うブラシを Stroke プロパティによって枠線に使うブラシを指定する また StrokeThickness プロパティのように Stroke から始まるいくつかのプロパティを用いて枠線の表示方法を変更できる 枠線の変更の例を Movie 1 に示す Movie 1: Shape 要素の枠線の設定 <Polyline> 要素 /<Polygon> 要素の塗りつぶし判定 <Polyline> 要素および <Polygon> 要素では 線の引き方によっては図形の内側 / 外側 (= 塗りつぶすべき領域かどうか ) の判定に迷う場合がある 以下のような XAML コードによって描ける五芒星 ( ごぼうせい ) がその例の 1 つとなる <Polygon Points=" " Stroke="Black" Fill="LightBlue" /> 五芒星 ( ごぼうせい ) を描く XAML コード このような場合に <Polyline> 要素および <Polygon> 要素には FillRule というプロパティがあり Figure 2 に示すような判定方法が存在する ある点を始点として半直線を伸ばしたときに 図形の枠線とその半直線が何回交わっているかによって図形の内側 / 外側を判定する FillRule プロパティが EvenOdd の場合には交点が奇数のときだけを NoneZero の場合には 0 回以上のときを内側と見なす -35-

36 Figure 2: <Polygon> 要素の FillRule プロパティ <Path> 要素とジオメトリ <Path> 要素の場合 任意形状の図形を描けるが この形状に関する情報を WPF では ジオメトリ と呼び Geometry クラス (System.Windows.Media 名前空間 ) によって表現する ( 詳細は後述 ) <Path> 要素では Data プロパティにジオメトリを指定する XAML コード中でジオメトリを簡潔に記述するためのパス マークアップ構文と呼ばれるミニ言語があり 多くの場合 このミニ言語を利用して <Path> 要素の Data プロパティを記述する ( パス マークアップ構文に関しても後述 ) 例えば 以下のような XAML コードによって Figure 3 に示すような図形を描くことができる <Path Stroke="Black" Fill="Gray" Data="M 10,100 C 10, , ,100" /> <Path> 要素の Data プロパティに対する パス マークアップ構文を用いたジオメトリの指定 (XAML) Figure 3: パス マークアップ構文を用いたジオメトリの指定の例 メディア : 画像 画像の表示には <Image> 要素 (System.Windows.Controls) を利用する 画像自体は ImageSource クラス (System.Windows.Media 名前空間 ) のオブジェクトで表現され これを <Image> 要素の Source プロパティに与えることでさまざまな画像を画面上に表示する ImageSource クラスから派生するクラスには 大きく分けると以下の 2 つがある -36-

37 DrawingImage(System.Windows.Media 名前空間 ): Drawing オブジェクトを画像として扱う 主な用途としては GeometryDrawing オブジェクトを与えることでベクタ グラフィックスを表現する BitmapSource(System.Windows.Media.Imaging 名前空間 ): ビットマップ画像 後述するように さらに細かく分かれる また D3DImage クラス (System.Windows.Interop 名前空間 ) によって Direct3D のサーフェスを WPF ウィンドウ中に埋め込むこともできる ビットマップ画像 BitmapSource クラスから派生するクラスがいくつかあり ( いずれも System.Windows.Media.Imaging 名前空間 ) 用途によって使い分ける BitmapImage: ファイルやリソースからの画像の読み込みを想定 WriteableBitmap: プログラム中で動的に画素の読み書きができるビットマップ RenderTargetBitmap: 任意の Visual オブジェクト (=WPF の UI 要素の共通基底クラスのオブジェクト ) をレンダリングしてビットマップ化するために利用する また BitmapSource クラスの Create 静的メソッドを用いて バイト配列から画像を生成できる 画像ファイルの読み込み XAML コード中では 以下のように <Image> 要素の Source プロパティに画像のパスを直接指定できる <Image Source="logo.png" /> <Image> 要素の Source プロパティに対する 画像のパスの指定 (XAML) 絶対パスを用いて画像の読み込み元を詳細に指定するには Pack URI という記法を用いる 一方 上記の例のように相対パスを用いた場合には Figure 4 に示すように アセンブリ リソース ( 連載第 4 回参照 ) から画像が読み込まれる -37-

38 Figure 4: <Image> 要素の Source プロパティに相対パスを指定する例 扱える画像の形式 WPF では標準で ビットマップ (.bmp) アイコン (.ico) JPEG PNG GIF TIFF および HD Photo( 旧称 Windows Media Photo 現在は JPEG XR として JPEG 規格の一部となっている ) 形式に対応していて これらの形式なら 前述の <Image> 要素の Source プロパティに対するパス指定で読み込むことができる また BitmapEncoder クラスおよび BitmapDecoder クラスや それらから派生する各種 XxxBitmapEncoder/XxxBitmapDecoder クラス ( いずれも System.Windows.Media.Imaging 名前空間 ) を用いることで 明示的に画像の読み込み / 保存が行える 例えば JPEG 形式で画像を保存したければ JpegBitmapEncoder/JpegBitmapDecoder クラスを利用する メディア : 動画 / 音声 <MediaElement> 要素 (System.Windows.Controls 名前空間 ) を用いて動画や音声などのメディアを再生できる WPF の <MediaElement> 要素は Windows Media Player 10 でサポートされているすべての種類のメディアをサポートする <MediaElement> 要素を使ったメディア再生は非常に簡単で 以下のように Source プロパティに再生したい動画や音声などのメディアの URI を指定するだけでよい <MediaElement Source="demo.wmv" /> <MediaElement> 要素の Source プロパティに対する 動画の URI の指定 (XAML) ただし 相対 URI を指定した場合の挙動が <Image> 要素の Source プロパティとは異なる点に注意が必要である <MediaElement> 要素の Source プロパティに相対 URI を指定した場合 ( アセンブリ リソースではなく ) アプリケーションの実行可能形式ファイル (=.EXE ファイル ) からの相対パスで外部ファイルを参照する メディア : グリフ <Glyphs> 要素 (System.Windows.Documents 名前空間 ) によって 低水準な文字描画を行うことができる <TextBlock> 要素などと比べて記述が煩雑になる半面 細やかな描画制御が行える 日本語環境では 縦書きの文字描画を正しく行うために <Glyphs> 要素を用いることが多い メディア :3D グラフィックス <Viewport3D> 要素 (System.Windows.Controls 名前空間 ) によって 3D グラフィックスを WPF ウィンドウ中に埋め込むことができる さまざまな UI 要素を統一的に扱えるのが WPF の強みで Movie 2 に示すように 3D グラフィックスの中にコントロールを描画することも可能である -38-

39 Movie 2: 3D グラフィックス中にコントロールを表示する例 ただし 3D グラフィックスといっても ( ゲーム用の開発基盤である )Direct3D や XNA の置き換えを狙ったものではないので注意が必要である まず ツールの問題がある WPF 自身は 3D グラフィックスを表示する能力を持っているが Visual Studio や Expression Blend などのツールが 3D CAD 的な編集能力を持っているわけではない 一般的な 3D CAD ツール ( 例 :AutoCAD) や 3D CG ツール ( 例 :3ds Max) で編集した 3D モデルを XAML 形式にエクスポートしたり変換を掛けたりして WPF に取り込む必要がある また WPF は イベント駆動が前提 すなわち 何かイベントがあるまで画面を再描画しないという前提の下でパフォーマンスが最適化されている ゲームのように 高頻度で再描画を行うようなものには適していない 以上 メディア関連要素について説明した 次のページでは ブラシ 変形 ビットマップ効果などグラフィックスに関連する項目について説明する グラフィックス関連機能 ジオメトリ <Path> 要素の説明でも尐し触れたが WPF では ジオメトリ (= 形状に関する情報 ) を Geometry クラスから派生するクラス群 ( いずれも System.Windows.Media 名前空間 ) によって表現する ジオメトリは 前述の <Path> 要素のほかに 以下のような用途で用いる クリップ : UIElement クラスから派生した UI 要素の Clip プロパティにジオメトリを与えることで 要素を任意形状にくりぬいて 部分的に表示できる アニメーション : DoubleAnimationUsingPath クラス (System.Windows.Media.Animation 名前空間 ) を用いることで PathGeometry オブジェクトに沿ったアニメーションが実行できる 頻出形状のジオメトリ Shape クラスから派生する UI 要素に <Rectangle> 要素や <Ellipse> 要素があるのと同様に ジオメトリでも 以下のように 頻出するものは専用のクラスが定義されている RectangleGeometry: 四角形 EllipseGeometry: だ円 LineGeometry: 線分 任意形状のジオメトリ PathGeometry クラスおよび StreamGeometry クラスでは 直線 円弧 ベジェ曲線 2 次ベジェ曲線などを組み合わせて任意の形状を描ける データ バインディングやアニメーションが必要なら前者の PathGeometry を 不要なら後者の StreamGeometry を利用する ( 値の変更を想定しない分 後者の方が軽量 ) -39-

40 XAML コード中で <Path> 要素の Data プロパティにパス マークアップ構文を記述すると StreamGeometry オブジェクトが生成される また C# などのプログラム コード中でパス マークアップ構文を利用したい場合 以下のように Parse 静的メソッドのパラメータに文字列として与える Geometry クラスの Parse 静的メソッド : StreamGeometry オブジェクトを生成する PathFigureCollection クラスの Parse 静的メソッド : PathGeometry クラスの Figure プロパティで利用する PathFigureCollection オブジェクトを生成する ジオメトリの合成 GeometryGroup クラスを使うと 複数のジオメトリを 1 つにまとめられる ジオメトリが重なっている部分に関しては <Polygon> 要素の塗りつぶしと同様に FillRule プロパティによって 2 種類の塗りつぶし方法 ( すべて塗りつぶすか 奇数回重なっている部分のみを塗りつぶすか ) が選択できる また CombinedGeometry クラスを用いて Figure 5 に示すような 4 種類の合成方法 (Exclude/Union /Intersect/Xor) で 2 つのジオメトリを合成できる Figure 5: CombinedGeometory クラスを使ったジオメトリの合成 ブラシ <Shape> 要素の塗りつぶし (=Fill プロパティ ) や枠線 (=Stroke プロパティ ) コントロールの背景 (=Background プロパティ ) や前景 (=Foreground プロパティ ) などを見てのとおり UI 要素はブラシを使って描画される WPF におけるブラシは Brush クラス (System.Windows.Media 名前空間 ) から派生するクラス群で表現され さまざまな種類が存在する 前回との重複になるが 主要なものを再度挙げておこう ( いずれも System.Windows.Media 名前空間 ) SolidColorBrush: 純色で塗りつぶす -40-

41 LinearGradientBrush: 線形グラデーションで塗りつぶす RadialGradientBrush: 放射状グラデーションで塗りつぶす ImageBrush: 画像を使って塗りつぶす DrawingBrush: Drawing オブジェクト (=2D 描画 ) を使って塗りつぶす VisualBrush: Visual オブジェクト (=WPF の UI 要素の共通基底クラス ) を使って塗りつぶす BitmapCacheBrush: 挙動としては VisualBrush と似ているが.NET Framework 4 から導入されたビットマップ キャッシュの仕組みを使って描画を高速化したもの 今回のこれまでの説明の後であらためて見てみると ほぼ何でもブラシ化できてしまうことが分かるだろう 変形 WPF の各種 UI 要素は Transform クラス (System.Windows.Media 名前空間 ) を使って回転や拡大などの変形を掛けることができる 変形の指定先には以下の 2 つのものがある UIElement クラスの RenderTransform プロパティ : 表示結果だけを変形する ( レイアウト上は変形前の位置が使われる ) FrameworkElement クラスの LayoutTransform プロパティ : レイアウトの段階で変形結果が反映される RenderTransform プロパティの方がパフォーマンスがよいため 可能な限りはこちらを利用するべきである WPF で利用可能な変形には以下のような種類がある ( いずれも Transform クラスから派生する System.Windows.Media 名前空間のクラス ) TranslateTransform: 平行移動 ScaleTransform: 拡大 / 縮小 SkewTransform: 傾斜 RotateTransform: 回転 TransformGroup: 複数の変換を組み合わせる MatrixTransform: 変形に使う行列を直接与える 拡大 / 縮小は x 軸もしくは y 軸に沿ったものとなる それ以外の向きへの拡大 / 縮小は 回転との組み合わせで表現する また 傾斜というのは x 軸もしくは y 軸に沿って UI 要素を斜めにゆがませる変換のことをいう 拡大 / 縮小 傾斜 回転の例を Figure 6 に示す -41-

42 Figure 6: 拡大 / 縮小 傾斜 回転の例 これらはすべて アフィン変換 (affine transform: affine は 類似 を表すラテン語を起源とする言葉 ) と呼ばれ 行列を使って表現できることが知られている ( すなわち WPF で利用可能な変換は 行列を使って表現できる変換ということになる ) 行列に関する数学的な知識があれば 所望の変形に対応する行列を直接計算可能である このような場合に利用するのが MatrixTransform クラスである ビットマップ効果 UIElement クラスから派生した UI 要素の Effect プロパティに対して Effect クラス (System.Windows.Media.Effects 名前空間 ) のオブジェクトを与えることで ぼかしや影付けなど ピクセル単位の処理が必要なビットマップ効果を掛けることができる ビットマップ効果として WPF 標準で用意されているのは以下の 2 つである ( いずれも System.Windows.Media.Effects 名前空間 ) BlurEffect: ぼかし効果 DropShadowEffect: 影付け効果 これ以外に ピクセル シェーダ (=GPU 上でピクセル処理を行う機能 ) を使うことで任意のビットマップ効果を実現できる ShaderEffect クラスが存在する ピクセル シェーダにより任意のビットマップ効果を得られるといっても ピクセル シェーダを利用するためには (C# などの汎用プログラミング言語ではなく ) 専用の言語 (= シェーダ言語 ) を利用する必要がある プログラミング言語に高級言語 (= 人の直感に近い言語 ) と機械語 (=CPU が直接読める言語 ) があるように シェーダ言語にも高級言語 ( 有名なものとしては HLSL や Cg と呼ばれる言語がある ) と機械語 (=GPU が直接読める言語 ) がある WPF では 機械語化されたシェーダ言語しか読むことができず 高級言語から機械語へのコンパイルは事前に行っておく必要がある ( そのため 別途 DirectX SDK などが必要となる ) 従って ShaderEffect クラスの利用は尐々ハードルが高いが 幸いなことに さまざまなピクセル シェーダ効果をライブラリとして提供しているものがある ( 下記のリンク先を参照 ) Windows Presentation Foundation Pixel Shader Effects Library( 英語 ) また 参考までに C# コードからピクセル シェーダを生成するためのライブラリも紹介しておこう -42-

43 Bling UI Toolkit: C# ベースの画像関連ライブラリ C# コードからピクセル シェーダのコードを生成する機能を含む WPF Meta-Effects: C# 4.0 の式ツリーからピクセル シェーダのコードを生成するライブラリ コラム ビットマップ効果における.NET Framework 3.5 と 4 の違い.NET Framework 3.5 以前はビットマップ効果に BitmapEffect クラス (System.Windows.Media.Effects 名前空間 ) を利用していた (.NET Framework 4 から Effect クラス導入されたことで 今後の利用は非推奨となっている ) 両者の違いは GPU によるハードウェア アクセラレーションの有無にあり (BitmapEffect クラスはソフトウェア処理 Effect クラスはハードウェア処理 ) Effect クラスの方がよりよいパフォーマンスが得られる コラム 変形やビットマップ効果が適用された UI 要素のクリックについて 変形 (=Transform クラス ) やビットマップ効果 (=Effect クラス ) を利用する際 見た目だけでなく ヒット テスト (=UI 要素がクリックされたかの判定など ) にもきっちり影響がおよび 見えているとおりにクリック可能である 今回の解説で使用したサンプル コードは下記のリンク先からダウンロードできる 第 9 回のサンプル コード (atmarkit09.zip) のダウンロード 次回はアニメーションについて説明する

WPFの初歩の初歩

WPFの初歩の初歩 WPF の初歩の初歩 うつせみ ( 虚蝉 ) 本日のお品書き XAML について XAML って? (Extensible Application Markup Language) XML をベースとしたマークアップ言語 デザインとロジックが分離デザイナとコーダーの分業が可能に XAML を見てみよう どちらも同じものです (Button) XAML C#

More information

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

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

More information

グラフィックス 目次

グラフィックス 目次 WPF チュートリアル WPF デザイナーに依るサイズ変更可能なアプリケーションの作成 Grid コンテナーコントロールと共に GridSplitter コントロールを使用する事に依り 実行時にユーザーに依ってサイズを変更出来るウィンドウレイアウトを作成出来る 例えば 領域に分割されて居る UI を持つアプリケーションで ユーザーが分割線をドラッグする事に依り より多くの内容を見る必要が有る領域を大きくする事が出来る

More information

XAML Do-It-Yourself シリーズ 第 11 回 2D グラフゖックス -1-

XAML Do-It-Yourself シリーズ 第 11 回 2D グラフゖックス -1- XAML Do-It-Yourself シリーズ 第 11 回 2D グラフゖックス -1- XAML Do-It-Yourself 第 11 回 2D グラフゖックス XAML Do-It-Yourself 第 11 回は 2D グラフゖックスについて学習します XAML を使って作成する WPF ゕプリケーションでは 従来の Windows フォームゕプリケーションと 比較して 2D および 3D

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション グレープシテゖ株式会社 八巻雄哉 .NET Framework 3.0 で追加された Windows ゕプリケーションのための GUI サブシステム 2 Windows GDI User Direct3D OpenGL DirectShow 2D 2D 2D 3D ビデオ ビットマップ フォント GUI 3 Windows WPF 2D 3D ビデオ ビットマップフォント GUI 4 うちの業務ゕプリでは

More information

Sparkline for WPF

Sparkline for WPF 2018.04.11 更新 グレープシティ株式会社 目次 Sparkline for WPF の概要 2 WPF Edition のヘルプ 2 主要な機能 2 クイックスタート :Sparkline for WPF 2-4 機能 4 軸 4 日付軸 4-5 データ連結 5 スパークラインのタイプ 5-7 スパークラインタイプの設定 7 マーカー 7-9 マーカーの色のカスタマイズ 9-10 タスク別ヘルプ

More information

XAML Do-It-Yourself 第 3 回ベントとトリガー XML Do-It-Yourself 第 3 回目は ベント処理とトリガーについて学習します Windows フォームゕプリケーションでは たとえば ボタンが押された というベントに対応する処理 ( ベントハンドラー ) を記述する

XAML Do-It-Yourself 第 3 回ベントとトリガー XML Do-It-Yourself 第 3 回目は ベント処理とトリガーについて学習します Windows フォームゕプリケーションでは たとえば ボタンが押された というベントに対応する処理 ( ベントハンドラー ) を記述する XAML Do-It-Yourself シリーズ 第 3 回ベントとトリガー -1- XAML Do-It-Yourself 第 3 回ベントとトリガー XML Do-It-Yourself 第 3 回目は ベント処理とトリガーについて学習します Windows フォームゕプリケーションでは たとえば ボタンが押された というベントに対応する処理 ( ベントハンドラー ) を記述することで ゕプリケーションのユーザーンターフェスを実現していました

More information

Windows Presentation Foundation 入門 Ver.1.0. 01-01 YKSoftware Windows Presentation Foundation 入門 目次 目次 1 はじめに... 1.1 目的... 1. 注意... 1. 開発環境... WPF が提供するコントロール....1 WPF の主要なサブシステム... レイアウトに関するコントロール....1

More information

Carousel for WPF/Silverlight

Carousel for WPF/Silverlight 2018.04.10 更新 グレープシティ株式会社 目次 製品の概要 2 ComponentOne for / のヘルプ 2 主な特長 3 クイックスタート 4 手順 1: アプリケーションの作成 4-5 手順 2: アプリケーションへのコンテンツの追加 5-8 手順 3: アプリケーションの実行 8 Carousel for / の使い方 9 C1CarouselPanel の使用 9-10 カルーセルのカスタマイズ

More information

C#の基本

C#の基本 C# の基本 ~ 開発環境の使い方 ~ C# とは プログラミング言語のひとつであり C C++ Java 等に並ぶ代表的な言語の一つである 容易に GUI( グラフィックやボタンとの連携ができる ) プログラミングが可能である メモリ管理等の煩雑な操作が必要なく 比較的初心者向きの言語である C# の利点 C C++ に比べて メモリ管理が必要ない GUIが作りやすい Javaに比べて コードの制限が少ない

More information

グラフィックス 目次

グラフィックス 目次 WPF チュートリアル WPF の概要 此のチュートリアルでは 殆どの Windows Presentation Foundation(WPF) アプリケーションに共通の要素を含む WPF アプリケーションの開発の概要に付いて説明する 此の様な共通の要素には Extensible Application Markup Language(() マークアップ 分離コード アプリケーション定義 コントロール

More information

Visual Studio Do-It-Yourself 第 3 回コントロール 今回は Windows ゕプリケーションのユーザーンターフェスを作成する際に使う基本的なコントロ ールについて学びます ここでは 次のことを学習します 主要なコントロールとその機能 XAML を使ったコントロールの配置

Visual Studio Do-It-Yourself 第 3 回コントロール 今回は Windows ゕプリケーションのユーザーンターフェスを作成する際に使う基本的なコントロ ールについて学びます ここでは 次のことを学習します 主要なコントロールとその機能 XAML を使ったコントロールの配置 Visual Studio Do-It-Yourself シリーズ 第 3 回コントロール -1- Visual Studio Do-It-Yourself 第 3 回コントロール 今回は Windows ゕプリケーションのユーザーンターフェスを作成する際に使う基本的なコントロ ールについて学びます ここでは 次のことを学習します 主要なコントロールとその機能 XAML を使ったコントロールの配置

More information

<907D945D F D C789C195CF8D5888EA97978CF68A4A97702E786C7378>

<907D945D F D C789C195CF8D5888EA97978CF68A4A97702E786C7378> 改善機能 ファイル ファイル出力 範囲印刷すべて印刷編集貼り付け 選択コマンド 図形編集 図形移動 / 複写図形複写図形移動 ( 縦横変倍 )/ 図形複写 ( 縦横変倍 ) ミラー編集 図脳 RAID17/RO17から図脳 RAID18/RO18への改善機能は下表をご覧ください = 図脳 RAIDRO18のみ O=オプションプラグイン時に追加機能 全図面 DF 形式 対象とする図面を一括でON OFFできるようになりました

More information

SharpShooter Reports.WPF 基本的な使い方 Last modified on: November 15, 2012 本ドキュメント内のスクリーンショットは英語表記ですが SharpShooter Reports JP( 日本語版 ) では日本語で表示されます

SharpShooter Reports.WPF 基本的な使い方 Last modified on: November 15, 2012 本ドキュメント内のスクリーンショットは英語表記ですが SharpShooter Reports JP( 日本語版 ) では日本語で表示されます SharpShooter Reports.WPF 基本的な使い方 Last modified on: November 15, 2012 本ドキュメント内のスクリーンショットは英語表記ですが SharpShooter Reports JP( 日本語版 ) では日本語で表示されます 目次 はじめに... 3 システムの必要条件... 3 ライセンス認証... 3 アクティベーション... 5 開発...

More information

目次 更新履歴... 1 画面設計書の目的... 3 必要な内容... 3 画面一覧... 4 必要な内容... 4 画面遷移... 5 画面レイアウト... 6 入力パラメータ... 7 必要な内容... 7 項目定義... 8 必要な内容... 8 部品の種類... 9 ( 参考 ) 部品指定と

目次 更新履歴... 1 画面設計書の目的... 3 必要な内容... 3 画面一覧... 4 必要な内容... 4 画面遷移... 5 画面レイアウト... 6 入力パラメータ... 7 必要な内容... 7 項目定義... 8 必要な内容... 8 部品の種類... 9 ( 参考 ) 部品指定と 画面設計書の作成 作成日 : 2015/06/30 作成者 : 西村 更新履歴 更新日 更新 作業者 2015/06/30 新規作成 ( 仮 ) 西村 2015/11/09 部品の種類 にカラーピッカーとグラフを追加 コンボボックスの HTML の説明の 西村 追加 2017/12/01 公開用の体裁調整 西村 1 目次 更新履歴... 1 画面設計書の目的... 3 必要な内容... 3 画面一覧...

More information

グラフィックス 目次

グラフィックス 目次 WPF チュートリアル Microsoft Expression Blend を使用してボタンを作成する 此のチュートリアルでは WPF のカスタマイズされたボタンを Microsoft Expression Blend を使用して作成する手順に付いて説明する Microsoft Expression Blend の具体的な動作は Extensible Application Markup Language(XAML)

More information

200_CAD(画面回りの機能)の基本操作

200_CAD(画面回りの機能)の基本操作 CAD( 画面回りの機能 ) の 基本操作 CAD の画面回りの機能を解説しています 解説内容がオプションプログラムの説明である場合があります ご了承ください 画面の構成 [CAD] の画面構成を確認しましょう メッセージバー 次の操作をナビゲートするメッセージが表示されます 左のバーは 現在のメモリー使用量を表示しています ( 安全に作業する為の目安としてください ) メニューバー すべてのコマンドが配置されています

More information

Microsoft Word - 205MSPowerpoint2010

Microsoft Word - 205MSPowerpoint2010 5.1 MS-PowerPoint 2010 の起動 終了 第 5 章プレゼンテーション 1.MS-PowerPoint 2010 の起動 (1) マウスの左ボタンでスタートボタンをクリックします (2)[ すべてのプログラム ] [Microsoft Office] [Microsoft PowerPoint 2010] の順にマウスをクリックすると MS-PowerPoint 2010 の初期画面

More information

XAML Do-It-Yourself シリーズ 第 1 回 XAML 概要 -1-

XAML Do-It-Yourself シリーズ 第 1 回 XAML 概要 -1- XAML Do-It-Yourself シリーズ 第 1 回 XAML 概要 -1- XAML Do-It-Yourself 第 1 回 XAML 概要 はじめに - XAML Do-It-Yourself について 本 XAML Do-It-Yourself シリーズでは 13 回にわたって XAML (Extensible Application Markup Language) の基礎を学習していきます

More information

Visual Studio Do-It-Yourself 第 9 回ユーザーコントロール 第 6 回のリソースから第 8 回のテンプレートで さまざまな方法でコントロールをカスタマズできるこ とを学びました 今回のテーマであるユーザーコントロールは 既存の一つのコントロールをカスタマ ズするのではな

Visual Studio Do-It-Yourself 第 9 回ユーザーコントロール 第 6 回のリソースから第 8 回のテンプレートで さまざまな方法でコントロールをカスタマズできるこ とを学びました 今回のテーマであるユーザーコントロールは 既存の一つのコントロールをカスタマ ズするのではな Visual Studio Do-It-Yourself シリーズ 第 9 回ユーザーコントロール -1- Visual Studio Do-It-Yourself 第 9 回ユーザーコントロール 第 6 回のリソースから第 8 回のテンプレートで さまざまな方法でコントロールをカスタマズできるこ とを学びました 今回のテーマであるユーザーコントロールは 既存の一つのコントロールをカスタマ ズするのではなく

More information

グラフィックトレーニング 概要.NET のグラフィック描画は どんなことができるのでしょうか? グラフィックオブジェクトやグラフィック環境 概念を理解するためには クラスを使って馴れることが近道です 本 書に記載されているコードをカットアンドペーストして 一つ一つの機能を体験してください 前提 グラ

グラフィックトレーニング 概要.NET のグラフィック描画は どんなことができるのでしょうか? グラフィックオブジェクトやグラフィック環境 概念を理解するためには クラスを使って馴れることが近道です 本 書に記載されているコードをカットアンドペーストして 一つ一つの機能を体験してください 前提 グラ C# & VB 1 グラフィックトレーニング 概要.NET のグラフィック描画は どんなことができるのでしょうか? グラフィックオブジェクトやグラフィック環境 概念を理解するためには クラスを使って馴れることが近道です 本 書に記載されているコードをカットアンドペーストして 一つ一つの機能を体験してください 前提 グラフィックを行うためには Visual Studio の基本操作や C# または VB

More information

XAML Do-It-Yourself シリーズ 第 8 回ゕニメーション -1-

XAML Do-It-Yourself シリーズ 第 8 回ゕニメーション -1- XAML Do-It-Yourself シリーズ 第 8 回ゕニメーション -1- XAML Do-It-Yourself 第 8 回ゕニメーション XAML Do-It-Yourself 第 8 回は ゕニメーションについて学習します XAML (WPF) が提供するゕニメ ーション機能は 時間の経過と共に コントロールのプロパテゖを変化させる機能です コントロールに 含まれるほとんどのプロパテゖに対して

More information

XAML Do-It-Yourself シリーズ 第 7 回テンプレート -1-

XAML Do-It-Yourself シリーズ 第 7 回テンプレート -1- XAML Do-It-Yourself シリーズ 第 7 回テンプレート -1- XAML Do-It-Yourself 第 7 回テンプレート XAML Do-It-Yourself 第 7 回は テンプレートについて学習します テンプレートを使うと コントロ ールの外観を拡張できます 今回は テンプレートを使って 以下の内容を学習します テンプレートによるコントロールのカスタマズ バンデゖングデータの表示に使用するテンプレート

More information

第21章 表計算

第21章 表計算 第 3 部 第 3 章 Web サイトの作成 3.3.1 WEB ページ作成ソフト Dreamweaver の基本操作 Web ページは HTML CSS という言語で作成されており これらは一般的なテキストエディタで作成できるのが特徴ですが その入 力 編集は時に煩雑なものです そこで それらの入力 編集作業など Web ページの作成を補助するソフトウェアである Dreamweaver の使い方について解説していきます

More information

わんくま同盟 大阪勉強会 #1

わんくま同盟 大阪勉強会 #1 えムナウ ( 児玉宏之 ) アジェンダ Windows Presentation Foundation アーキテクチャ アニメーション フロードキュメント リソースとスタイルとテンプレート イベントとキーとコマンド WPF WPF(Windows Presentation Foundation).NET Framework 3.0 で提供される新たなフレームワーク UI 2D および 3D オブジェクトの描画

More information

クリッピング領域

クリッピング領域 グラフィックス 領域の利用 GDI+ での領域 領域は 出力デバイスのディスプレイ範囲の一部です 単純な領域 ( 単一の四角形 ) と複雑な領域 ( 複数の多角形と閉じた曲線の組み合わせ ) があります 四角形から構築された領域とパスから構築された領域を次の図に示します 領域の使用 領域は クリッピングとヒットテストに使用されることがよくあります クリッピングでは ディスプレイ範囲の特定の領域 (

More information

< F2D D E6A7464>

< F2D D E6A7464> PowerPoint でランチョンマット ( 型紙 ) を作成しよう PowerPoint2003 の描画機能 オートシェイプ と塗りつぶし機能を活用して, ランチョンマット の型紙作成と配色実習を行います 1 型紙の作成 A3 サイズのランチョンマットの型紙を作成します ラフスケッチを事前に描いておくと, よりイメージを捉えやすいでしょう (1) PowerPoint の起動と用紙設定 Microsoft

More information

VB.NET解説

VB.NET解説 Visual Basic.NET 印刷編 目次 印刷の概要... 2 印刷の流れ... 2 標準の Windows フォーム印刷ジョブの作成... 3 実行時に於ける Windows フォーム印刷オプションの変更... 3 Windows フォームに於ける接続されたプリンタの選択... 4 Windows フォームでのグラフィックスの印刷... 5 Windows フォームでのテキストの印刷...

More information

Prog2_4th

Prog2_4th 2018 年 10 月 18 日 ( 木 ) 実施 イベントハンドライベントハンドラとは Windows フォーム上のコントロールに対して クリックされた とか 文字列を変更された とかいったイベントを行った際に, それを受け取って処理を行うメソッドをイベントハンドラと呼ぶ 本日の課題第 3 回の授業では, フォームデザイナーで該当するコントロールをダブルクリックして, コードエディタに表示されたイベントハンドラの処理を記述したが,

More information

Microsoft Word - サンプル _図面編集_.doc

Microsoft Word - サンプル _図面編集_.doc 図面編集 目次 目次...1 1. 概要...3 2. 用途...4 3. イベントとメソッド...4 4. 使用方法...7 4.1. 図形を描く...7 4.1.1. 矩形を描く...7 4.1.2. 矩形を編集しよう...9 4.1.3. 多角形を描いてみよう...15 4.1.4. 多角形を編集しよう...16 4.1.5. 文字を書いてみよう...20 4.1.6. 文字を編集しよう...22

More information

平成 30 年度 プログラミング研修講座 岩手県立総合教育センター

平成 30 年度 プログラミング研修講座 岩手県立総合教育センター 平成 30 年度 プログラミング研修講座 岩手県立総合教育センター 目次第 1 章プログラミングについて 1 ソフトウェアの働き 1 2 プログラミング言語 1 3 主なプログラミング言語の歴史 2 第 2 章 Visual Basic について 1 Visual Basic とは 3 2.NET Framework の環境 3 3 Visual Basic と.NET Framework の関係

More information

WPF アプリケーションの 多言語切替

WPF アプリケーションの 多言語切替 WPF アプリケーションの 多言語切替 YK S o f t w a r e 2015 年 6 月 2 日 @twyujiro15 プロフィール 加藤裕次郎 本職は製造業の開発業務 - 2009 年 4 月に入社 1982.03.03 生まれ ( うお座 ) 左利き ( お箸は右 ) twitter : @twyujiro15 プログラミング経験 Excel VBA MATLAB MATX C VC++

More information

Microsoft Word - P doc

Microsoft Word - P doc はじめに...1 PowerPoint の概要 2 1 PowerPoint とは 2 2 プレゼンテーションとは 2 3 PowerPoint でできること 3 4 プレゼンテーション作成の流れ 4 5 PowerPoint の起動 5 6 PowerPoint の画面 6 7 作業ウィンドウを閉じる 8 8 ツールバーを 2 行にしたい時は 9 第 1 章新しいプレゼンテーションを作ろう...1

More information

3. 文字の入力 文字 ボタンをクリックします 文字入力したい範囲をドラックし 文字枠を作成します 文字を入力します この作業を繰り返します マウスポインタの形 4. 文字枠のサイズ変更 拡大 ボタンをクリックします 大きさを変えたい文字枠をクリックします マウスポインタを文字枠の右下のハンドル (

3. 文字の入力 文字 ボタンをクリックします 文字入力したい範囲をドラックし 文字枠を作成します 文字を入力します この作業を繰り返します マウスポインタの形 4. 文字枠のサイズ変更 拡大 ボタンをクリックします 大きさを変えたい文字枠をクリックします マウスポインタを文字枠の右下のハンドル ( 1. あてうち名人を起動します 2. 原稿の読み込みスキャナに原稿をセットします スキャナ ボタンをクリックします スキャナ実行 ダイアログボックスが表示されます 解像度 (XDPI,YDPI) を必要にあわせ修正します 読取モードを必要にあわせ変更します 原稿サイズ 用紙サイズを確認します 開始 ボタンをクリックします 解像度についてあてうちが目的であれば 100 程度にしてください 原稿をコピーしたい場合はプリンタに合わせ300

More information

DEMO1 まずはやってみよう アクティビティをダブルクリック 作成 - プロジェクト C# => Workflow CodeActivity をぽとぺ シーケンシャルと ステートマシン それぞれのコ ンソールアプリ あとライブラリがある びっくりマークは足りていないあかし プロパティをみると判別で

DEMO1 まずはやってみよう アクティビティをダブルクリック 作成 - プロジェクト C# => Workflow CodeActivity をぽとぺ シーケンシャルと ステートマシン それぞれのコ ンソールアプリ あとライブラリがある びっくりマークは足りていないあかし プロパティをみると判別で DEMO1 まずはやってみよう アクティビティをダブルクリック 作成 - プロジェクト C# => Workflow CodeActivity をぽとぺ シーケンシャルと ステートマシン それぞれのコ ンソールアプリ あとライブラリがある びっくりマークは足りていないあかし プロパティをみると判別できます こんなコードを追加 string str = Console.ReadLine(); int

More information

Chart3D for WPF/Silverlight

Chart3D for WPF/Silverlight 2018.04.10 更新 グレープシティ株式会社 目次 製品の概要 2 ComponentOne for WPF/Silverlight のヘルプ 2 主な特長 3 クイックスタート 4 手順 1: プロジェクトへのコントロールの追加 4-5 手順 2: データの追加 5-6 手順 3: グラフの外観の変更 6-7 手順 4: 凡例の追加 7 手順 5: プロジェクトの実行 7 XAML クイックリファレンス

More information

1/2

1/2 札幌学院大学社会情報学部課題用テキスト (2) 1 札幌学院大学社会情報学部課題用テキスト HTML の基礎知識 (2) 1 画像の表示 HP に画像を表示させてみる まず HTML 文書と同じフォルダ内 に JPEG ファイル ( 拡張子.jpg ) を 1 個準備する ( 画像の作り方 サイズの調べ方はこのプリントの最後を参照 ) この画像を読みこんで表示するためのタグは以下の通りである 画像ファイル名と

More information

. フォントを OS にインストールする インターネット等で入手したフリーのフォントをインストールすることにより Windows に標準でインストールされているフォント以外のものを利用することができます 多数のフォントをインストールするとパソコンの動作が遅くなります 必要なフォント以外はインストール

. フォントを OS にインストールする インターネット等で入手したフリーのフォントをインストールすることにより Windows に標準でインストールされているフォント以外のものを利用することができます 多数のフォントをインストールするとパソコンの動作が遅くなります 必要なフォント以外はインストール 事務系職員情報教育研修アプリケーションソフトコース PowerPoint 補足テキスト [ 目次 ]. フォントを OS にインストールする. ページ設定. クリップアートの加工 4 4. 写真のトリミング 6 5. 写真にフレームを設定する 7 6. 図形に透過性を設定する 8 7. 行間を調整する 0 8. 文字に輪郭を設定する 9. 文字の効果を設定する 0. 文字を伸縮させる 4. フォントをファイルに埋め込む

More information

練習問題 1-1 1クイックアクセスツールバー 2タイトルバー 3リボン 4タブ 5ステータスバー 6ノート 7コメント 8 表示モードショートカット 9ズーム 練習問題 1-2 [1] ファイルを開く [ ファイル ] タブ-[ 開く ] [ 開く ] 画面で保存場所を指定 [ ファイルを開く ]

練習問題 1-1 1クイックアクセスツールバー 2タイトルバー 3リボン 4タブ 5ステータスバー 6ノート 7コメント 8 表示モードショートカット 9ズーム 練習問題 1-2 [1] ファイルを開く [ ファイル ] タブ-[ 開く ] [ 開く ] 画面で保存場所を指定 [ ファイルを開く ] 30 レッスンでしっかりマスター PowerPoint 2013 [ 総合 ] ラーニングテキスト 練習問題解説 1 練習問題 1-1 1クイックアクセスツールバー 2タイトルバー 3リボン 4タブ 5ステータスバー 6ノート 7コメント 8 表示モードショートカット 9ズーム 練習問題 1-2 [1] ファイルを開く [ ファイル ] タブ-[ 開く ] [ 開く ] 画面で保存場所を指定 [ ファイルを開く

More information

_責)Wordトレ1_斉木

_責)Wordトレ1_斉木 . Word の起動 第章. Word の基礎知識 Word の起動 Word の起動は次のように行います 他のアプリケーションソフトのように いくつかの 起動方法があります スタートメニューからの起動 スタートメニューから起動する方法は次の通りです [ スタート ] メニューの [ すべてのプログラム ] から [Microsoft-Office] の [Microsoft-Word] を選択します

More information

Microsoft Word - 操作マニュアル(PowerPoint2013)

Microsoft Word - 操作マニュアル(PowerPoint2013) PowerPoint2013 基本操作 P.1 PowerPoint2013 基本操作 1.PowerPoint2013 の起動... 2 2. スライドのサンプル... 3 3. スライドの作成... 4 4. 文字の入力とテキストボックス... 5 5. 図の作成と書式設定... 5 6. グラフの作成... 6 7. 背景デザインと配色... 7 8. アニメーション効果... 8 9. スライドショーの実行...

More information

WPF アプリケーションの 多言語切替

WPF アプリケーションの 多言語切替 パスワード認証 YK S o f t w a r e 2015 年 8 月 3 日 @twyujiro15 プロフィール 加藤裕次郎 本職は製造業の開発業務 - 2009 年 4 月に入社 1982.03.03 生まれ ( うお座 ) 左利き ( お箸は右 ) twitter : @twyujiro15 プログラミング経験 Excel VBA MATLAB MATX C VC++ (Windows

More information

Prog2_12th

Prog2_12th 2018 年 12 月 13 日 ( 木 ) 実施クラスの継承オブジェクト指向プログラミングの基本的な属性として, 親クラスのメンバを再利用, 拡張, または変更する子クラスを定義することが出来る メンバの再利用を継承と呼び, 継承元となるクラスを基底クラスと呼ぶ また, 基底クラスのメンバを継承するクラスを, 派生クラスと呼ぶ なお, メンバの中でコンストラクタは継承されない C# 言語では,Java

More information

Prog2_15th

Prog2_15th 2019 年 7 月 25 日 ( 木 ) 実施メニューメニューバーとコンテクストメニュー Visual C# では, メニューはコントロールの一つとして扱われ, フォームアプリケーションの上部に配置されるメニューバーと, コントロール上でマウスを右クリックすると表示されるコンテクストメニューとに対応している これ等は選択するとメニューアイテムのリストが表示されるプルダウンメニューと呼ばれる形式に従う

More information

ボタンイベントアプリイベント処理を含むアプリとして, ボタンをもち, ボタンを押すと文字列を表示するアプリを作る. このアプリは,HelloWorld アプリを改造して作成するため, アプリ作成の途中からの手順を示す. 1. ボタンの設置 (1) レイアウトにボタンを追加するパレットの フォーム ウ

ボタンイベントアプリイベント処理を含むアプリとして, ボタンをもち, ボタンを押すと文字列を表示するアプリを作る. このアプリは,HelloWorld アプリを改造して作成するため, アプリ作成の途中からの手順を示す. 1. ボタンの設置 (1) レイアウトにボタンを追加するパレットの フォーム ウ ボタンイベントアプリイベント処理を含むアプリとして, ボタンをもち, ボタンを押すと文字列を表示するアプリを作る. このアプリは,HelloWorld アプリを改造して作成するため, アプリ作成の途中からの手順を示す. 1. ボタンの設置 (1) レイアウトにボタンを追加するパレットの フォーム ウィジェット からボタンのアイコンをドラッグして, ワークスペースにドロップする. 図 1 ボタンの追加

More information

Microsoft Word - 操作マニュアル(PowerPoint2010).doc

Microsoft Word - 操作マニュアル(PowerPoint2010).doc PowerPoint2010 基本操作 P.1 PowerPoint2010 基本操作 1.PowerPoint の起動... 2 2. スライドのサンプル... 3 3. スライドの作成... 4 4. 文字の入力とテキストボックス... 5 5. 図の作成と書式設定... 5 6. グラフの作成... 5 7. 背景デザインと配色... 7 8. アニメーション効果... 8 9. スライドショーの実行...

More information

マクロの実行許可設定をする方法 Excel2010 で 2010 でマクロを有効にする方法について説明します 参考 URL:

マクロの実行許可設定をする方法 Excel2010 で 2010 でマクロを有効にする方法について説明します 参考 URL: マクロの実行許可設定をする方法 Excel2010 で 2010 でマクロを有効にする方法について説明します 参考 URL: http://excel2010.kokodane.com/excel2010macro_01.htm http://span.jp/office2010_manual/excel_vba/basic/start-quit.html Excel2010 でマクロを有効にする

More information

XAML Do-It-Yourself シリーズ 第 12 回 3D グラフィックス -1-

XAML Do-It-Yourself シリーズ 第 12 回 3D グラフィックス -1- XAML Do-It-Yourself シリーズ 第 12 回 3D グラフィックス -1- XAML Do-It-Yourself 第 12 回 3D グラフィックス XAML Do-It-Yourself 第 12 回は 3D グラフィックスについて学習します これまでアプリケーション で 3D グラフィックスを扱うには DirectX のコンポーネントを使用する必要がありましたが WPF (XAML)

More information

内容 1 はじめに インストールの手順 起動の手順 Enterprise Architect のプロジェクトファイルを開く 内容を参照する プロジェクトブラウザを利用する ダイアグラムを開く 便利な機能.

内容 1 はじめに インストールの手順 起動の手順 Enterprise Architect のプロジェクトファイルを開く 内容を参照する プロジェクトブラウザを利用する ダイアグラムを開く 便利な機能. Viewer manual by SparxSystems Japan Enterprise Architect 読み込み専用版 (Viewer) 利用マニュアル 内容 1 はじめに...3 2 インストールの手順...3 3 起動の手順...6 4 Enterprise Architect のプロジェクトファイルを開く...7 5 内容を参照する...8 5.1 プロジェクトブラウザを利用する...8

More information

このうち ツールバーが表示されていないときは メニューバーから [ 表示 (V)] [ ツールバー (T)] の [ 標準のボタン (S)] [ アドレスバー (A)] と [ ツールバーを固定する (B)] をクリックしてチェックを付けておくとよい また ツールバーはユーザ ( 利用者 ) が変更

このうち ツールバーが表示されていないときは メニューバーから [ 表示 (V)] [ ツールバー (T)] の [ 標準のボタン (S)] [ アドレスバー (A)] と [ ツールバーを固定する (B)] をクリックしてチェックを付けておくとよい また ツールバーはユーザ ( 利用者 ) が変更 ファイル操作 アプリケーションソフトウェアなどで作成したデータはディスクにファイルとして保存される そのファイルに関してコピーや削除などの基本的な操作について実習する また ファイルを整理するためのフォルダの作成などの実習をする (A) ファイル名 ファイル名はデータなどのファイルをディスクに保存しておくときに付ける名前である データファイルはどんどん増えていくので 何のデータであるのかわかりやすいファイル名を付けるようにする

More information

第 1 章 : はじめに RogueWave Visualization for C++ の Views5.7 に付属している Views Studio を使い 簡単な GUI アプリケーションの開発手順を紹介します この文書では Windows 8 x64 上で Visual Studio2010

第 1 章 : はじめに RogueWave Visualization for C++ の Views5.7 に付属している Views Studio を使い 簡単な GUI アプリケーションの開発手順を紹介します この文書では Windows 8 x64 上で Visual Studio2010 RW View Studio Getting Started (1) : 簡単な GUI アプリケーションを作成する 目次 第 1 章はじめに...1 1.1 アプリケーションの概要... 1 1.2 Views Studio とは... 2 第 2 章 Views Studio を起動する...3 2.1 起動画面 ( メインウィンドウ ) の説明... 4 2.2 ガジェットエクステンション...

More information

TileView for WPF/Silverlight

TileView for WPF/Silverlight 2018.02.20 更新 グレープシティ株式会社 目次 製品の概要 2 主な特長 3 クイックスタート 4 手順 1: アプリケーションの作成 4-5 手順 2: コントロールのカスタマイズ 5-6 手順 3: アプリケーションの実行 6 TileView の使い方 7 TileViewItem の要素 7 TileViewItem の状態 7-8 列と行 8 最小化項目の位置 8 ドラッグアンドドロップ操作

More information

PowerPoint2003基礎編

PowerPoint2003基礎編 はじめに 1 PowerPoint の概要 2 1 PowerPoint とは 2 2 プレゼンテーションとは 2 3 PowerPoint でできること 3 4 プレゼンテーション作成の流れ 4 5 PowerPoint の起動 5 6 PowerPoint の画面 6 7 作業ウィンドウを閉じる 8 8 ツールバーを 2 行にしたい時は 9 第 1 章新しいプレゼンテーションを作ろう 1 レッスン

More information

スライド 1

スライド 1 C# の基本 ~ ファイル読み込み ~ 今回学ぶ事 今回はファイル読み書きに必要 BinaryReader クラスについて記載する ファイル参照ダイアログである OpenFileDialog クラスについても理解を深める また Bitmap クラスを用いた Bitmap ファイルの読み込み方法についても学ぶ フォーム作り まず label picturebox を配置する ツールボックスより左クリックで選択する

More information

Mapmakerfor の手順下絵を準備 作者の設定した大きさで作成する場合 下絵にする地図を挿入 トリミングと大きさの調整 大きさを調整した画像を保存 下絵を背景に設定 作成画面の大きさを調整 1 自分で用意した下絵を背景にする場合 下絵を背景に設定 作成画面の大きさを調整 画像が大きい場合シート

Mapmakerfor の手順下絵を準備 作者の設定した大きさで作成する場合 下絵にする地図を挿入 トリミングと大きさの調整 大きさを調整した画像を保存 下絵を背景に設定 作成画面の大きさを調整 1 自分で用意した下絵を背景にする場合 下絵を背景に設定 作成画面の大きさを調整 画像が大きい場合シート Mapmakerfor の手順下絵を準備 作者の設定した大きさで作成する場合 下絵にする地図を挿入 トリミングと大きさの調整 大きさを調整した画像を保存 下絵を背景に設定 作成画面の大きさを調整 1 自分で用意した下絵を背景にする場合 下絵を背景に設定 作成画面の大きさを調整 画像が大きい場合シートのズームを 100% に設定するとよいです 2 道路を描く 次ページから説明書きがありますのでよく読んで操作してください

More information

5 5. 書式の設定 書式設定は ホーム タブの フォント 配置 数値 の各グループのツールから設定することもできますが ここではツール及び各グループのダイアログボックスランチャーからの設定について説明いたします 5-1 セルの書式設定セルに対しての書式設定は 数値 グループのダイアログボックスランチャーをクリックすると表示される セルの書式設定 ダイアログボックスで行います フォント 配置 も同様のダイアログボックスが表示されます

More information

Microsoft Word - 415Illustrator

Microsoft Word - 415Illustrator 15.1 ベクトル画像とビットマップ画像 ベクトル画像とビットマップ画像の違い 第 15 章描画の取り扱い コンピュータグラフィックスで扱う画像は大きく分けて ベクトル画像とビットマップ画像に分ける事ができます ベクトル画像はドロー系画像あるいは描画とも呼ばれています この二種類の画像は共に画像データの表現方法を表していますが根本的に異なるものです そのため 双方の特徴を踏まえた上で利用する必要があります

More information

スライド 1

スライド 1 Authoring environment for Web2Print. 機能概要 第 1.0 版 はじめに Edition シリーズは 素材や図形 テキストを組み合わせて それを PDF やラスター画像にするシステムです 標準的なワークフローとして デザイナが再利用を前提として作成したものを テンプレート として保存し ユーザーがそれを利用して更に編集することで目的の ドキュメント を完成させて

More information

OutlookBar for WPF/Silverlight

OutlookBar for WPF/Silverlight 2018.04.11 更新 グレープシティ株式会社 目次 製品の概要 2 ComponentOne for WPF/Silverlight のヘルプ 2 主な特長 3 クイックスタート 4 手順 1: アプリケーションの作成 4-5 手順 2:C1OutlookItem の追加 5-6 手順 3: アプリケーションの実行 6 クイックリファレンス 7-8 C1OutlookBarの操作 9 OutlookBar

More information

スライド 1

スライド 1 グラフィックスの世界第 3 回 サイバーメディアセンター サイバーコミュニティ研究部門安福健祐 Processing によるアニメーション setup と draw void setup() size(400, 400); void draw() ellipse( mousex,mousey,100,100); void とか setup とか draw とかはじめて見る が出てきてややこしい ellipseは円描く関数でした

More information

Microsoft Word -

Microsoft Word - Visual Basic 2005 Express Edition 起動とプロジェクトの新規作成方法 1.1 起動とプロジェクトの新規作成 Visual Basic の起動とプロジェクトの新規作成の方法を Visual Basic 2005 Express Edition で説明します なお バージョンやエディションが異なる場合は 操作方法が若干違います 本節の起動とプロジェクトの新規作成の部分については

More information

スライド 1

スライド 1 操作マニュアル 1 ブログ作成 目次 はじめに ログイン方法 P2 コンテンツ一覧画面 P3 新しい記事を書く P4 本文入力エリアの説明 P5 画像をアップする P6.7 カテゴリ機能の説明 P8 リンクの貼り方 P9 動画の貼り方 P10 ブログの公開 P11 ブログの一覧画面 P12 2 フラッシュ フラッシュの編集 P13.14 3 その他 サイトの表示がおかしい P15 画像サイズについて

More information

Microsoft Word - VB.doc

Microsoft Word - VB.doc 第 1 章 初めてのプログラミング 本章では カウントアップというボタンを押すと表示されている値が1ずつ増加し カウントダウンというボタンを押すと表示されている値が1ずつ減少する簡単な機能のプログラムを作り これを通して Visual Basic.NET によるプログラム開発の概要を学んでいきます 1.1 起動とプロジェクトの新規作成 Visual Studio.NET の起動とプロジェクトの新規作成の方法を

More information

Sample 本テキストの作成環境は 次のとおりです Windows 7 Home Premium Microsoft Excel 2010( テキスト内では Excel と記述します ) 画面の設定( 解像度 ) ピクセル 本テキストは 次の環境でも利用可能です Windows

Sample 本テキストの作成環境は 次のとおりです Windows 7 Home Premium Microsoft Excel 2010( テキスト内では Excel と記述します ) 画面の設定( 解像度 ) ピクセル 本テキストは 次の環境でも利用可能です Windows 本テキストの作成環境は 次のとおりです Windows 7 Home Premium Microsoft Excel 2010( テキスト内では Excel と記述します ) 画面の設定( 解像度 ) 1024 768 ピクセル 本テキストは 次の環境でも利用可能です Windows 7 Home Premium 以外のオペレーティングシステムで Microsoft Excel 2010 が動作する環境

More information

スライド 1

スライド 1 第 5 章ワープロ A(Word2010/2007 共通 ) ( 解答と解説 ) 5A-1. 文書の編集 1 スタイルの設定 ( ア )= く スタイルとは さまざまな書式を組み合わせて名前を付けて登録したものです あらかじめ用意してあるもの以外に新規に登録することもできます ここでは 後で使う目次の項目として 3 箇所に 見出し 1 を設定します 2 段落 ダイアログボックス インデントと行間隔

More information

3 アドレスバーに URL を入力し ( 移動ボタン ) をタップします 入力した URL のホームページに移動します ネットワークへのログオン 画面が表示された場合は ユーザー名 を確 認し パスワード を入力して OK をタップしてください ホームページがうまく表示されないときは Opera B

3 アドレスバーに URL を入力し ( 移動ボタン ) をタップします 入力した URL のホームページに移動します ネットワークへのログオン 画面が表示された場合は ユーザー名 を確 認し パスワード を入力して OK をタップしてください ホームページがうまく表示されないときは Opera B ホームページを見る (Opera Browser) Opera Browser を使って ホームページの閲覧ができます アクセスリストに登録したホームページ (+3-3 ページ ) を順番に閲覧することができます くわしくは ネットウォーカー ( お気に入りめぐりをする ) (+3-7 ページ ) をご覧ください Opera Browser は パソコンなどで広く使われている Web ブラウザによる

More information

本テキストの作成環境は 次のとおりです Windows 7 Home Premium Microsoft Excel 2010( テキスト内では Excel と記述します ) 画面の設定 ( 解像度 ) ピクセル 本テキストは 次の環境でも利用可能です Windows 7 Home

本テキストの作成環境は 次のとおりです Windows 7 Home Premium Microsoft Excel 2010( テキスト内では Excel と記述します ) 画面の設定 ( 解像度 ) ピクセル 本テキストは 次の環境でも利用可能です Windows 7 Home 本テキストの作成環境は 次のとおりです Windows 7 Home Premium Microsoft Excel 2010( テキスト内では Excel と記述します ) 画面の設定 ( 解像度 ) 1024 768 ピクセル 本テキストは 次の環境でも利用可能です Windows 7 Home Premium 以外のオペレーティングシステムで Microsoft Excel 2010 が動作

More information

PDF・画像の貼付け

PDF・画像の貼付け PDF 画像の貼付け CAD から PDF に変換したデータを開く PDF ファイルの制限 PDF ファイルの読込み 図形拡大 画像のみの PDF データを開く PDF ファイルの読込み PDF ファイルの貼付け 5 傾き補正 6 距離補正 7 画像塗りつぶし 8 消しゴム 9 画像ロック 9 画像データ保存についての注意点 0 CAD 化 画像を線分に変換 図形を文字に置換 写真 イラスト BMP

More information

XNA Framework

XNA Framework XNA Framework 2.0 M@STER SESSION 01 XNA Framework の技術的背景 システム基盤は.NET Framework マネージ環境で実行 クロスプラットフォーム Windows, Xbox360, Zune DirectX, MDX から独立している 開発 実行環境の構造 XNA Game Studio (Visual Studio 2005) XNA Framework

More information

PowerPoint2007基礎編

PowerPoint2007基礎編 はじめに 1 PowerPoint の概要 2 1 PowerPoint とは 2 2 プレゼンテーションとは 2 3 PowerPoint でできること 3 4 プレゼンテーション作成の流れ 4 5 PowerPoint の起動 5 6 PowerPoint の画面 6 第 1 章新しいプレゼンテーションを作ろう 1 レッスン 1 文字を入力しよう 3 1 文字の入力 3 レッスン 2 新しいスライドを追加しよう

More information

Wordの学習

Wordの学習 Windows10 の基本操作 第 1 章パソコンを学ぶこととは パソコンの動作概要 本体装置 平成 28 年 4 月 NPO 法人六樹会パソコンサロン 2 パソコンの構成 平成 28 年 4 月 NPO 法人六樹会パソコンサロン 3 パソコンの構成 平成 28 年 4 月 NPO 法人六樹会パソコンサロン 4 GUI とは テキスト =2 ページ GUI の要素 Window ( ウィンドウ )

More information

各種パスワードについて マイナンバー管理票では 3 種のパスワードを使用します (1) 読み取りパスワード Excel 機能の読み取りパスワードです 任意に設定可能です (2) 管理者パスワード マイナンバー管理表 の管理者のパスワードです 管理者パスワード はパスワードの流出を防ぐ目的で この操作

各種パスワードについて マイナンバー管理票では 3 種のパスワードを使用します (1) 読み取りパスワード Excel 機能の読み取りパスワードです 任意に設定可能です (2) 管理者パスワード マイナンバー管理表 の管理者のパスワードです 管理者パスワード はパスワードの流出を防ぐ目的で この操作 マイナンバー管理表 操作説明書 管理者用 2015 年 11 月 30 日 ( 初版 ) 概要 マイナンバー管理表 の動作環境は以下の通りです 対象 OS バージョン Windows7 Windows8 Windows8.1 Windows10 対象 Excel バージョン Excel2010 Excel2013 対象ファイル形式 Microsoft Excel マクロ有効ワークシート (.xlsm)

More information

第2章 Macintoshの基本操作

第2章 Macintoshの基本操作 第 2 章 Macintosh の基本操作 パソコンを操作するには パソコンに対して何らかの 命令 や 指示 をする必要があります 以下の章で説明するように パソコンの電源を入れると MacOS という基本ソフト (OS とも言う ) が起動しますので パソコンの操作は 基本的には Macintosh( 以下 Mac と言う ) 環境のもとでのパソコン操作となります Mac に対して 命令 や 指示

More information

スライド 0

スライド 0 第 2 章情報記入とプラン地図上に情報記入や 行動計画をシミュレーションするプランの説明をします 2-1 カスタム情報の記入カスタム情報とは 地図上に名称 ( タイトル ) としてアイコンと文字 ( または画像 ) を表示し 内部に住所などのコメントや写真 動画 EXCEL ファイル PDF Web リンクを持つことができるものです 初期状態 ( デフォルト ) では テキスト作成時の動作は カスタム情報記入ウィザードを開くように設定されています

More information

StarBoard Software ユーザーズガイド 目次 1. 教育用端末 (imac) の起動と,StarBoard Software の起動 電子黒板の起動 電子黒板の終了 StarBoard Software の使い方..

StarBoard Software ユーザーズガイド 目次 1. 教育用端末 (imac) の起動と,StarBoard Software の起動 電子黒板の起動 電子黒板の終了 StarBoard Software の使い方.. StarBoard Software ユーザーズガイド 2019.5.30 目次 1. 教育用端末 (imac) の起動と,StarBoard Software の起動... 2 2. 電子黒板の起動... 3 3. 電子黒板の終了... 3 4. StarBoard Software の使い方... 4 4.1 電子ペンの位置合わせ ( 必要に応じて行ってください )... 4 4.2 基本操作

More information

[ 学習動画 ] 一覧 学習の閲覧や質問の際にご利用ください 閲覧が終了した動画をチェックして 学習の進行状況を確認しましょう! グラフィックリファレンス 閲覧チェック 動画タイトル 時間 ( 計 20 時 10 分 ) Step1 Illustratorの基本操作 Illustratorの起動と基

[ 学習動画 ] 一覧 学習の閲覧や質問の際にご利用ください 閲覧が終了した動画をチェックして 学習の進行状況を確認しましょう! グラフィックリファレンス 閲覧チェック 動画タイトル 時間 ( 計 20 時 10 分 ) Step1 Illustratorの基本操作 Illustratorの起動と基 [ 学習動画 ] 一覧 学習の閲覧や質問の際にご利用ください 閲覧が終了した動画をチェックして 学習の進行状況を確認しましょう! Step1 Illustratorの基本操作 Illustratorの起動と基本画面についてツールパネルやパネルの使い方作業画面を拡大 縮小する / 表示位置を変更する表示方法を変更するオブジェクトを選択 移動するオブジェクトを削除する / 作業の取り消しとやり直しドキュメントの保存と閉じ方

More information

MISAO with WPF

MISAO with WPF MISAO with WPF JZ5 2009/2/7 自己紹介 JZ5( 松江祐輔 ) プログラマーですか? 違います Verilog 書いてます @jz5 Twitter katamari.jp katamari.wankuma.com Agenda ニコニコメソッド & Katamari.MISAO WPF プログラミング What s ニコニコメソッド 2007/4/25 ニコニコ動画勉強会

More information

Word2007 Windows7 1 パンジーを描こう 暮らしのパソコンいろは 早稲田公民館 ICT サポートボランティア

Word2007 Windows7 1 パンジーを描こう 暮らしのパソコンいろは 早稲田公民館 ICT サポートボランティア Word2007 Windows7 1 パンジーを描こう 早稲田公民館 ICT サポートボランティア 1.Word2007 を起動しよう 1 ( スタート ) をクリックします 2 すべてのプログラム をポイントし Microsoft Office をクリックします 3 Microsoft Office Word 2007 をクリックします Word が起動します このテキストは Word2007

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 1 01 Visual C# 2010 を使ってみよう BMI 計算プログラム 1 Visual Studio 2010 の起動 1 2 画面左下 タスクバーの左端にある スタートボタン をクリック 表示されたメニューにある すべてのプログラム をクリック 2 1 3 4 メニューから Microsoft Visual Studio 2010 のフォルダを探して これをクリック フォルダが展開されて

More information

brieart変換設定画面マニュアル

brieart変換設定画面マニュアル 変換設定画面マニュアル Ver. 1.1 更新日 :2012/11/19 株式会社アイ エヌ ジーシステム Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 目次 1. brieartとは? 3 ラベル 26 リスト 29 brieartとは 3 開閉 ( アコーディオン ) 32 注意事項 制限事項など 4 ボタン 35 パネル

More information

IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 2014 IBM Corporation

IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 2014 IBM Corporation IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 目次 1. はじめに ( 資料の目的 ) 2. Coach View 構造の基本 2.1 CSS の基礎 2.2 Coach における CSS 記述場所 2.3 標準 Coach View 構造の基本 2.4 Coach における CSS セレクター指定の基本 3. 実践

More information

1 開発ツールのインストール 最初に JDK をインストールし 次に IDE をインストールする という手順になります 1. JDK のインストール JDK のダウンロードとインストール JDK は次の URL でオラクル社のウェブページからダウンロードします

1 開発ツールのインストール 最初に JDK をインストールし 次に IDE をインストールする という手順になります 1. JDK のインストール JDK のダウンロードとインストール JDK は次の URL でオラクル社のウェブページからダウンロードします 1 開発ツールのインストール 最初に JDK をインストールし 次に IDE をインストールする という手順になります 1. JDK のインストール JDK のダウンロードとインストール JDK は次の URL でオラクル社のウェブページからダウンロードします http://www.oracle.com/technetwork/java/javase/downloads/index.html なお

More information

■新聞記事

■新聞記事 PowerPoint 基本操作 P.1 PowerPoint 基本操作 - 目次 - 1.PowerPointの起動... 2 2. スライドのサンプル... 3 3. スライドの作成... 4 4. 文字の入力... 5 5. 図の作成 ( クリップアート )... 6 6. グラフの作成... 6 7. 背景デザインと配色... 7 8. アニメーション効果... 8 9. スライドショーの実行...

More information

WPF Bindingの威力

WPF Bindingの威力 WPF Binding の威力 えムナウ ( 児玉宏之 ) Microsoft MVP for Visual- Developer C# 2005/01-2007/12 アジェンダ はじめに Bindingの概要 データソース データ変換 データ検証 はじめに Windows Presentation Foundation (WPF) データバインディングは アプリケーションがデータを提供し 柔軟な

More information

Delphi/400でFlash動画の実装

Delphi/400でFlash動画の実装 吉原泰介 株式会社ミガロ. RAD 事業部技術支援課顧客サポート Delphi/400 で Flash 動画の実装 YouTube プレイヤーの作成 Flash の機能を ActiveX を利用して Delphi/400 アプリケーションへ組み込む方法を紹介する Flash と ActiveX コントロール ActiveX コントロールの取り込み YouTube プレイヤーの実装 まとめ 略歴 1978

More information

Microsoft Word - 平成サロン09年2月21日一筆箋作成.doc

Microsoft Word - 平成サロン09年2月21日一筆箋作成.doc Word を起動します 平成サロン 09 年 2 月 21 日一筆箋作成 [ ページレイアウト ] タブをクリックし ページ設定 グループ右下にある [ ページ設定 ] をクリックします ページ設定 画面が表示されるので 文字数と行数 タブをクリックし 文字方向 欄の [ 縦書 き ] をクリックし オプションボタンをオンにします 作成した一筆箋を印刷後 切り分けやすいように枠と枠の間に余白を入れたい場合は

More information

Wordでアルバム作成

Wordでアルバム作成 Microsoft 2013 Word でアルバム作成 富良野の旅 kimie 2015/02/21 Word でアルバムの作成 今講座ではアルバム編集ソフトでデジカメ写真を加工 編集して その写真を Word に貼り付けてアルバムにしていきます たくさん撮影したデジカメ写真の中から お気に入りの写真を選ぶことにより アルバムが思い出深いものになります アルバム作成準 1. アルバムにする写真 (

More information

PE4 Training Text 2

PE4 Training Text 2 Corel Painter Essentials 4 基本操作をマスターしよう Corel Painter Essentials 4 を起動 Corel Painter Essentials 4 の起動デスクトップの Corel Painter Essentials 4 のアイコンをダブルクリックして起動します もし見つからなかった場合 スタート メニューの すべてのプラグラム より Corel Painter

More information

BBB_マニュアル(聴講者用)

BBB_マニュアル(聴講者用) BigBlueButton 操作マニュアル < 聴講者用 > 目次 はじめに 01 画面構成 02 機能説明 1. ログイン 03 2. カメラとマイクの設定 04 3. 日本語切替 08 4. ユーザーの管理 09 5. ビデオの共有 11 6. ビデオの公開 17 7. プレゼンテーション 19 8. デスクトップの共有 28 9. チャット 35 10. リスナーの管理 39 11. レイアウトのリセット

More information

Design with themes — Part 1: The Basics

Design with themes — Part 1: The Basics PowerPoint 入門 PowerPoint はプレゼンテーションのための効果的なアプリケーションです 最も効果的に使用するためには 最初にその基礎を理解する必要があります このチュートリアルでは すべてのプレゼンテーションで使用する作業と機能をいくつか紹介します 開始する前に... 1 1. 新しい空白のプレゼンテーションを作成する... 2 2. PowerPoint ユーザーインターフェイスについて...

More information

ム コントロールの基礎と作り方』

ム コントロールの基礎と作り方』 .NET Framework C# & VB サンプルで学ぶ独自コントロール 基礎から作り方まで Visual Studio 2005 / 2008 対応 Visual Studio 2010 / 2012 コンバート対応 ソースコードは 全バージョンに対応 図解資料マスター (Excel 版 ) 付き 丸山プログラミング塾 サンプルで学ぶ 独自コントロール基礎から作り方まで はじめに コンポーネントとは何?

More information

パソコン研修資料 - カシミール 3D の使い方 年度版 倉敷ハイキング倶楽部 HP 委員会

パソコン研修資料 - カシミール 3D の使い方 年度版 倉敷ハイキング倶楽部 HP 委員会 パソコン研修資料 - カシミール 3D の使い方 - 2016 年度版 倉敷ハイキング倶楽部 HP 委員会 内容第 1 章カシミール3Dの基本的な使い方... 1 1-1 ソフトウェアの入手... 1 1-2 カシミールのインストール... 2 1-3 カシミールの操作... 3 1 地図を移動させる... 3 2 縮尺の切り替え... 3 3 地名の検索とジャンプ... 4 4 磁北線の表示...

More information

Word 2010 第5章

Word 2010 第5章 横書きのメニュー表を作成する パソコンボランティア PC どりーむ 改訂 202. 0 段組を利用し色々な文書装飾をする 美しいメニュー表を作りましょう 段組とは段組は 紙面を 段 という仕切りに合わせて 複数の列にわたって文字をレイアウトしていく機能です 目を引く文章の工夫とは メニューやカタログ チラシや広告などより多くの人に見てもらうための文章には レイアウトやデザインに工夫が必要となります

More information

Microsoft Word IL3_1.doc

Microsoft Word IL3_1.doc プレゼンテーションソフトウェア Microsoft PowerPoint 2003 2005 年度情報リテラシー Ⅲ 学籍番号氏名あ Microsoft PowerPoint 2003 1. 起動と終了起動 デスクトップのアイコンをダブルクリックするか スタート すべてのプログラム Microsoft Office Microsoft Office PowerPoint 2003 の順にクリック 終了

More information

スライド 1

スライド 1 - 1 - Edition Flex/CMS/BackStage で使用する素材の作成 - 2-1: はじめに 本資料では Edition CMS/BackStage で登録し Edition Flex で使用可能な素材の作成手順について解説します 対象システム Edition CMS/BackSatge/Flex システムから出力されるファイルの仕様 CMYK の 4c 印刷用 PDF - 3-2:

More information

スライド 1

スライド 1 第 6 章表計算 B(Excel 2003) ( 解答と解説 ) 6B-1. 表計算ソフトの操作 1 条件付き書式の設定 1. ( ア )=E ( イ )= お 条件付き書式とは セルの数値によりセルの背景に色を付けたり 文字に色を付けたり アイコンをつけたりして分類することができる機能です 本問題では 以下の手順が解答となります 1 2 ユーザー定義の表示形式 1. ( ア )=2 ( イ )=4

More information

目次 1. フラッシュ型スライド教材を作ってみよう 2 2. 文字が順に消えていくスライド教材を作ってみよう 5 3. 文字が順に現れるスライド教材を作ってみよう 8 4. 音声とともに文字の色が変わるスライド教材を作ってみよう スライド教材を種類別にまとめてみよう 14 * 実践事例集

目次 1. フラッシュ型スライド教材を作ってみよう 2 2. 文字が順に消えていくスライド教材を作ってみよう 5 3. 文字が順に現れるスライド教材を作ってみよう 8 4. 音声とともに文字の色が変わるスライド教材を作ってみよう スライド教材を種類別にまとめてみよう 14 * 実践事例集 タスク型リーディング授業 による中 高等学校英語科の授業づくり 実践事例集 C 音読用 ICT 教材 作成ガイド 編 中学校外国語第 2 学年 高等学校外国語第 2 学年 プレゼンテーションソフトを使って 誰もが簡単に作成できる教材です 平成 27 年 (2015 年 )2 月滋賀県総合教育センター 目次 1. フラッシュ型スライド教材を作ってみよう 2 2. 文字が順に消えていくスライド教材を作ってみよう

More information

FutureWeb3 Web Presence Builderマニュアル

FutureWeb3 Web Presence Builderマニュアル FutureWeb3 Web Presence Builder マニュアル Vol.002 目次 目次... 2 ごあいさつ... 3 Web Presence Builder について... 4 Web Presence Builder の起動方法... 6 ホームページ ( サイト ) を作成する... 7 画面説明... 9 デザインを変更する... 10 デザインテンプレートを変更する...

More information

Word2013基礎 基本操作

Word2013基礎 基本操作 OA ベーシック Word2013 基礎基本操作 1 / 8 Word2013 基礎基本操作 基本操作前編 (WORD 基本操作 ) Word の起動と終了 操作 Word を起動します 1[ スタート画面 ] で [Microsoft Word2013] のタイルをクリックします Word が起動します タスクバーには Word のボタンが表示されます 2[ 白紙の文書 ] をクリックします 新規文書が表示されます

More information

目次 Adobe PDF でチェック & コメントのススメ チェック & コメントをはじめる前に チェック & コメントでよく使うツール ( その ) 6 チェック & コメントでよく使うツール ( その ) 8 コメントの確認と返信 0 共有レビュー機能で効率をさらにアップ 共有レビュー機能を使う

目次 Adobe PDF でチェック & コメントのススメ チェック & コメントをはじめる前に チェック & コメントでよく使うツール ( その ) 6 チェック & コメントでよく使うツール ( その ) 8 コメントの確認と返信 0 共有レビュー機能で効率をさらにアップ 共有レビュー機能を使う Adobe PDF ですぐにできるチェック & コメント Acrobat の注釈機能を使って共同作業をもっと効率的に! 目次 Adobe PDF でチェック & コメントのススメ チェック & コメントをはじめる前に チェック & コメントでよく使うツール ( その ) 6 チェック & コメントでよく使うツール ( その ) 8 コメントの確認と返信 0 共有レビュー機能で効率をさらにアップ 共有レビュー機能を使う前に

More information