Switch app bar within the same page

Feb 12, 2013 at 1:23 PM
Edited Feb 12, 2013 at 1:36 PM
Here's the scenario I am trying to implement:

In a pivot item, when user clicks on the 'New comment' app bar button, I need to replace it with 2 other buttons ('send' and 'attach').

Is it possible to achieve this with AppBarUtils?



Thanks!
Feb 12, 2013 at 4:07 PM
Edited Feb 12, 2013 at 4:08 PM
this is kind of urgent, I would appreciate a fast reply
Coordinator
Mar 5, 2013 at 9:39 AM
Sorry for the late response. Kind of busy these days.

The answer is yes. You can use the StateChangedTrigger together with SwitchAppBarAction. Refer to How to show different app bar for different page state? for the code sample. Basically you can think of the page containing two states, one with the 'new comment' button, the other with 'send' and 'attach'. Then you can have the 'new comment' button to trigger a state change.
Jul 3, 2013 at 1:21 PM
Edited Jul 3, 2013 at 2:08 PM
Hi,

Is it possible to use both SelectedPivotItemChangedTrigger and StateChangedTrigger at the same time?
Similarly to nitescua I'm also trying to implement several 2-state appbars unique for each pivot item.

I managed to get the correct results via this ugly hacky way, just curious if there is a better solution:
  • Inside Pivot but outside of any PivotItem:
<i:Interaction.Triggers>
    <abu:SelectedPivotItemChangedTrigger>
        <abu:SwitchAppBarAction>
            <abu:AppBar Id="0" />
            <abu:AppBar Id="1" />
        </abu:SwitchAppBarAction>
    </abu:SelectedPivotItemChangedTrigger>
</i:Interaction.Triggers>
  • Inside each PivotItem:
<i:Interaction.Triggers>
    <abu:StateChangedTrigger State="{Binding IsCheckModeActive}">
        <abu:SwitchAppBarAction>
            <abu:AppBar Id="0">
                <abu:AppBarButton Text="select" .... />
            </abu:AppBar>
            <abu:AppBar Id="1">
                <abu:AppBarButton Text="cancel" ... />
            </abu:AppBar>
        </abu:SwitchAppBarAction>
    </abu:StateChangedTrigger>
</i:Interaction.Triggers>
  • In the code-behind we need to raise StateChanged in some delay, so trigger will catch it, otherwise app bar will be empty:
private void OnPivotChanged(object sender, SelectionChangedEventArgs e) {
    Task.Run(() => {
        Thread.Sleep(500); // Delay for AppBarUtils, without it nothing will happen
        Dispatcher.BeginInvoke(() => {
            switch (Pivot.SelectedIndex) {
                case 0:
                    FirstViewModel.RaisePropertyChanged("IsCheckModeActive");
                    break;
                case 1:
                    SecondViewModel.RaisePropertyChanged("IsCheckModeActive");
                    break;
            }
        });
    });
}