Silverlight をインストールするには、ここをクリックします*
Japan変更|すべてのMicrosoft のサイト
Microsoft Japan Home
|ニュース レターに登録する (無料)|オンライン ショッピング
Microsoft Users ホーム  


プログラミング☆簡単レシピ

レシピ 7 : VB で紙芝居風エディタを作ろう / レイアウトの変更


近藤くん


近藤くん
30 歳、都内在住、某メーカー営業職、最近子供が生まれてますますヤル気満々!
PC 歴 5 年。趣味で Visual Basic を少し使えるので、休日は簡単なソフトを自作することも。


謎のおじいさん


謎のおじいさん
レシピのガイド役。
時々現れてはいろんな解説をしてくれる。
おじいさんが現れたら、とりあえずチェック!


【 紙芝居風エディタを作るために使うツール 】

Microsoft Visual Basic .NET Standard Version2003 日本語版

※ Visual Basic .NET を使うには、お使いの PC に以下のうちのどれかがインストールされている必要があります。

  • Microsoft Windows 2000 Professional または Server (サービスパック 2 推奨)
  • Microsoft Windows XP Home Edition または Professional
  • Microsoft Windows Server 2003
  • Microsoft Internet Explorer 5.5 またはそれ以降

プログラミング☆簡単レシピ

レイアウトの変更

思案する近藤君

前回、近藤くんは画像用と文章用の領域を配置し、画像の挿入とフォントの変更ができるようにしました。今回は、それぞれの領域の大きさや位置を変更する作業に挑戦します。

近藤 「う〜ん、どうしようかな」

奥さん「あら、お悩み?」

実は、画像と文章の領域ね、今は大きさが固定されているだろう。これをそれぞれ変更できるようにするつもりなんだ。
そこで、[レイアウト]ボタンを押したら、変更用のボタン類が表示されるようにしようと考えていたわけ。でも、はじめからボタン類が見えていたほうが便利かなとおもってもいるんだ。どっちがいいかな?

スケッチ図

この、レイアウト変更用の項目という部分ね。
わたしは、最初に見たスケッチがすっきりしていて好きよ。レイアウトって、ひんぱんに変えるわけではないでしょう。

そうだね。やっぱり、最初のイメージ通りにいこうか。

というわけで、近藤くんは、スケッチ通りに作業を進めるようです。

Point

近藤くんは、VBを少しは知っていたから順調なようじゃが、ここで、前回のレイアウトについてまとめておこうかの。配置したコントロールの名称などは、大事なもの、コード記述でちょっと間違ってしまうとエラーになるからの。

配置コントロール図解

青い字のPagePanelButtonPanelは、配置するコントロールの内容をわかりやすく区別するためのものじゃったの。赤い字のpictBoxrichBoxpictImageSetrichFontSetは、配置したコントロールの名前じゃが、オブジェクト名ともいう。これからは、こう呼ぶことにしようかの。
繰り返して言うが、オブジェクト名はコードを記述するときに使う大切なものじゃ。よく覚えておくとよいな。
さて、今回は、pictBox(画像エリア)とrichBox(文章エリア)の大きさを変更できるようにしようというわけだな。



プログラミング☆簡単レシピ

レイアウト変更のしくみ

今回、近藤くんが機能を追加しようとおもっているのは、ピンク色の部分です。しくみは、[レイアウト変更]ボタンを押したら、レイアウト領域のボタン類を表示して画像エリアと文章エリアの大きさと位置を変更できるようにしようというものです。
レイアウト領域の初期設定は非表示で、[レイアウト変更]ボタンを押したときだけ現れるようにします。

レイアウト変更の仕組み

そこで、近藤くんは、コントロールの配置の手順を次のように考えています。

  1. レイアウト変更領域用のパネルを設定し、コンボボックスとラジオボタン、[変更完了]ボタンを配置する。
  2. [レイアウト変更]ボタン用のパネルを設定し、[レイアウト変更]ボタンを配置する。
  3. 画像エリアと文章エリアの大きさを変更するためのハンドルを配置する。



Back
1/5
Next


右マージン 10px
「VB で紙芝居風
エディタを作ろう」
レイアウト
変更の手順

イントロ

レイアウトの変更 / レイアウト変更のしくみ

ステップ 1

レイアウト領域を作成する (1)

ステップ 2

レイアウト領域を作成する (2)

ステップ 3

コードを記述する (1)

ステップ 4

コードを記述する (2)

完成!
右マージン 10px