ボタンを使って動かそう！ (1/4)
作成:2014-01-25 11:28
更新:2014-01-25 11:28
更新:2014-01-25 11:28
■TextBoxとButton
前回、TextBlockという部品（コントロール）を画面に配置してみました。Visual Studioでは、こんな具合にツールボックスから使いたい部品を選んでビジュアルデザイナをドラッグするだけで、必要な部品を配置していくことができます。
基本的な部品は、ウールボックスの「コモンXAMLコントロール」というところにまとめられています。まずは、これらの基本コントロールを使えるようになるのが当面の目標といってよいでしょう。
TextBlock（テキストを表示するもの）の次に覚えるべき部品は？ それは、ユーザーが何かを入力するための部品と、何かの処理を実行させるための部品でしょう。これは「TextBox」と「Button」として用意されています。
TextBox
テキストを入力するためのコントロールです。改行しない１行だけのテキストが書き込めます。プロパティの「共通」にある「Text」というプロパティでデフォルトのテキストを設定し、「テキスト」にあるプロパティを使って表示フォントの設定が行えます。
Button
いわゆるプッシュボタンです。マウスやタッチでプッシュすることで、あらかじめ設定しておいた処理を実行させることができます。これもプロパティの「共通」にある「Text」で表示されるテキストを、「テキスト」のプロパティで表示フォントを設定できます。
まずは、TextBoxとButtonを１つずつ配置してみましょう。そして位置や表示フォントを適当に調整してください。画面の部品の配置はマウスで操作できますから、ちょっと試行錯誤すればすぐにデザインできるようになります。
なお、配置した部品を選択したり動かしたりするときは、ツールボックスから「ポインタ」を選びましょう。他のコントロールが選ばれたままだとまた新しく部品を作ってしまいますから。
部品を配置したり編集したりすると、MainPage.Xamlのソースコードが自動生成されていきます。下に生成されたXAMLのソースコードを掲載しておきましょう。それぞれのデザイン内容によって細かな部分（プロパティの値など）は違っているでしょうが、基本的な形は同じはずです。
前回、<Page>タグの中に<Grid>タグが配置される、というMainPageの基本的なタグ構成についてチェックしました。その中に、<TextBlock>, <TextBox>, <Button>といったタグが組み込まれていることがわかります。これらのタグが、配置したコントロールだったのです。Visual Studioのビジュアルデザイナは、XAMLファイルのタグを自動生成するものだったんですね。
基本的な部品は、ウールボックスの「コモンXAMLコントロール」というところにまとめられています。まずは、これらの基本コントロールを使えるようになるのが当面の目標といってよいでしょう。
TextBlock（テキストを表示するもの）の次に覚えるべき部品は？ それは、ユーザーが何かを入力するための部品と、何かの処理を実行させるための部品でしょう。これは「TextBox」と「Button」として用意されています。
TextBox
テキストを入力するためのコントロールです。改行しない１行だけのテキストが書き込めます。プロパティの「共通」にある「Text」というプロパティでデフォルトのテキストを設定し、「テキスト」にあるプロパティを使って表示フォントの設定が行えます。
Button
いわゆるプッシュボタンです。マウスやタッチでプッシュすることで、あらかじめ設定しておいた処理を実行させることができます。これもプロパティの「共通」にある「Text」で表示されるテキストを、「テキスト」のプロパティで表示フォントを設定できます。
まずは、TextBoxとButtonを１つずつ配置してみましょう。そして位置や表示フォントを適当に調整してください。画面の部品の配置はマウスで操作できますから、ちょっと試行錯誤すればすぐにデザインできるようになります。
なお、配置した部品を選択したり動かしたりするときは、ツールボックスから「ポインタ」を選びましょう。他のコントロールが選ばれたままだとまた新しく部品を作ってしまいますから。
部品を配置したり編集したりすると、MainPage.Xamlのソースコードが自動生成されていきます。下に生成されたXAMLのソースコードを掲載しておきましょう。それぞれのデザイン内容によって細かな部分（プロパティの値など）は違っているでしょうが、基本的な形は同じはずです。
前回、<Page>タグの中に<Grid>タグが配置される、というMainPageの基本的なタグ構成についてチェックしました。その中に、<TextBlock>, <TextBox>, <Button>といったタグが組み込まれていることがわかります。これらのタグが、配置したコントロールだったのです。Visual Studioのビジュアルデザイナは、XAMLファイルのタグを自動生成するものだったんですね。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<Page
x:Class="MyWin8App.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyWin8App"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBlock HorizontalAlignment="Left" Margin="91,59,0,0" TextWrapping="Wrap"
Text="Welcome to Windows 8 App!" VerticalAlignment="Top" FontSize="36"/>
<TextBox HorizontalAlignment="Left" Height="44" Margin="82,145,0,0"
TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="671"
FontSize="24"/>
<Button Content="Click" HorizontalAlignment="Left" Height="67" Margin="82,249,0,0"
VerticalAlignment="Top" Width="288" FontSize="16"/>
</Grid>
</Page>
※関連コンテンツ