クリックすると選択状態になるボタンをトグルボタンというらしいのですが、このボタンが使えるようになるまで少し時間がかかってしまったのでメモしておきます。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
修正するには StandardStyle.xaml の AppBarButtonStyle の Grid に以下の TextBlock を追加します。
<TextBlock x:Name="BackgroundCheckedGlyph" Visibility="Collapsed" Text="" 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="" FontFamily="Segoe UI Symbol" FontSize="53.333" Margin="-4,-19,0,0" Foreground="{StaticResource AppBarItemBackgroundThemeBrush}"/>
<TextBlock x:Name="BackgroundCheckedGlyph" Visibility="Collapsed" Text="" FontFamily="Segoe UI Symbol" FontSize="53.333" Margin="-4,-19,0,0" Foreground="{StaticResource AppBarItemForegroundThemeBrush}"/>
<TextBlock x:Name="OutlineGlyph" Text="" 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。
Clickのイベントすべてに状態変化のプログラムを書くのは大変なので、以下のサイトのようにClickを実装しておくのもよいかもしれませんね。
