Search code examples
c#xamluwpappbar

XAML UWP AppBar not responding

I got a strange behavior in my UWP App.

I have an AppBar with three buttons on top of my page. When I'm navigating to my page via the NavView the AppBar is not responding, neither the buttons nor the menu (the three dots), there is also no "mouseover". When I'm navigating to the page again it works fine.

As far as I could see is that when I remove the "isOpen" property in the code it seems to be working. As soon as I set the property (either in C# or in the XAML code) it is unresponsive at the first navigation

<AppBar x:Name="AppBar" IsSticky="True" Margin="0,0,0,0"  IsOpen="True" >
  <StackPanel Orientation="Horizontal">
    <AppBarButton Label="Reset" Icon="AllApps" Click="ButtonResetGrid" />
    <AppBarButton Label="Export" Icon="AllApps" Click="ButtonExport" />
    <AppBarButton Label="Refresh" Icon="AllApps" Click="ButtonRefreshCode" />
  </StackPanel>
</AppBar>

This is when navigating to the page for the first time

Not Working: enter image description here

after navigating a second time (you can see the mouseover):

Expected Behavior enter image description here

Maybe someone has an idea or a good hint.

Solution

  • There are remarks in official document, You should use the AppBar only when you are upgrading a Universal Windows 8 app that uses the AppBar, and need to minimize changes. For new apps in Windows 10, we recommend using the CommandBar control instead. Please try use CommandBar like the follow.

    <CommandBar>
    <AppBarButton Label="Reset" Icon="AllApps" Click="ButtonResetGrid" />
    <AppBarButton Label="Export" Icon="AllApps" Click="ButtonExport" />
    <AppBarButton Label="Refresh" Icon="AllApps" Click="ButtonRefreshCode" />
    <CommandBar.SecondaryCommands>
        <AppBarButton Icon="Like" Label="Like" />
        <AppBarButton Icon="Dislike" Label="Dislike" />
    </CommandBar.SecondaryCommands>

    <CommandBar.Content>
        <TextBlock Text="Now playing..." Margin="12,14"/>
    </CommandBar.Content>
</CommandBar>

    Update

    If you want to make all AppBarButtons conllection left, you need to custom CommandBar style like the the link .