Why am I getting a XamlParseException here?

Question

With this XAML:

<Page.BottomAppBar>
    <AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
        <Grid>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                <Button Style="{StaticResource BrowsePhotosAppBarButtonStyle}" Click="btnOpenImgFiles_Click"/>
                <Button Style="{StaticResource OpenAppBarButtonStyle}" Click="btnOpenMap_Click"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                <Button Style="{StaticResource SaveAppBarButtonStyle}" Click="btnSaveMap_Click"/>
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

(which I adapted from markup I found online) I got a "Windows.UI.Xaml.Markup.XamlParseException"

Looking at this, I figured it should be AppBarButton instead of Button, so I changed them to that...but I'm still getting the same err msg. Is it because there's no such thing as "BrowsePhotosAppBarButtonStyle" (I can't find a list of valid values for that) or...???

Answer 1

Yes. It's probably the button styles which are based on legacy Windows 8 code. If you're targeting Windows 8.1 then you should use AppBarButtons rather than Buttons. I'd also put them in a CommandBar rather than layout out your own Grid in an AppBar.

If BrowsePhotosAppBarButtonStyle isn't specific to the sample you got that from it is probably available in the StandardStyles.xaml file included with Windows 8 templates. That file included a large number of commented out button styles for you to uncomment as needed.

Here's how you'd set this up in a Windows 8.1 app. For simplicity I didn't hook up the Click handlers, and you may want to update the Label and Automation names:

<Page.BottomAppBar>
    <AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
        <CommandBar>
            <CommandBar.SecondaryCommands>
                <AppBarButton Icon="BrowsePhotos" Label="Browse" AutomationProperties.Name="Browse Photos" />
            </CommandBar.SecondaryCommands>
            <CommandBar.PrimaryCommands>
                <AppBarButton Icon="OpenFile" Label="Open" AutomationProperties.Name="Open File"/>
                <AppBarButton Icon="Save" Label="Save" AutomationProperties.Name="Save File"/>
            </CommandBar.PrimaryCommands>
        </CommandBar>
    </AppBar>
</Page.BottomAppBar> 

See Adding app bars (XAML) for more details.