내보내기(0) 인쇄
모두 확장
정보
요청한 주제가 아래에 표시됩니다. 그러나 이 주제는 이 라이브러리에 포함되지 않습니다.

연습: Windows Phone의 파노라마 페이지에서 앱 바 만들기

2014-06-18

적용 대상: Windows Phone 8 및 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

이 연습에서는 연습: Windows Phone의 앱 바 테스트 앱 만들기 항목에서 시작한 응용프로그램을 계속해서 빌드합니다.

이 항목에는 다음 단원이 포함되어 있습니다.

이 연습을 완료하려면 연습: Windows Phone의 앱 바 테스트 앱 만들기 항목의 절차를 완료해야 합니다.

파노라마 페이지에서 응용프로그램 모음을 만들려면

  1. 솔루션 탐색기에서 PanoramaPage.xaml을 두 번 클릭하여 디자이너에서 이 파일을 엽니다.

  2. XAML 코드에서 controls:Panorama 요소를 찾아 다음 코드로 바꿉니다. 이렇게 하면 세 개의 파노라마 항목이 만들어지고 응용프로그램 및 파노라마 항목 제목이 설정됩니다.

    주의주의:

    controls:Panorama 요소 바로 뒤에 있는 LayoutRoot GRID 요소의 끝 태그를 삭제하지 않도록 주의하세요.

    <controls:Panorama x:Name="PanoControl" Title="panorama" >
    
        <!--Panorama item one-->
        <controls:PanoramaItem Header="pano1">
        </controls:PanoramaItem>
    
        <!--Panorama item two-->
        <controls:PanoramaItem Header="pano2">
            <StackPanel>
                <TextBlock Text="p2"/>
            </StackPanel>
        </controls:PanoramaItem>
    
        <!--Panorama item three-->
        <controls:PanoramaItem Header="pano3">
            <StackPanel>
                <TextBlock Text="p3"/>
            </StackPanel>
        </controls:PanoramaItem>
    </controls:Panorama>
    
  3. 페이지의 마지막 줄을 찾습니다. 파노라마 페이지에 응용프로그램 모음이 포함되면 안 된다는 경고가 나타날 수 있습니다. 그렇지만 이 내용은 더 이상 맞지 않습니다. 파노라마 페이지에서 사용할 수 있도록 크기가 작은 새 응용프로그램 모음을 디자인했습니다.

  4. 페이지의 마지막 줄(끝 </phone:PhoneApplicationPage> 태그) 앞에 다음 코드를 추가합니다. 이 코드는 응용프로그램 모음을 만듭니다. 이와 함께 버튼을 네 개 만들고 이전에 아이콘으로 추가한 이미지를 사용합니다. 또한 메뉴 항목도 두 개 만듭니다. 이것이 파노라마 페이지이므로, 크기 모드 속성이 최소화된 상태로 설정되어 아이콘 버튼이 숨겨지고 줄임표만 표시됩니다.

    <!--Panorama-based applications should not show an ApplicationBar-->
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Minimized" Opacity="1.0" >
    
            <shell:ApplicationBarIconButton IconUri="/Images/save.png" Text="save" Click="Button1_Click" />
            <shell:ApplicationBarIconButton IconUri="/Images/delete.png" Text="delete" Click="Button2_Click" />
            <shell:ApplicationBarIconButton IconUri="/Images/help.png" Text="help" Click="Button3_Click" />
            <shell:ApplicationBarIconButton IconUri="/Images/settings.png" Text="settings" Click="Button4_Click" />
    
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="get default size value" Click="MenuItem1_Click" />
                <shell:ApplicationBarMenuItem Text="get mini size value" Click="MenuItem2_Click" />
            </shell:ApplicationBar.MenuItems>
    
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
    
  5. 첫 번째 파노라마 항목 내에만 다음 코드를 추가합니다. 이 코드는 응용프로그램용 사용자 인터페이스를 만듭니다. 여기에는 각 응용프로그램 모음 속성에 대한 라디오 버튼이 포함됩니다. 라디오 버튼을 클릭하면 응용프로그램 모음이 동적으로 변경되어 다양한 속성과 속성 간의 상호 작용을 테스트할 수 있습니다.

    <ScrollViewer x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <StackPanel>
    
            <TextBlock Text="foreground color" Foreground="{StaticResource PhoneAccentBrush}" />
            <StackPanel Orientation="Horizontal">
                <RadioButton Checked="ForeColorChanged" Name="ForeNormal" Content="normal" />
                <RadioButton Checked="ForeColorChanged" Name="ForeAccent" Content="accent" />
            </StackPanel>
    
            <TextBlock Text="background color" Foreground="{StaticResource PhoneAccentBrush}" />
            <StackPanel Orientation="Horizontal">
                <RadioButton Checked="BackColorChanged" Name="BackNormal" Content="normal" />
                <RadioButton Checked="BackColorChanged" Name="BackAccent" Content="accent" />
            </StackPanel>
    
            <TextBlock Text="opacity" Foreground="{StaticResource PhoneAccentBrush}" />
            <StackPanel Orientation="Horizontal">
                <RadioButton Checked="OpacityChanged" Name="One" Content="1.0" />
                <RadioButton Checked="OpacityChanged" Name="Half" Content="0.5" />
                <RadioButton Checked="OpacityChanged" Name="Zero" Content="0.0" />
            </StackPanel>
    
            <TextBlock Text="size mode (NEW PROPERTY!)" Foreground="{StaticResource PhoneAccentBrush}" />
            <StackPanel Orientation="Horizontal">
                <RadioButton Checked="ModeChanged" Name="DefaultSize" Content="default" />
                <RadioButton Checked="ModeChanged" Name="Mini" Content="mini" />
            </StackPanel>
    
            <TextBlock Text="menu items" Foreground="{StaticResource PhoneAccentBrush}" />
            <StackPanel Orientation="Horizontal">
                <RadioButton Checked="MenuEnabledChanged" Name="Enabled" Content="enabled" />
                <RadioButton Checked="MenuEnabledChanged" Name="Disabled" Content="disabled" />
            </StackPanel>
    
            <TextBlock Text="visibility" Foreground="{StaticResource PhoneAccentBrush}" />
            <StackPanel Orientation="Horizontal">
                <RadioButton Checked="VisibilityChanged" Name="Visible" Content="visible" />
                <RadioButton Checked="VisibilityChanged" Name="Hidden" Content="hidden" />
            </StackPanel>
        </StackPanel>
    </ScrollViewer>
    
    
  6. 페이지의 코드 숨김 파일을 엽니다. 맨 위에 다음 문을 추가합니다.

    using Microsoft.Phone.Shell;
    
  7. 페이지 생성자에서 InitializeComponent에 대한 호출 뒤에 다음 코드를 추가합니다. 이 코드는 응용프로그램 모음 속성의 초기 값을 설정합니다. 이것이 파노라마 페이지이므로, 크기 모드 속성이 최소화된 상태로 설정되어 아이콘 버튼이 숨겨지고 줄임표만 표시됩니다.

    //Set the initial values for the Application Bar properties by checking the radio buttons.
    ForeNormal.IsChecked = true;
    BackNormal.IsChecked = true;
    One.IsChecked = true;
    Mini.IsChecked = true;
    Visible.IsChecked = true;
    Enabled.IsChecked = true;
    
  8. 페이지 생성자 뒤에 다음 코드를 추가합니다. 이는 라디오 버튼 클릭 이벤트 처리기로, 라디오 버튼을 클릭하면 이 코드가 응용프로그램 모음의 속성을 동적으로 변경합니다.

    private void ForeColorChanged(object sender, RoutedEventArgs e)
    {
        String option = ((RadioButton)sender).Name;
        switch (option)
        {
            case "ForeNormal":
                ApplicationBar.ForegroundColor = (Color)Resources["PhoneForegroundColor"];
                break;
    
            case "ForeAccent":
                ApplicationBar.ForegroundColor = (Color)Resources["PhoneAccentColor"];
                break;
        }
    }
    
    private void BackColorChanged(object sender, RoutedEventArgs e)
    {
        String option = ((RadioButton)sender).Name;
        switch (option)
        {
            case "BackNormal":
                ApplicationBar.BackgroundColor = new Color() {A=0, R=0, G=0, B=0};
                break;
    
            case "BackAccent":
                ApplicationBar.BackgroundColor= (Color)Resources["PhoneAccentColor"];
                break;
        }
    }
            
    private void OpacityChanged(object sender, RoutedEventArgs e)
    {
        String option = ((RadioButton)sender).Name;
        switch (option)
        {
            case "One":
                ApplicationBar.Opacity = 1.0;
                break;
    
            case "Half":
                ApplicationBar.Opacity = 0.5;
                break;
    
            case "Zero":
                ApplicationBar.Opacity = 0.0;
                break;
        }
    }
    
    private void ModeChanged(object sender, RoutedEventArgs e)
    {
        String option = ((RadioButton)sender).Name;
        switch (option)
        {
            case "DefaultSize":
                ApplicationBar.Mode = ApplicationBarMode.Default;
                break;
    
            case "Mini":
                ApplicationBar.Mode = ApplicationBarMode.Minimized;
                break;
        }
    }
    
    private void VisibilityChanged(object sender, RoutedEventArgs e)
    {
        String option = ((RadioButton)sender).Name;
        switch (option)
        {
            case "Visible":
                ApplicationBar.IsVisible = true;
                break;
    
            case "Hidden":
                ApplicationBar.IsVisible = false;
                break;
        }
    }
    
    private void MenuEnabledChanged(object sender, RoutedEventArgs e)
    {
        String option = ((RadioButton)sender).Name;
        switch (option)
        {
            case "Enabled":
                ApplicationBar.IsMenuEnabled = true;
                break;
    
            case "Disabled":
                ApplicationBar.IsMenuEnabled = false;
                break;
        }
    }
    
  9. 페이지에 다음 코드를 추가합니다. 이는 응용프로그램 모음 버튼 및 메뉴 항목에 대한 클릭 이벤트 처리기입니다. 이 테스트 응용프로그램의 버튼 및 메뉴 항목에는 메시지 상자가 표시됩니다. 실제 응용프로그램에서 버튼 및 메뉴 항목은 유용하게 사용됩니다.

    private void Button1_Click(object sender, EventArgs e)
    {
        MessageBox.Show("Button 1 works!  Do something useful in your application.");
    }
    
    private void Button2_Click(object sender, EventArgs e)
    {
        MessageBox.Show("Button 2 works!  Do something useful in your application.");
    }
    
    private void Button3_Click(object sender, EventArgs e)
    {
        MessageBox.Show("Button 3 works!  Do something useful in your application.");
    }
    
    private void Button4_Click(object sender, EventArgs e)
    {
        MessageBox.Show("Button 4 works!  Do something useful in your application.");
    }
            
    private void MenuItem1_Click(object sender, EventArgs e)
    {
        MessageBox.Show("The default Application Bar size is " + ApplicationBar.DefaultSize + " pixels.");
    }
    
    private void MenuItem2_Click(object sender, EventArgs e)
    {
        MessageBox.Show("The mini Application Bar size is " + ApplicationBar.MiniSize + " pixels.");
    }
    

이 절차에서는 응용프로그램을 실행하여 파노라마 페이지에서 응용프로그램 모음을 테스트합니다.

응용프로그램을 테스트하려면

  1. 에뮬레이터에서 응용프로그램을 시작합니다. 필요한 경우 첫 번째 검사점의 지침을 사용합니다.

    에뮬레이터에서 응용프로그램이 시작되고 기본 페이지가 표시됩니다.

  2. 파노라마 페이지 링크를 클릭하여 방금 만든 페이지로 이동합니다.

  3. 라디오 버튼을 클릭하여 다른 속성을 테스트합니다. 일부 속성은 함께 테스트할 경우 더 수월합니다. 예를 들어 불투명도 속성은 배경 속성을 테마 컬러로 설정하면 테스트하기가 더 쉽습니다.

  4. 화면을 살짝 밀어 다른 파노라마 항목을 표시합니다. 모든 파노라마 항목에서 응용프로그램 모음이 동일하고 속성의 상태가 유지됩니다.

  5. 각 아이콘 버튼을 클릭하고 메시지 상자가 표시되는지 확인하여 아이콘 버튼을 테스트합니다.

  6. 각 메뉴 항목을 클릭하고 메시지 상자가 표시되는지 확인하여 메뉴 항목을 테스트합니다.

  7. 디버그 메뉴에서 디버깅 중지를 클릭합니다(F5).

이 응용프로그램을 계속 빌드하려면 다음 선택 항목 중 하나 이상의 절차를 완료합니다. 순서대로 절차를 완료할 필요는 없습니다.

다음 방법으로 응용프로그램의 기능을 확장할 수 있습니다.

표시:
© 2014 Microsoft