かずきのBlog@hatena

日本マイクロソフトに勤めています。このブログは個人ブログなので、ここに書いている内容は個人的な意見で会社の公式見解ではない点にご注意ください。好きなものは XAML と C# 。苦手なものは型の無い言語です。

VisualStateManagerでの状態切り替えがAppBarにも効くか試してみた

結論

効きました。

サンプル

動作

AppBarの一番右のボタンを押すとボタンが3個になったり2個になったり切り替わります。 これはアプリ内に定義しているVisualStateで制御しています。

内容

BlendでVisualStateを以下のような感じに定義しています。

f:id:okazuki:20140329122622j:plain

VSMでは、デフォルト状態でotherという名前のStackPanelを非表示にしておいて、OtherというVSMになたときにnormalという名前のStackPanelを非表示にしてotherのほうを表示するようにしています。

f:id:okazuki:20140329122845j:plain

VSMの切り替え

各AppBarの右端のボタンのイベントハンドラでGoToStateしています。

private void AppBarButton_Click(object sender, RoutedEventArgs e)
{
    VisualStateManager.GoToState(this, "Other", true);
}

private void AppBarButton_Click_1(object sender, RoutedEventArgs e)
{
    VisualStateManager.GoToState(this, "Normal", true);
}

実行結果

起動直後。AppBarをIsOpen="True"にしてるのでデフォルトで表示になってます。

f:id:okazuki:20140329123138j:plain

画面右端のボタンをクリックすると、VSMが切り替わってAppBarのボタンが2個の状態になっています。

f:id:okazuki:20140329123258j:plain