かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

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