[Windows ストア アプリ] Borderコントロールの背景色を変更する

Borderコントロールの背景色を変更するには Backgroundプロパティを使用します。

BackgroundプロパティはBrush型のプロパティで、Brushクラスから派生した、LinearGFradientBrush, ImageBrush, SolidColorBrushなどを指定することができます。

純色を指定するには SolidColorBrush を使用します。

XAMLでは、直接色名を指定をしていすることもできますし、6桁の16進数や、アルファ値を含めた8桁の16進数を指定することも可能です。

下記はSolidBrushColorを指定する例です。

XAMLの例

<Border x:Name="border1" Background="#FFFF0000"/>
<Border x:Name="border2" Background="#FF00FF00"/>
<Border x:Name="border3" Background="#FF0000FF"/>

コードから指定する場合には SolidColorBrushの値を指定します。

VBの例

'赤を指定
border1.Background = New SolidColorBrush(Windows.UI.Colors.Red)
'青を指定
border2.Background = New SolidColorBrush(Windows.UI.Color.FromArgb(&HFF, &H0, &HFF, &H0))
'緑を指定
border3.Background = New SolidColorBrush(Windows.UI.Color.FromArgb(&HFF, &H0, &H0, &HFF))

C#の例

// 赤を指定
border1.Background = new SolidColorBrush(Windows.UI.Colors.Red);
// 青を指定
border2.Background = new SolidColorBrush(Windows.UI.Color.FromArgb(0xFF, 0x00, 0xFF, 0x00));
// 緑を指定
border3.Background = new SolidColorBrush(Windows.UI.Color.FromArgb(0xFF, 0x00, 0x00, 0xFF));

[Windows ストア アプリ]コントロールに名前をつける

Windowsアプリケーションでフォームにコントロールをドラッグ&ドロップすると自動で名前がつけられます。

たとえばButtonコントロールをドラッグ&ドロップすると「button1」のように名前が付けられます。

しかしWindows ストア アプリで使用するコントロールはドラッグ&ドロップしても自動では名前がつけられません。

コードからコントロールを操作したい場合や、XAMLでコントロール同士の連携を取りたい場合には、コントロールに名前が付けられている必要があります。

コントロールに名前を付けるには、プロパティウィンドウで設定するか、XAMLの属性で指定を行います。

  • プロパティウィンドウで名前を付ける

ページ上に貼り付けられたコントロールを選択した後、プロパティウィンドウの名前欄にコントロールにつける名前を入力します。既定では「」となっています。

  • XAMLで名前を付ける

XAMLで名前を付ける場合は、該当するコントロールに属性 x:Name を挿入し、コントロールにつける名前をダブルクォーテーションで括ります。

<Button x:Name="button1" Content="Button" HorizontalAlignment="Left" Margin="34,26,0,0" VerticalAlignment="Top"/>

[Windows ストア アプリ] はじめてのWindows ストア アプリを作成する

Windows 8とVisual Studio 2012のRTM版が出たので、早速アプリを作ってみたいと思います。

とは言っても、Windows 8用のアプリである「Windows ストア アプリ」の作り方はこれまでとは勝手が違うため、試行錯誤しながら学んでいきます。
まず、Visual Studio 2012を起動します(スクリーンショットはすべてUltimate版のものです。使用する環境によっては一部表記が異なる場合があります。)


はじめに「新しいプロジェクト」をクリックします(メニューの[ファイル]-[新規作成]-[プロジェクト]でも同じ)。

「新しいプロジェクト」ダイアログが表示されるので、左側の「テンプレート」で[Visual C#]-[Windows ストア]を選択します。この「Windows ストア」がWindows 8用のアプリケーションを作成するテンプレートとなります。

ダイアログの右側では「新しいアプリケーション」を選択し、「名前」欄には「HelloWorld」と入力します。

新規プロジェクト作成後、ソリューションエクスプローラーをみると「MainPage.xaml」というファイルがあることがわかります。

この「MainPage.xaml」がメイン画面となります。

それではツールボックスを開き、「TextBlock」をMainPage.xamlへドラッグ&ドロップします。

次に、プロパティウィンドウでTextBlockのTextプロパティに「Hello World!!」と入力し、フォントサイズを 「36px」に設定します。

あとは[F5]キーを押して実行します。

少し待つと、下図のように黒い画面に「Hello World!!」と表示されます。

これではじめての「Windows ストア アプリ」ができました。

終了するには[Alt]+[F4]キーを押します。

また、Visual Studioに戻るには[Alt]+[Tab]キーでアプリケーションを切り替えて戻ります。

今後はコントロールの使用方法や新しいページの追加方法などを採り上げていく予定です。