Reuse of element in xaml (win store app)

Question

In my xy.xaml file which is representing LayoutAwarePage I have this two elements

<StackPanel x:Name="LeftCommands" Orientation="Horizontal" Grid.Column="2" Margin="0,0,100,0" HorizontalAlignment="Right">
     <Button x:Name="BragButton" HorizontalAlignment="Left"/>
</StackPanel>

and

<Page.TopAppBar>
    <AppBar x:Name="PageAppBar" Padding="10,0,10,0" Height="120" Opacity="0.98">
        <ItemsControl x:Name="groupTopMenuBar" Margin="116,0,40,0">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="0,0,0,0">
                        <Button Click="UpperMenu_Click"
                                Style="{StaticResource TextPrimaryButtonStyle}"
                                Height="Auto" Margin="20,0,20,0"
                                CommandParameter="{Binding Group.MenuItemID}">
                            <StackPanel>
                                <Image Source="{Binding Group.IconURL}" Width="40"
                                       Height="40" VerticalAlignment="Top" Stretch="UniformToFill" />
                                <TextBlock Text="{Binding Group.Name}" HorizontalAlignment="Left"
                                           VerticalAlignment="Bottom"
                                           Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}"
                                           Style="{StaticResource TitleTextStyle}" FontSize="16" />
                            </StackPanel>
                        </Button>
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </AppBar>
</Page.TopAppBar>

I need to use these elements in every page of my application and I do not want to write this pieces of code in every .xaml file of application, so I want to ask if there is any way how to do this.

Thank you.

Answer 1

You want to share your AppBar across multiple pages. Unfortunately, in Windows Store apps it is not possible using referencing AppBar defined in App.xaml using StaticResource as is the case of Windows Phone. There are 2 ways how to do it:

1. Create another Frame inside your main page and do all navigation in this frame. Check this MSDN article.
2. Create UserControl with contents (buttons) of your AppBar, add TopAppBar on every page and set its content to that UserControl. This approach is advised in this StackOverflow answer.

I might see little problem with page navigation. If you want to navigate the hosting frame from the UserControl, store the Frame instance which is created in the App.xaml.cs OnActivated method to some static property of App class. For example public static Frame RootFrame { get; private set; } and set it by App.RootFrame = new Frame(). To navigate from the code behind your UserControl just call something like this: App.RootFrame.Navigate(). This approach was advised by Filip Skakun here on StackOverflow.