Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

multiple buttons in appbar

Tags:

c#

windows-8

xaml

I'm afraid I'm missing something simple here, but I'm trying to put multiple buttons in my app bar.

here's the code for the initial app bar

<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 that this would be fairly simple to do, I attempted:

<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 perhaps be something to the AppBar control that I'm missing. How do i put a second button in it?

like image 308
Sam I am says Reinstate Monica Avatar asked Nov 16 '12 17:11

Sam I am says Reinstate Monica


2 Answers

Simply put everything in a StackPanel in 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 could use a Grid which will allow 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>
like image 109
emartel Avatar answered Oct 06 '22 22:10

emartel


You are setting content twice which is exactly what the error says. Instead, set the content to something that accepts multiple children like a `StackPanel', like so:

<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>
like image 36
McAden Avatar answered Oct 07 '22 00:10

McAden