Hiding AppBar

Question

Hi - I have an appbar button, that, when clicked, shows a UI dialog.  This dialog has images that have tooltips.

On click of the appbar button to show the dialog, I want the appbar to go away so hovering over the images will show the tooltips.  I've set isSticky to false, but the appBar doesn't dismiss until the user clicks somewhere.

How do I automatically dismiss the appbar when the user clicks a button inside of it?

Thanks.

P.S.  If anyone has a boilerplate snippet of xaml for a settings button in the appbar that has a nice gear icon and text label, I'd be interested in that too.  Thanks.

Answer 1

Also note -- I'm using MVVM, and the handler I'm using for my AppBar button is a command that's bound through my VM object.  

I'm half expecting someone to tell me that I should call AppBar.close from within my handler....if that's the case, I need to know how to get a reference to the AppBar itself (and ideally how to get the reference passed through to my VM command).

Answer 2

Can't you just name your AppBar "botAppBar" then close it using "botAppBar.IsOpen=false;".

Answer 3

Thanks -- but there's still then the problem that I need to get a reference to the AppBar object in my view model.

I wonder if I can actually just bind the IsOpen property to a property in my VM that's already the data context for the AppBar....will try that.

Answer 4

I too am having this exact problem.  I cannot reference the app bar from within Viewmodel because that would defeat the purpose of the decoupling.  

I have tried binding the property of the app bar "IsOpen" to my viewmodel property "IsAppBarOpen" like so...

IsOpen="{Binding CurrentSection.IsAppBarOpen, Mode=TwoWay}"

However my MVVM property does not get updated when the AppBar is opened via swipe or click.  Any solution to this would be great. thanks for reading.

Answer 5

The appbar can be referenced with TopAppBar or BottomAppBar in the code behind for your xaml page.  For example, if you have an AppBarButton in a TopAppBar which maybe you have designed like this:

    <Page.TopAppBar>
        <AppBar>
            <Grid>
                <StackPanel Orientation="Horizontal">
                    <AppBarButton Label="DoSomething" Click="MyAppBarButton_Click" />
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.TopAppBar>

Then in the code behind, simply set this.TopAppBar.IsOpen to false.

        private void MyAppBarButton_Click(object sender, RoutedEventArgs e)
        {
            this.DoSomething();
            this.TopAppBar.IsOpen = false;
        }