윈도우8 앱바 만들기 - Quickstart: adding app bars (Windows Store apps using C#/VB/C++ and XAML)

Quickstart: adding app bars (Windows Store apps using C#/VB/C++ and XAML)

7 out of 8 rated this helpful - Rate this topic

In this article

• Prerequisites
• Adding an app bar
• Opening an app bar programmatically
• Making an app bar sticky
• Handling the Opened and Closed events
• Summary and next steps
• Related topics

Important APIs

• AppBar
• BottomAppBar
• TopAppBar

Use app bars to show navigation, commands, and tools that can be hidden away when they aren't needed. You can put an app bar at the top of the page, at the bottom of the page, or both. App bars are hidden by default, and are shown or dismissed when the user right-clicks, presses Windows+Z, or swipes from the top or bottom edge of the screen. They can be shown programmatically when the user makes a selection or interacts with the app.

Prerequisites

• We assume that you can add controls to a basic Windows Store app built for Windows using C++, C#, or Visual Basic. For instructions on adding a control, see Quickstart: Adding controls and handling events.
• Review Commanding design for Windows Store apps.

Adding an app bar

• To add an app bar to your app, assign an AppBar control to the TopAppBar orBottomAppBar property of a Page.

  Use the top app bar to show navigation in your app. For more info, see Navigation design for Windows Store apps.

  Use the bottom app bar to show commands and tools. For more info, see Commanding design for Windows Store apps.

  This example shows a bottom app bar with 2 groups of buttons.

  XAML

  <Page.BottomAppBar>
      <AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
          <Grid>
              <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                  <Button Style="{StaticResource EditAppBarButtonStyle}" Click="Button_Click"/>
                  <Button Style="{StaticResource RemoveAppBarButtonStyle}" Click="Button_Click"/>
                  <Button Style="{StaticResource AddAppBarButtonStyle}" Click="Button_Click"/>
              </StackPanel>
              <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                  <Button Style="{StaticResource RefreshAppBarButtonStyle}" Click="Button_Click"/>
                  <Button Style="{StaticResource HelpAppBarButtonStyle}" Click="Button_Click"/>
              </StackPanel>
          </Grid>
      </AppBar>
  </Page.BottomAppBar>
  
  
  

In a multi-page app, you can share app bars with common commands across pages. For more info, see How to share an app bar across pages.

Opening an app bar programmatically

By default, app bars appear when the user right-clicks, or presses Windows+Z, or swipes from the top or bottom edge of the screen. When the user performs one of these actions, both the top and bottom app bars appear, if the page has both. You can open an app bar programmatically by setting the IsOpen property to true. When you do this, only the specific app bar you set the property value for (top or bottom) is opened.

1. To initially open your app bar when the page is loaded, set the IsOpen property to true in your Extensible Application Markup Language (XAML).
   XAML

   <AppBar IsOpen="True">
       <Grid>
           <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
               <Button Style="{StaticResource PreviousAppBarButtonStyle}" 
                       Click="Button_Click"/>
               <Button Style="{StaticResource NextAppBarButtonStyle}" 
                       Click="Button_Click"/>
           </StackPanel>
       </Grid>
   </AppBar>
   
   
   

2. To open the app bar programmatically, set the IsOpen property to true in your code. To reference the app bar in code, you must give it a name.
   XAML

   <Page.TopAppBar>
       <AppBar x:Name="topAppBar">
           <Grid>
               <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                   <Button Style="{StaticResource SaveAppBarButtonStyle}" 
                           Click="Button_Click"/>
                   <Button Style="{StaticResource UploadAppBarButtonStyle}" 
                           Click="Button_Click"/>
               </StackPanel>
           </Grid>
       </AppBar>
   </Page.TopAppBar>
   
   
   

   C#

   C++

   VB

   private void OpenButton_Click(object sender, RoutedEventArgs e)
   {
       topAppBar.IsOpen = true;
   }
   
   
   

   You typically open the app bar programmatically to show contextual commands when the user interacts with an item in your app. For example, you might show an app bar with formatting commands when the user selects text in your app. When you show contextual commands, set the app bar dismissal mode to sticky until the context changes to keep the commands visible.

Making an app bar sticky

By default, app bars are dismissed when the user interacts with your app anywhere outside of the app bar. To keep commands visible, you can change the dismissal mode by setting the IsSticky property to true. When an app bar is sticky, it's dismissed only when the user right-clicks, presses Windows+Z, or swipes from the top or bottom edge of the screen.

1. To make your app bar remain visible when the user interacts with your app, set the IsSticky property to true in your XAML.
   XAML

   <AppBar IsSticky="True">
       <Grid>
           <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
           <Button Style="{StaticResource HelpAppBarButtonStyle}" 
                   Click="Button_Click"/>
           </StackPanel>
       </Grid>
   </AppBar>
   
   
   

2. To change the app bar dismissal mode programmatically, set the IsSticky property to true in your code. To reference the app bar in code, you must give it a name.
   XAML

   <Page.BottomAppBar>
       <AppBar x:Name="bottomAppBar">
           <Grid>
               <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                   <Button Style="{StaticResource HelpAppBarButtonStyle}" 
                           Click="Button_Click"/>
               </StackPanel>
           </Grid>
       </AppBar>
   </Page.BottomAppBar>
   
   
   

   C#

   C++

   VB

   private void StickyButton_Click(object sender, RoutedEventArgs e)
   {
       bottomAppBar.IsSticky = true;
   }
   
   
   

Handling the Opened and Closed events

You can respond to the app bar being opened or dismissed by handling the Opened and Closed events.

For example, this is useful if you need to open an app bar over a WebView control. Other content can't be rendered over the top of aWebView. When the app bar is opened over a WebView, the WebView covers the app bar.

You can work around this problem by handling the app bar's Opened and Closed events. When a user opens the app bar, you create aWebViewBrush and set the WebView as its source. Then call the Redraw method, which takes a visual snapshot of the WebView. You then use that brush to fill a Rectangle, and hide the WebView. The app bar renders its content over the top of the Rectangle. When the user closes the app bar, you no longer need the simulated WebView, so you can put things back the way they were in the Closed event handler.

This example shows how to handle the Opened and Closed events. When the app bar is opened, the WebView is replaced with aWebViewBrush. When the app bar is dismissed the WebViewBrush is replaced with the WebView. The button in the app bar refreshes the web page and programmatically dismisses the app bar.

XAML

<Page
    x:Class="AppBarSample.WebViewPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppBarSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    
    <Page.BottomAppBar>
        <AppBar x:Name="bottomAppBar" 
                Opened="AppBar_Opened" Closed="AppBar_Closed">
            <Grid>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                    <Button Style="{StaticResource RefreshAppBarButtonStyle}"
                            Click="Refresh_Click"/>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Border BorderBrush="Gray" BorderThickness="2" Margin="100,20,100,20">
            <Grid>
                <WebView x:Name="contentView" Source="http://www.contoso.com"/>
                <Rectangle x:Name="contentViewRect"/>
            </Grid>
        </Border>
    </Grid>
</Page>

C#

C++

VB

private void AppBar_Opened(object sender, object e)
{
    WebViewBrush wvb = new WebViewBrush();
    wvb.SourceName = "contentView";
    wvb.Redraw();
    contentViewRect.Fill = wvb;
    contentView.Visibility = Windows.UI.Xaml.Visibility.Collapsed;     
}

private void AppBar_Closed(object sender, object e)
{
    contentView.Visibility = Windows.UI.Xaml.Visibility.Visible;
    contentViewRect.Fill = new SolidColorBrush(Windows.UI.Colors.Transparent);
}

private void Refresh_Click(object sender, RoutedEventArgs e)
{
    contentView.Navigate(new Uri("http://www.contoso.com"));
    bottomAppBar.IsOpen = false;
}

Summary and next steps

In this quickstart, you learned how to add an app bar to your Windows Store app using C++, C#, or Visual Basic.

To provide a consistent experience for your users, review the Guidelines and checklist for app bars.

Related topics

XAML AppBar control sample

Quickstart: Adding app bars

Commanding design for Windows Store apps

AppBar

 

참고사이트 : 
http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh781232.aspx