Several buttons in the application panel

Question

I'm afraid that I'm missing something simple here, but I'm trying to put a few buttons in the application bar.

here is the code for the initial application panel

<common:LayoutAwarePage.TopAppBar> <AppBar HorizontalAlignment="Left"> <Button x:Name="resetButton" Content="Reset" HorizontalAlignment="Left" VerticalAlignment="Stretch" Click="resetButton_Click" /> </AppBar> </common:LayoutAwarePage.TopAppBar> 

Now this code works, but I want to add a second button.

I thought it would be pretty simple to do, I tried:

 <common:LayoutAwarePage.TopAppBar> <AppBar HorizontalAlignment="Left"> <!-- line 19 --> <Button x:Name="resetButton" Content="Reset" HorizontalAlignment="Left" VerticalAlignment="Stretch" Click="resetButton_Click" /> <Button x:Name="newButton" Content="NewButton" /> <!-- line 21 --> </AppBar> </common:LayoutAwarePage.TopAppBar> 

but I get the following errors:

 The property "Content" can only be set once. (line 19) The property "Content" can only be set once. (line 21) Duplication assignment to the 'Content' property of the 'AppBar' object (line 21) 

I think there might be something in the AppBar control that I am missing. How do I insert a second button into it?

Answer 1

Just put everything in a StackPanel in an AppBar

 <common:LayoutAwarePage.TopAppBar> <AppBar HorizontalAlignment="Left"> <!-- line 19 --> <StackPanel Orientation="Horizontal"> <Button x:Name="resetButton" Content="Reset" HorizontalAlignment="Left" VerticalAlignment="Stretch" Click="resetButton_Click" /> <Button x:Name="newButton" Content="NewButton" /> <!-- line 21 --> </StackPanel> </AppBar> </common:LayoutAwarePage.TopAppBar> 

For better control, you can use the Grid , which allows you to have content on both sides:

 <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="auto"/> </Grid.ColumnDefinitions> <StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left"> <!-- Left Content here --> </StackPanel> <StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right"> <!-- Right Content here --> </StackPanel> </Grid> 

Answer 2

You install the content twice, and that is exactly what the error says. Instead, configure the content to accept multiple children of the StackPanel type, for example:

 <common:LayoutAwarePage.TopAppBar> <AppBar HorizontalAlignment="Left"> <!-- line 19 --> <StackPanel Orientation="Horizontal"> <Button x:Name="resetButton" Content="Reset" HorizontalAlignment="Left" VerticalAlignment="Stretch" Click="resetButton_Click" /> <Button x:Name="newButton" Content="NewButton" /> <!-- line 21 --> </StackPanel> </AppBar> </common:LayoutAwarePage.TopAppBar>