Why does my AppBar appear as ClosedDisplayMode.Compact on Page load regardless of actual setting?

Question

I'm porting a Win8.1 app to UWP for Win10 and experiencing a strange issue with the AppBar. We've tried using CommandBar instead of AppBar, but the issue still occurs for us. We're on the latest version of MyToolkit (2.5.16 as of this writing). Our views are derived like so:

SomeView derives from BaseView dervices from MtPage (derives from Page)

So, for a particular view (in this case, HomeView), the XAML looks like:

<views:BaseView
   x:Name="pageRoot"
   x:Class="OurApp.HomeView"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:controls="using:OurApp.Controls"
   xmlns:views="using:OurApp.Views"
   xmlns:viewModels="using:ViewModels"
   xmlns:fake="using:ViewModels.Fake"
   mc:Ignorable="d" >
   <views:BaseView.TopAppBar>
      <AppBar>
         <controls:NavigationView
            x:Name="NavigationView">
            <controls:NavigationView.Context>
               <viewModels:NavigationViewModel />
            </controls:NavigationView.Context>
         </controls:NavigationView>
      </AppBar>
   </views:BaseView.TopAppBar>
   <!-- other stuff not relevant to AppBars, etc -->
</views:BaseView>

Where NavigationView is a UserControl that has some buttons, and NavigationViewContext and NavigationViewModel describe which buttons should be active on which page, and so forth.

The problem is that this results in a sort of half-open, half-closed AppBar appearance (almost but not quite exactly as if ClosedDisplayMode were set to Compact) like so:

After adding ClosedDisplayMode="Minimal" to the <AppBar> control, as alluded to in this question, the live visual tree confirms that the AppBar has IsOpen = 0 and AppBarClosedDisplayMode.Minimal... but it still stubbornly appears half-open as in the screenshot above.

Strangely, if the user navigates away from HomeView to some other view and then back to it, the AppBar is correctly rendered with AppBarClosedDisplayMode.Minimal (!):

We've tried handling the view's NavigatedTo event and manually forcing ClosedDisplayMode to Minimal, but that doesn't affect the rendered output (and in any case, the live visual tree confirms that that is already being correctly set to Minimal).

Any ideas why this is happening, and/or how to cause the AppBar to be rendered with ClosedDisplayMode = Minimal without having to navigate first? I'm sure I could probably brute force this somehow, but I feel like there's probably a better way or I'm missing something pretty simple.

Have you tried editing a template and commenting the compact view portion? — AbsoluteSith, Jan 24 '17 at 10:27
No. The issue isn't that it's being set to `Compact` - the live visual tree confirms this - it's that it's somehow being rendered halfway open, which looks kind of as though it were set to `Compact`. — Daniel A. Thompson, Jan 24 '17 at 15:09
`AppBar` and `CommandBar` have an extensive collection of visual states and associated animations. Chances are one of those is responsible for the effect you're describing. It's a matter of finding out which one. Look [HERE](https://msdn.microsoft.com/en-us/library/windows/apps/mt299108.aspx). — jsanalytics, Jan 26 '17 at 17:16
Just by the name of it, it should be that `ClipGeometryTransform`. — jsanalytics, Jan 26 '17 at 17:43
Actually, just by adjusting `AppBarThemeMinimalHeight` or `AppBarThemeCompactHeight`, depending on `ClosedDisplayMode`, seems to do the job. — jsanalytics, Jan 26 '17 at 18:19
@jstreet Interesting.. I'll look into it. Can you add an answer with that thought and the code to do it. — Daniel A. Thompson, Jan 26 '17 at 18:20
@DanielA.Thompson : Yes, i may have to do it a little later though. — jsanalytics, Jan 26 '17 at 18:26
@DanielA.Thompson : i tried a few things but no luck so far... it always starts with whatever value is in `AppBarThemeCompactHeight`, no matter the mode being compact or minimal. It only synchronizes with the expected behavior after transitioning between opened and closed states at least once. Hopefully you or someone else will have better luck. — jsanalytics, Jan 27 '17 at 02:05
@DanielA.Thompson : I noticed that `MtPage` derives from `ContentControl`, and NOT `Page`, like you mentioned before. Also, the problem you're describing only happens for `MtPage` views, but not for a regular `Page` view. So, despite the name, `MtPage` may not be what it sounds like. In case you can derive your views from a regular `Page` and still use other resources from `MyToolkit`, that should do it. — jsanalytics, Jan 27 '17 at 23:46
could yu please create sample app with issue, because I've tried with `Page` and with `MyToolkitPage` and couldn't to reproduce — Andrii Krupka, Jan 28 '17 at 23:51

jsanalytics · Accepted Answer · 2017-01-30T01:23:43.700

Just switch to CommandBar. CommandBar works out-of-the-box perfectly well, for both, Minimal and Compact modes. CommandBar is the recommended preferred control over AppBar. Apparently, the only reason for keeping AppBar is to minimize changes.

AppBar - MSDN.

Important 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.

Page:

<paging:MtPage
x:Class="App3.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App3"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:paging="using:MyToolkit.Paging"
mc:Ignorable="d">

<paging:MtPage.Resources>
</paging:MtPage.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
</Grid>

<paging:MtPage.TopAppBar>
    <CommandBar x:Name="appbar1" ClosedDisplayMode="Minimal" >
        <CommandBar.Content>
            <local:MyUserControl1></local:MyUserControl1>
        </CommandBar.Content>
    </CommandBar>
</paging:MtPage.TopAppBar>

User Control:

<UserControl
x:Class="App3.MyUserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App3"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">

<Grid>
    <StackPanel Orientation="Horizontal">
        <AppBarButton Icon="Home" Label="Home"></AppBarButton>
        <AppBarButton Icon="Back" Label="Back"></AppBarButton>
        <AppBarButton Icon="Rotate" Label="Rotate"></AppBarButton>
    </StackPanel>
</Grid>

Why does my AppBar appear as ClosedDisplayMode.Compact on Page load regardless of actual setting?

1 Answers1