Blogger Syntax Highliter

Wednesday, September 12, 2012

Windows8のAppBarでToggleButton(トグルボタン)を使う

 

クリックすると選択状態になるボタンをトグルボタンというらしいのですが、このボタンが使えるようになるまで少し時間がかかってしまったのでメモしておきます。Windows 8 標準アプリのカメラアプリのタイマーボタンでも使われてるし、プロパティをチェックするだけで簡単に利用できると思い込んでいたのが失敗でした。

とりあえず、自力で実装している例は、以下のサイトを参考にしてください。Windows8 RTM以前はToggleButton がなかったようです。

http://timheuer.com/blog/archive/2012/03/19/creating-a-metro-style-toggle-button-for-appbar.aspx

とは言え、Windows8 RTM より ToggleButton が含まれているようですので、これを使ってみます。

まずは修正

使い方は XAML で Button と書いているところを ToggleButton にして、Click イベントなどで state を変更するだけですが、そのまま利用すると Exception が発生します。これは、Microsoft Visual Studio で作成される StandardStyle.xaml の AppBarButtonStyle に”BackgroundCheckedGlyph” TextBlock が抜けているからのようです。参考にしたサイトは以下です。

Fixing the AppBarButtonStyle for ToggleButton support in your Win8 apps

http://www.visuallylocated.com/post/2012/08/27/Fixing-the-AppBarButtonStyle-for-ToggleButton-support-in-your-Win8-apps.aspx

修正するには StandardStyle.xaml の AppBarButtonStyle の Grid に以下の TextBlock を追加します。

<TextBlock x:Name="BackgroundCheckedGlyph" Visibility="Collapsed" Text="&#xE0A8;" FontFamily="Segoe UI Symbol" FontSize="53.333" Margin="-4,-19,0,0" Foreground="{StaticResource AppBarItemForegroundThemeBrush}"/>

追加すると以下のようになります。(一部抜粋)

<Style x:Key="AppBarButtonStyle" TargetType="ButtonBase">
    <Setter Property="Foreground" Value="{StaticResource AppBarItemForegroundThemeBrush}"/>
    <Setter Property="VerticalAlignment" Value="Stretch"/>
    <Setter Property="FontFamily" Value="Segoe UI Symbol"/>
    <Setter Property="FontWeight" Value="Normal"/>
    <Setter Property="FontSize" Value="20"/>
    <Setter Property="AutomationProperties.ItemType" Value="App Bar Button"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ButtonBase">
                <Grid x:Name="RootGrid" Width="100" Background="Transparent">
                    <StackPanel VerticalAlignment="Top" Margin="0,12,0,11">
                        <Grid Width="40" Height="40" Margin="0,0,0,5" HorizontalAlignment="Center">
                            <TextBlock x:Name="BackgroundGlyph" Text="&#xE0A8;" FontFamily="Segoe UI Symbol" FontSize="53.333" Margin="-4,-19,0,0" Foreground="{StaticResource AppBarItemBackgroundThemeBrush}"/>
                            <TextBlock x:Name="BackgroundCheckedGlyph" Visibility="Collapsed" Text="&#xE0A8;" FontFamily="Segoe UI Symbol" FontSize="53.333" Margin="-4,-19,0,0" Foreground="{StaticResource AppBarItemForegroundThemeBrush}"/>
                            <TextBlock x:Name="OutlineGlyph" Text="&#xE0A7;" FontFamily="Segoe UI Symbol" FontSize="53.333" Margin="-4,-19,0,0"/>
                            <ContentPresenter x:Name="Content" HorizontalAlignment="Center" Margin="-1,-1,0,0" VerticalAlignment="Center"/>
                        </Grid>

これで準備が整いました。


いよいよ使ってみる


とりあえず、以下のようなAppBarを準備

<Page.BottomAppBar>
    <AppBar x:Name="BottomAppBar1" IsSticky="True" IsOpen="True" AutomationProperties.Name="Bottom App Bar">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
                <Button x:Name="appbarBackButton" AutomationProperties.Name="Back" Style="{StaticResource PreviousAppBarButtonStyle}" HorizontalAlignment="Left"/>
                <StackPanel.ChildrenTransitions>
                    <TransitionCollection>
                        <AddDeleteThemeTransition/>
                    </TransitionCollection>
                </StackPanel.ChildrenTransitions>
            </StackPanel>
            <StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
                <ToggleButton x:Name="RotateCamera" Style="{StaticResource ClockAppBarButtonStyle}" Tag="Uncheck" Click="Button_Click"/>
                <ToggleButton x:Name="TimerCamera" Style="{StaticResource ClockAppBarButtonStyle}" Tag="Check" Click="Button_Click"/>
                <StackPanel.ChildrenTransitions>
                    <TransitionCollection>
                        <AddDeleteThemeTransition/>
                    </TransitionCollection>
                </StackPanel.ChildrenTransitions>
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

ToggleButton のClickイベントで、トグルボタンの状態を変化させます。以下はクリックされる度に、CheckedとUncheckedを繰り返すコード

private void Button_Click(object sender, RoutedEventArgs e)
{
    ToggleButton button = (ToggleButton)sender;
    VisualStateManager.GoToState(button, button.IsChecked.Value ? "Checked" : "Unchecked", false);
}

実行した結果は以下のような感じです。左はUnchecked、右はChecked。


Toggle


Clickのイベントすべてに状態変化のプログラムを書くのは大変なので、以下のサイトのようにClickを実装しておくのもよいかもしれませんね。


http://www.visuallylocated.com/post/2012/09/04/Fixing-the-VisualState-of-your-AppBar-ToggleButton.aspx

Saturday, September 8, 2012

Azure座談ハンズオン大会+JAZUG結成2周年イベントの資料

 

Azure座談ハンズオン大会+JAZUG結成2周年イベントの資料を一時的に置いてみました。
多くの方のBlogを参考にしてます。ありがとうございまーす。

Azure Caching
https://skydrive.live.com/redir?resid=963F6474C57959BF!301&authkey=!AIU5ATg5VVYv-Rc

Thursday, September 6, 2012

Windows Azure Cloud ServiceのためのVisual Studioインストール

 

Windows Azure Spring Release 2012 により多くの機能が提供され、それに伴い様々な開発環境が提供されています。そこで初心者向けに、Windows Azure Cloud Service の.NET開発環境構築手順を紹介します。

多くの方が利用することを想定して、今回は無料で利用可能なVisual Studio Express 2012 for Webを使用しました。

Visual Studio Express 2012 for Webのインストール

Webブラウザを使用して、下記のページから「Visual Studio 2012 Express for Web with Windows Azure SDK for .NETのダウンロード」をクリックしてインストールを始めてください。

http://www.microsoft.com/visualstudio/11/ja-jp/products/express

このリンクを使用するとVisual Studio 2012 Express for Webと.NET利用者のためのWindows Azure SDKが自分のコンピュータにインストールされます。

VS2012_BLOG

 

Web Platform Installerの実行

「Visual Studio 2012 Express for Web with Windows Azure SDK for .NETのダウンロード」をクリックすると、Web Platform のインストール画面が表示されます。Web Platform Installerをクリックしてインストーラを実行します。
 
VS2012_01

インストーラの実行確認のポップアップが表示されますのでVWD11AzurePack.exeを実行します。
 
VS2012_02

Web Platform Installerが起動され、Visual Studio Express 2012 for Web with Windows Azure SDKインストールウィザードが表示されます。インストールをクリックします。

VS2012_03

インストールに関係するアプリケーションソフトウェアおよびコンポーネントが表示されます。これらのソウトウェアのライセンス条項に同意します。
 

VS2012_04

インストールが開始されます。コンピュータ環境によって異なりますが、数十分でインストールは完了します。
 
VS2012_05

ちょっと注意事項

インストール中に再起動を求められる時があります。その時は「はい」をクリックして再起動をしてください。次回の起動時にWeb Platform Installerが再度起動されてインストールが再開されます。

VS2012_07

※Web Platform Installerの初期実行時や、コンピュータの再起動時に「次のプログラムに、このコンピュータの設定を許可しますか?」のようなメッセージでWeb Platform Installerの実行に関する確認が行われますので「はい」をクリックしてください。


正常にインストールされたら「完了」をクリックしてインストールを終了させます。

VS2012_08

Visual Studio Express 2012 for Webの起動確認

スタートメニューから「VS Express for Web」のコンテキストメニューを表示して、「管理者として実行」を選択してVisual Studio Express 2012 for Webを起動します。

VS2012_11_1

プロダクトキーの登録画面が表示されたら、「オンライン登録」をクリックしてプロダクトキーを取得します。

VS2012_10_BLOG

Live IDを入力するとプロダクトキーが表示されたページが表示されます。このプロダクトキーを登録してください。

VS2012_11_BLOG

Visual Studio Express 2012 for Webが起動されれば開発環境の構築は完了です。

VS2012_12

すごく簡単に開発環境を利用することができるので、初めての方でも安心ですね!

あ、最後にWindows Azureのアカウントは以下のURLから取得します。

http://www.windowsazure.com/ja-jp/

次は簡単なアプリケーションを作ってみますね。