App button alignment in BottomAppBar

Expected BottomeAppBar Style:

For a long time, I have problem with the button alignment in bottomAppBar. If we have more than one buttons, I knew we need to add them to a stackpanel, and there only could be one stackpanel be added directly under <AppBar></AppBar>. Therefore if I want to let some buttons be aligned to the left corner and some be aligned to the right corner, I just cannot let the buttons display as I wished.

My mind is limited to StackPanel that I forgot we can add Grid to the AppBar, then in the grid, we can add more than one StackPanels. So there we are, we now can let some buttons be left aligned and some be right aligned.

Refer Code as below:

    <Page.BottomAppBar>
        <AppBar>
            <Grid>
                <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
                    <Image x:Name="itemImage" Source="Assets/SmallLogo.png" Width="50" Height="50" Margin="20,0,0,0" HorizontalAlignment="Left" DoubleTapped="itemImage_DoubleTapped" />
                </StackPanel>
                <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
                    <Button x:Name="btPicture" HorizontalAlignment="Right" Margin="0,0,10,0" Style="{StaticResource PicturesAppBarButtonStyle}" Height="84" VerticalAlignment="Bottom" />
                    <Button x:Name="btSettings" HorizontalAlignment="Right" Margin="0,0,30,0" Style="{StaticResource SettingsAppBarButtonStyle}" />
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>