App.XamlとMainPage.Xaml (5/5)
作成:2014-01-18 12:00
更新:2014-01-18 12:00
更新:2014-01-18 12:00
■MainPage.XamlにTextBoxを追加してみる
ひと通りの内容が頭に入ったところで、実際にページにGUI部品を配置してみましょう。
「MainPage.Xaml」を選択し、左側の「ツールボックス」をクリックすると、画面にツールボックスのウインドウがポップアップして現れます。この中の「コモンXAMLコントロール」というところにある「TextBlock」という部品をドラッグし、デザインエディタ(画面中央の真っ黒な部分)上にドロップしてください。これでTextBlockという部品が画面に追加されます。
TextBlockは、テキストを表示するための部品です。特に入力したり操作したりするような機能はなく、ただテキストが表示されるだけの非常にシンプルな部品です。
デザインエディタに配置した部品は、マウスでドラッグして位置を移動できます。また、ウインドウ右側に見えるプロパティウインドウから「テキスト」という項目を開けば、テキストファイルやスタイル、フォントなどを変更できるようになります。
またプロパティウインドウの「共通」というところにある「Text」というプロパティは、TextBlockに表示されるテキストです。これを変更することで表示テキストを変えられます。
「ドラッグして移動」「テキストでサイズやスタイルを変更」「Textで表示テキストを変更」――この3つを使って、適当に表示を整えましょう。そしてソースコードをチェックし、どのようにコードが変更されているのかを確認してみましょう。
下のリスト欄には、実際に配置したサンプルコードを挙げてあります。<Grid>タグの中に、<TextBlock>というタグが追加されていることがわかるでしょう。これは以下のようになっているでしょう。
――とりあえず、GUIに部品を配置するというのがどういうことか、これで少しわかりました。では次回、基本的な部品を配置して、動かしてみることにしましょう。
「MainPage.Xaml」を選択し、左側の「ツールボックス」をクリックすると、画面にツールボックスのウインドウがポップアップして現れます。この中の「コモンXAMLコントロール」というところにある「TextBlock」という部品をドラッグし、デザインエディタ(画面中央の真っ黒な部分)上にドロップしてください。これでTextBlockという部品が画面に追加されます。
TextBlockは、テキストを表示するための部品です。特に入力したり操作したりするような機能はなく、ただテキストが表示されるだけの非常にシンプルな部品です。
デザインエディタに配置した部品は、マウスでドラッグして位置を移動できます。また、ウインドウ右側に見えるプロパティウインドウから「テキスト」という項目を開けば、テキストファイルやスタイル、フォントなどを変更できるようになります。
またプロパティウインドウの「共通」というところにある「Text」というプロパティは、TextBlockに表示されるテキストです。これを変更することで表示テキストを変えられます。
「ドラッグして移動」「テキストでサイズやスタイルを変更」「Textで表示テキストを変更」――この3つを使って、適当に表示を整えましょう。そしてソースコードをチェックし、どのようにコードが変更されているのかを確認してみましょう。
下のリスト欄には、実際に配置したサンプルコードを挙げてあります。<Grid>タグの中に、<TextBlock>というタグが追加されていることがわかるでしょう。これは以下のようになっているでしょう。
<TextBlock HorizontalAlignment="Left" Margin="マージン設定"<TextBlock>タグの中に、プロパティウインドウで設定したものが属性として追加されている、ということがわかるでしょう。Xamlのタグは、このように「コントロール名のタグの中にプロパティとして設定された属性が記述される」という形になっているのですね。
TextWrapping="折り返し設定" Text="表示テキスト"
VerticalAlignment="縦の位置揃え" FontSize="フォントサイズ"/>
――とりあえず、GUIに部品を配置するというのがどういうことか、これで少しわかりました。では次回、基本的な部品を配置して、動かしてみることにしましょう。
(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"/> </Grid> </Page>
※関連コンテンツ