locked
Metro Style Apps - App Bar RRS feed

  • Question

  • Hey, i want to make an app bar, that contains two buttons.

    But when  i wrote the code, there was a problem. It said i set contents more than once.

    I provided a screenshot below.  How do  i fix this code? Is there a diff way to do this.

    If you have an answer, give you write the actualy codes instead of just explaining what i need to do?

    Please and thank you.

    Screenshot: http://tinypic.com/r/264qdj4/6

    Sunday, June 10, 2012 4:22 AM

Answers

  • @Deci - take a look at the SDK sample http://code.msdn.microsoft.com/windowsapps/XAML-AppBar-control-sample-2aa1cbb4

    Tim Heuer | Program Manager, XAML | http://timheuer.com/blog | @timheuer

    (if my post has answered your question, please consider using the 'mark as answer' feature in the forums to help others)

    • Marked as answer by Dino He Friday, June 15, 2012 10:12 AM
    Monday, June 11, 2012 2:12 AM
  • Here is an example but you have to take the appbar out of the main grid and also use a stackpanel to stack the appbar buttons.

        <Page.BottomAppBar>
            <AppBar x:Name="BottomAppBar" Padding="10,0,10,0" Background="#00abdc">
                <Grid x:Name = "gridAppBar">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="50*"/>
                        <ColumnDefinition Width="50*"/>
                    </Grid.ColumnDefinitions>
                    <StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
                        <Button x:Name="btnNewDocument"  ToolTipService.ToolTip="Attach" Style="{StaticResource AppBarButtonStyle}" Click=""/>
                        <Button x:Name="btnCapture"  ToolTipService.ToolTip="Capture" Style="{StaticResource AppBarButtonStyle}" Click="">
                            <Button.Content>
                                <Image Source="/Icons/camera_icon_light.png"/>
                            </Button.Content>
                        </Button>
                    </StackPanel>
                    <StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
                        <Button x:Name="btnSend"  ToolTipService.ToolTip="Send" Style="{StaticResource AppBarButtonStyle}" Click="" />
                    </StackPanel>
                </Grid>
            </AppBar>
        </Page.BottomAppBar>

    Hope it helps..


    Can Bilgin
    Blog CompuSight

    • Proposed as answer by Can Bilgin Sunday, June 10, 2012 7:32 PM
    • Marked as answer by Dino He Friday, June 15, 2012 10:12 AM
    Sunday, June 10, 2012 5:06 AM

All replies

  • Here is an example but you have to take the appbar out of the main grid and also use a stackpanel to stack the appbar buttons.

        <Page.BottomAppBar>
            <AppBar x:Name="BottomAppBar" Padding="10,0,10,0" Background="#00abdc">
                <Grid x:Name = "gridAppBar">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="50*"/>
                        <ColumnDefinition Width="50*"/>
                    </Grid.ColumnDefinitions>
                    <StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
                        <Button x:Name="btnNewDocument"  ToolTipService.ToolTip="Attach" Style="{StaticResource AppBarButtonStyle}" Click=""/>
                        <Button x:Name="btnCapture"  ToolTipService.ToolTip="Capture" Style="{StaticResource AppBarButtonStyle}" Click="">
                            <Button.Content>
                                <Image Source="/Icons/camera_icon_light.png"/>
                            </Button.Content>
                        </Button>
                    </StackPanel>
                    <StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
                        <Button x:Name="btnSend"  ToolTipService.ToolTip="Send" Style="{StaticResource AppBarButtonStyle}" Click="" />
                    </StackPanel>
                </Grid>
            </AppBar>
        </Page.BottomAppBar>

    Hope it helps..


    Can Bilgin
    Blog CompuSight

    • Proposed as answer by Can Bilgin Sunday, June 10, 2012 7:32 PM
    • Marked as answer by Dino He Friday, June 15, 2012 10:12 AM
    Sunday, June 10, 2012 5:06 AM
  • @Deci - take a look at the SDK sample http://code.msdn.microsoft.com/windowsapps/XAML-AppBar-control-sample-2aa1cbb4

    Tim Heuer | Program Manager, XAML | http://timheuer.com/blog | @timheuer

    (if my post has answered your question, please consider using the 'mark as answer' feature in the forums to help others)

    • Marked as answer by Dino He Friday, June 15, 2012 10:12 AM
    Monday, June 11, 2012 2:12 AM