[Windows ストア アプリ] アプリバーに表示するボタンをグループ化する

アプリバーに表示するボタンはグループ化することができます。

グループ化を行うと、画面の左側の右側に表維持するボタンを分けることができます。

ボタンをグループ化するには、最初にAppBarにGridを配置して左右2つに分割します。次に、分割した左側と右側にそれぞれStackPanelを配置し、その中にボタンを配置します。

下記はアプリバーに表示するボタンをグループ化する例です。

左側には[Edit][Remove][Add]の3つのボタンを、右側には[Refresh][Help]の2つのボタンを配置しています。

ボタンをグループ化する例

<Page.BottomAppBar>
    <AppBar IsOpen="True">
		<Grid>
			<Grid.ColumnDefinitions>
				<ColumnDefinition/>
				<ColumnDefinition/>
			</Grid.ColumnDefinitions>
			<StackPanel Orientation="Horizontal">
				<Button Style="{StaticResource EditAppBarButtonStyle}" />
				<Button Style="{StaticResource RemoveAppBarButtonStyle}" />
				<Button Style="{StaticResource AddAppBarButtonStyle}" />
			</StackPanel>
			<StackPanel Grid.Column="1" HorizontalAlignment="Right" Orientation="Horizontal">
				<Button Style="{StaticResource RefreshAppBarButtonStyle}" />
				<Button Style="{StaticResource HelpAppBarButtonStyle}" />
			</StackPanel>
		</Grid>
	</AppBar>
</Page.BottomAppBar>

[Windows ストア アプリ] アプリバーの表示/非表示を切り替える

アプリバーの表示/非表示はコードから操作することが可能です。

アプリバーの表示/非表示はIsOpenプロパティで設定し、Trueにするとアプリバーが表示されます。

下記はコードからアプリバーの表示/非表示を行う例です。

画面に貼り付けられたToggleButtonの状態(押されているかどうか)で、アプリバーの表示/非表示を切り替えます。

アプリバーの表示/非表示を切り替える例

XAMLの例

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
	<ToggleButton x:Name="ToggleButton1" Content="AppBarの表示/非表示" HorizontalAlignment="Left" Margin="10,644,0,0" VerticalAlignment="Top" Checked="ToggleButton1_Checked"/>
</Grid>
<Page.BottomAppBar>
    <AppBar x:Name="bottomAppBar" IsOpen="True">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <StackPanel Orientation="Horizontal">
                <Button Style="{StaticResource EditAppBarButtonStyle}" Click="Button_Click"/>
                <Button Style="{StaticResource RemoveAppBarButtonStyle}" Click="Button_Click"/>
            </StackPanel>
            <StackPanel Grid.Column="1" HorizontalAlignment="Right" Orientation="Horizontal"/>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

C#のコード例(ToggleButtonクリック時)

// ToggleButtonチェック時の処理
private void ToggleButton1_Checked(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
	bottomAppBar.IsOpen = (bool)ToggleButton1.IsChecked;
}

[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"/>

Virtual BoxにWindows 8 Release Previewをインストールしてみた(Windows 8 RPインストール編)

前回はVirtual Boxの設定までを書いたので、今回はいよいよインストールについて。

前回の記事は以下から参照ください。


Windows 8 Release Previewをインストールする

1.前回作成したVirtual BoxのWindows 8 Release Previewを起動します。

2.Windows セットアップがはじまり最初の設定画面が表示されるので、任意の設定を行い[次へ]ボタンをクリックします。

3.[今すぐインストール]ボタンをクリックします。

4.プロダクトキーを入力して[次へ]ボタンをクリックします。

5.ライセンス条項が表示されるので[同意]にチェックを付け[次へ]ボタンをクリックします。

6.次にインストールの種類を選択します。「カスタム:Windows のみをインストールする」をクリックします。

7.インストール場所を選択します。「ドライブ0….」を選択して[次へ]ボタンをクリックします。

8.インストールが始まります。

9.パーソナル設定を行います。ここではWindows 8で使用される基本色の選択およびPC名を入力します。

10.設定画面が表示されます。ここでは[簡単設定を使う]ボタンをクリックしました。もちろん[自分で設定する]ボタンをクリックしてもOK。

11.PCへのサインインを行います。Windows Live IDを持っている場合はそのメールアドレスを入力します。持っていない場合はこれを機会に作成することをおすすめします。[メールアドレスを新規登録]からいけるはず。

12.先ほど入力したメールアドレスに対するパスワードを入力し[次へ]ボタンをクリックします。

13.セキュリティ確認情報として携帯のメールアドレスか電話番号、連絡用メールアドレスを入力します。自分の場合は登録しておいた情報が自動入力された状態でこの画面が表示されました。

14.アカウントが作成されます。

15.インストール完了まであと少しです。

16.お疲れ様でした。

 

 

 

Virtual BoxにWindows 8 Release Previewをインストールしてみた(Virtual Box設定編)

Windows 8 Release PreviewをVirtual Boxにインストールしてみました。

Windows 8 Release Previewはこちらから、Virtual Boxはこちらからダウンロードできます。

isoイメージをダウンロードしてインストールした覚え書きとして下記に手順を残しておきます。


Virtual Boxの設定

1.Virtual Boxを起動し[新規]ボタンをクリックします。

2.「新規仮想マシンの作成」ダイアログが表示されるので、「名前」欄に仮想マシンの名前を入力。OSタイプ欄では[オペレーティングシステム]に「Microsoft Windows」を[バージョン]に「Windows 8」を選択します。(きちんとWindows 8が選択できるところがすばらしい)

3.仮想マシンで使用するメモリサイズを設定します。初期値は1024MBです。ここでは2048MBを割り当ててみました。

4.次に仮想ハードディスクの設定を行います。[起動ディスク]にチェックを付け、[新規ハードディスクの作成]を選択します。

5.仮想ディスクのファイルタイプを設定します。ここでは[VDI(Virtual Box Disk Image)]を選択しました。(英語と日本語が入り交じった説明…. 前の画面までは全部日本語表示だったのに…)

6.仮想ディスクの詳細設定をします。ハードディスクサイズを動的に割り当てる(Dynamically allocated)か固定サイズ(Fixed size)にするかを選択します。ここでは[Dynamically allocated]を選択しました。(ここからすべて英語の説明になりました…)

7.仮想ディスクの保存場所とサイズを設定します。Cドライブに空き容量がない場合は下図のように別ドライブに保存してもOKです。ハードディスクサイズの初期値は25.00GBです。任意のサイズに設定します。

8.これまでの設定の概要(仮想ディスク)が表示されます(英語)。確認したら[Create]ボタンをクリックします。

9.これまでの設定の概要(追加ディスク)が日本語で表示されます(日本語)。確認したら[Create]ボタンをクリックします。(概要説明、英語と日本語両方表示する意味がわからない…

10.以上でWindows 8 Release Previewをインストールする環境が整い、Virtual Boxの画面は下図のようになります。

11.最後にVirtual Boxの一覧から作成した「Windows 8 Release Preview」を選択し[設定]ボタンをクリックします。

[ストレージ]-[IDE コントローラ]-[空]を選択し、CD-DVDドライブのところにあるCDアイコンをクリックして[仮想CD/DVDディスクファイルの選択…]をクリックします。

その後ダウンロードしておいたisoイメージを選択します。

Windows 8 Release Previewのインストールは次回説明します。

Virtual BoxにWindows 8 Release Previewをインストールしてみた(Windows 8 RPインストール編)