제목 표시줄, 도구 모음 및 앱 바

여기에서는 iOS UIToolbar를 사용하여 Windows 8 Appbar 컨트롤로 마이그레이션하는 방법을 보여 줍니다.

다음 동영상에서는 iOS 앱의 도구 모음과 Windows 스토어 앱의 앱 바를 비교합니다.

대부분의 iOS 앱은 도구 모음을 사용합니다. 도구 모음은 화면 맨 위 또는 맨 아래에 있는 모음으로, 상황에 맞는 탐색 단추와 작업을 호스팅하는 데 사용됩니다.

Windows 스토어 앱은 Appbar라는 컨트롤을 사용하는데, 페이지의 맨 위 또는 맨 아래에 배치하거나 둘 다에 배치할 수 있습니다. 앱 바는 기본적으로 숨겨져 있으며 페이지 맨 위 또는 맨 아래 살짝 밀기, 오른쪽 마우스 단추 클릭, Windows 키와 Z 함께 누르기와 같은 간단한 사용자 동작으로 표시할 수 있습니다. 또한 사용자가 앱을 조작할 때 프로그래밍 방식으로 표시할 수도 있습니다.

여기서는 Windows 8 앱 바와 iOS 도구 모음을 비교하고 iOS와 Windows 스토어 앱 둘 다에서 도구 모음을 사용하는 방법에 대한 예를 보여 줍니다. 그런 다음 두 플랫폼에서 도구 모음을 구현하는 데 필요한 단계를 살펴보고 Windows 스토어 앱에서 앱 바를 구현하는 방법에 대한 단계별 지침을 제공합니다.

iOS 도구 모음 개요

iOS에서 도구 모음은 일반적으로 보기의 표시 계층 구조를 관리하는 탐색 컨트롤러에 포함되어 있습니다. 도구 모음은 다음과 같은 여러 가지 용도로 사용됩니다.

  • 현재 상황에서 작업 집합 제공
  • 현재 상황에서 적합한 자주 사용되는 명령 제공
  • 세그먼트 컨트롤 또는 탭을 사용하여 다른 앱 모드 사용
  • 다양한 측면의 앱 데이터에 대한 액세스 제공

Windows 스토어 앱의 도구 모음

Windows 8 컨트롤 라이브러리에서는 앱 바 컨트롤을 제공합니다. 다음은 Windows 스토어 앱의 앱 바 예입니다.

이 예에서는 페이지 맨 위와 맨 아래 사이에서 분할된 앱 바를 보여 줍니다. 위쪽 앱 바에는 탐색 단추가 표시되고 아래쪽 앱 바에는 사용자가 사용할 수 있는 다양한 작업이 표시됩니다.

아래에 표시된 대로 앱 바 작업은 상황에 따라 달라집니다. 앱 바는 항목을 선택하면 자동으로 표시되고 응답으로 대화 상자가 열리면 사라집니다.

iOS와 Windows 스토어 앱의 도구 모음 비교

iOS에서 UIToolbar를 사용하여 도구 모음을 구현한 경우 Windows 스토어 앱의 앱 바 컨트롤에서 유사한 기능을 제공하는 것을 확인할 수 있습니다. 다음은 프로세스에서 플랫폼을 비교하는 방법입니다.

단계iOSWindows 8
도구 모음을 만들고 필요한 컨트롤 추가UIToolbar 컨트롤을 사용합니다. 명령에 대한 도구 모음에 UIToolbarButtonItem 컨트롤을 추가합니다.앱 바 컨트롤을 사용하여 단추, 확인란, 라디오 단추와 같은 다양한 컨트롤을 앱 바 컨트롤에 추가합니다. 자세한 내용은 Windows 스토어 앱용 명령 디자인, 빠른 시작: 앱 바 추가빠른 시작: 컨트롤 추가 및 이벤트 처리를 참조하세요.
옵션: 도구 모음의 모양과 느낌 정의setBackgroundImage, shadowImageForToolbarPosition 메서드를 사용하고 barStyle, tintColortranslucent 속성을 설정하거나 UIAppearance를 사용합니다.앱 바에서 사용되는 레이아웃 패널의 스타일을 설정합니다. BackGround와 같은 다양한 스타일 속성을 사용하여 모양과 느낌을 설정할 수 있습니다. 빠른 시작: 레이아웃 정의를 참조하세요.
옵션: 도구 모음에서 사용되는 컨트롤의 모양과 느낌 정의initWithTitle:image:tag: 또는 initWithTitle:style:target:action:과 같은 메서드를 사용하여 사용자 지정 아이콘 및 제목을 사용합니다.전경, 테두리글꼴과 같은 다양한 속성을 사용자 지정 모양과 느낌에 사용할 수 있습니다. 빠른 시작: 컨트롤 스타일 지정빠른 시작: 앱 바 단추 스타일 지정을 참조하세요.
도구 모음 이벤트 처리UIBarButtonItem 단추의 동작 및 대상 속성을 설정합니다. 해당 컨트롤러에서 action 속성이 보유한 선택기에 해당하는 메서드를 구현합니다. 코드 숨김 파일에서 void 메서드(object sender, RoutedEventArgs e) 서명으로 이벤트 처리기를 구현하고 각 컨트롤의 클릭 속성으로 메서드를 설정합니다. 컨트롤 이벤트 처리에 대해서는 빠른 시작: 컨트롤 추가 및 이벤트 처리를 참조하세요.

 

샘플 앱

다음은 앱 바를 사용하는 Windows 스토어 앱 빌드를 보여 주는 예입니다.

참고  Windows 8.1에서는 앱 바를 정의하는 방법이 업데이트됩니다. 자세한 내용은 Windows 8.1 AppBar의 새로운 기능 블로그 게시물을 참조하세요.

1. 앱을 만듭니다. 이 샘플에서는 C# 새 앱 템플릿을 사용하여 앱을 만듭니다.

  • Microsoft Visual Studio를 열고 새 Visual Studio C# > Windows 앱 > 새 앱(XAML) 프로젝트를 만듭니다.
  • 솔루션 탐색기에서 MainPage.xaml을 엽니다. XAML 보기가 아직 표시되지 않은 경우 가로 분할 단추를 클릭하여 해당 보기를 엽니다.
  • MainPage.xaml에서 여는 <Grid ..>와 닫는 </Grid> 사이에 다음 XAML 코드를 추가합니다.
    
    // Windows 8
    <Grid.RowDefinitions>
            <RowDefinition Height="70"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Text="Appbar Sample" Style="{StaticResource PageHeaderTextStyle}"  Grid.Row="0" Margin="20,0,0,10"/>
    
    // Windows 8.1
    <Grid.RowDefinitions>
            <RowDefinition Height="70"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Text="Appbar Sample" Style="{StaticResource HeaderTextBlockStyle}"  Grid.Row="0" Margin="20,0,0,10"/>
    
    
    

페이지에 앱 바 컨트롤을 추가하고 앱 바에 Button 컨트롤을 추가합니다.

  • 솔루션 탐색기에서 MainPage.xaml 파일을 엽니다.
  • 닫는 </page> 태그 바로 앞에 다음 코드를 추가합니다.
    
    // Windows 8 
    <Page.BottomAppBar>
            <AppBar x:Name="bottomAppBar" Padding="10,0,10,0" Background="Gray">
                <Grid>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                        <Button Style="{StaticResource EditAppBarButtonStyle}" />
                        <Button Style="{StaticResource RemoveAppBarButtonStyle}" />
                        <Button Style="{StaticResource AddAppBarButtonStyle}" />
                    </StackPanel>
                </Grid>
            </AppBar>
        </Page.BottomAppBar>
    
    // Windows 8.1 
     <Page.BottomAppBar>
            <CommandBar>
                <CommandBar.PrimaryCommands>
                    <AppBarButton Icon="Edit" Label="Edit"/>
                    <AppBarButton Icon="Remove" Label="Remove"/>
                    <AppBarButton Icon="Add" Label="Add" />
                </CommandBar.PrimaryCommands>
            </CommandBar>
        </Page.BottomAppBar>
    
    
    
  • Windows 8용을 개발하는 경우 공용 > StandardStyles.xaml을 열어야 합니다. "EditAppBarButtonStyle", "RemoveAppBarButtonStyle" 또는 "AddAppBarButtonStyle"을 검색하고 정의된 섹션에 대한 주석 처리를 제거합니다. 이러한 스타일이 정의된 섹션을 둘러싸고 있는 <!-- -->을 제거합니다. Windows 8.1 앱에는 이 단계가 필요하지 않습니다.
  • 디버그 > 디버깅 시작을 클릭하거나 F5 키를 눌러 응용 프로그램을 실행합니다. 화면 맨 위를 살짝 밀거나 Windows 키와 Z를 눌러 앱 바를 엽니다.

앱 바 단추 이벤트를 처리합니다.

  • 디버그 > 디버깅 중지를 클릭하거나 Shift+F5를 눌러 디버거를 중지합니다.
  • MainPage.xaml에서 다음 코드를 업데이트합니다.
    
    //Windows 8
    <Button Style="{StaticResource EditAppBarButtonStyle}" />
    // Windows 8.1
    <AppBarButton Icon="Edit" Label="Edit"/>
    
    
    다음 XAML 코드를 사용합니다.
    
    //Windows 8
    <Button Style="{StaticResource EditAppBarButtonStyle}" Click="EditButton_Click" />
    // Windows 8.1
    <AppBarButton Icon="Edit" Label="Edit" Click="EditButton_Click" />
    
    
    그러면 앱 바 편집 단추를 클릭할 때 EditButton_Click 이벤트 처리기가 호출되도록 지정됩니다.
  • MainPage.xaml 맨 위에 다음 코드를 추가합니다.
    
    using Windows.UI.Popups;
    
    
  • MainPage partial 클래스의 여는 대괄호와 닫는 대괄호 사이에 다음 코드를 추가합니다.
    
    private async void EditButton_Click(object sender, RoutedEventArgs e)
    {
        MessageDialog dlg = new MessageDialog("Edit clicked");
        await dlg.ShowAsync();
    }
    
    
    
  • F5 키를 눌러 응용 프로그램을 다시 실행합니다. 화면 맨 위를 살짝 밀어 앱 바를 표시합니다. 편집 단추를 클릭하면 MessageDialog가 표시됩니다.

관련 항목

iOS 개발자용 항목
iOS 개발자용 리소스
iOS 개발자용 Windows 8 컨트롤
iOS 개발자용 Windows 8 도움말
Windows 8.1 AppBar의 새로운 기능
앱 바 항목
빠른 시작: 앱 바 추가
빠른 시작: 앱 바 단추 스타일 지정
빠른 시작: 컨트롤 추가 및 이벤트 처리

 

 

표시:
© 2015 Microsoft