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

結論

効きました。

サンプル

動作

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

内容

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

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

VSMの切り替え

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

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

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

実行結果

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

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