내보내기(0) 인쇄
모두 확장

방법: Windows Phone용 첫 번째 Silverlight 응용프로그램 만들기

2012-02-09

이 항목에서는 Silverlight를 사용하여 기본 웹 브라우저 응용프로그램을 만드는 단계별 지침을 제공합니다. Windows Phone용 코드 샘플 항목에서 이러한 완료된 미니 브라우저 샘플을 확인할 수 있습니다.

참고참고:

다음 절차의 단계는 Windows Phone용 Visual Studio 2010 Express에 적용됩니다. Visual Studio 2010 Professional 또는 Visual Studio 2010 Ultimate용 추가 기능을 사용하는 경우에는 메뉴 명령이나 창 레이아웃에서 일부 소규모 변형이 나타날 수 있습니다.  

Windows Phone Silverlight 응용프로그램을 만드는 첫 단계는 새 프로젝트를 만드는 것입니다.

새 프로젝트를 만들려면

  1. Windows Phone SDK 를 다운로드하여 설치했는지 확인합니다. 자세한 내용은 Windows Phone SDK 설치를 참조하십시오.

  2. Windows 시작 메뉴에서 Windows Phone용 Visual Studio 2010 Express 를 시작합니다. 등록 창이 나타나면 등록하거나 일시적으로 취소할 수 있습니다.

  3. 파일 | 새 프로젝트 메뉴 명령을 선택하여 새 프로젝트를 만듭니다.

  4. 새 프로젝트 창이 표시됩니다. Visual C# 템플릿을 확장하고 Windows Phone용 Silverlight 템플릿을 선택합니다.

  5. Windows Phone 응용프로그램 템플릿을 선택합니다. 원하는 대로 프로젝트 이름을 입력합니다.

    GetStartedNewProject
  6. 확인을 클릭합니다. Windows Phone 플랫폼 선택 창이 나타납니다. 대상 Windows Phone 버전으로 Windows Phone 7.1을 선택합니다.

    GetStartedSelectPlatform
  7. 확인을 클릭합니다. 새 프로젝트가 생성되고 Visual Studio 디자이너 창에 MainPage.xaml이 열립니다.

다음 단계는 Visual Studio 디자이너를 사용하여 응용프로그램의 컨트롤을 배치하는 것입니다. 컨트롤을 추가한 후 최종 레이아웃은 다음 화면 캡처와 유사하게 표시됩니다.

GetStartedFirstAppLayout

응용프로그램의 컨트롤을 추가하려면

  1. 응용프로그램 창 제목을 변경합니다. Visual Studio 디자이너에서 MY APPLICATION 텍스트를 마우스 오른쪽 버튼으로 클릭하고 속성을 선택합니다. 오른쪽 아래 모서리에 속성 창이 나타납니다.

    GetStartedProperties

  2. Text 속성에서 이름을 My First Application으로 변경합니다.

  3. 디자이너에서 페이지 이름 텍스트를 클릭합니다. Text 속성을 미니 브라우저로 변경합니다.

  4. 세로 및 가로 방향 모두에 대한 지원을 추가합니다. XAML 코드의 첫 번째 줄을 클릭합니다. 그러면 PhoneApplicationPage 속성이 속성 창에 표시됩니다. SupportedOrientation 속성을 PortraitOrLandscape로 변경합니다.

  5. Visual Studio 의 도구 상자가 아직 열려 있지 않다면 보기 | 다른 창 | 도구 상자 메뉴 명령을 선택하여 도구 상자를 엽니다.

  6. Windows Phone 컨트롤에서 TextBox 컨트롤을 디자이너 화면에 추가합니다. 도구 상자에서 끌어서 디자이너 화면에 놓으면 됩니다. 미니 브라우저 텍스트 바로 아래에 TextBox를 배치합니다. 마우스를 사용하여 위 레이아웃 이미지에 표시된 대략적인 너비로 컨트롤 크기를 조정합니다. 텍스트 상자의 기본 이름 textBox1을 그대로 둬도 됩니다.

    속성 창에서 textBox1에 대해 다음 속성을 설정합니다.

    속성

    Text

    http://www.xbox.com

    Height

    Auto

    Width

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    맨 위

    다음 설정을 사용하면 세로 및 가로 모드의 컨트롤 크기와 위치를 올바르게 조정할 수 있습니다. Go 버튼에 사용할 공간이 남도록 여백을 고려하여 마우스를 사용하여 컨트롤의 위치를 변경합니다.

  7. 방금 추가한 텍스트 상자 오른쪽으로 Button 컨트롤을 끌어서 놓습니다. 앞의 이미지에 표시된 대략적인 너비로 컨트롤 크기를 조정합니다. 이 버튼의 기본 이름 button1을 그대로 둬도 됩니다.

    속성 창에서 button1에 대해 다음 속성을 설정합니다.

    속성

    Content

    Go

    Height

    Auto

    Width

    Auto

    HorizontalAlignment

    Right

    VerticalAlignment

    맨 위

    다음 설정을 사용하면 세로 및 가로 모드의 컨트롤 위치를 올바르게 조정할 수 있습니다.

  8. Toolbox도구 상자에서 끌어서 놓아 Windows Phone용 WebBrowser 컨트롤을 응용프로그램을 추가합니다. 이전 단계에 추가한 두 컨트롤 아래에 놓습니다. 마우스를 사용하여 컨트롤이 나머지 공간을 채우도록 컨트롤의 크기를 조정합니다. 컨트롤의 기본 이름 webBrowser1을 그대로 둬도 됩니다.

    참고참고:

    WebBrowser 컨트롤에 대한 자세한 내용은 Windows Phone용 WebBrowser 컨트롤 개요Windows Phone용 WebBrowser 컨트롤 보안 모범 사례을 참조하십시오.

    속성 창에서 webBrowser1에 대해 다음 속성을 설정합니다.

    속성

    Height

    Auto

    Width

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    다음 설정을 사용하면 세로 및 가로 모드의 컨트롤 크기를 올바르게 조정할 수 있습니다.

    이제 레이아웃이 완료되었습니다. MainPage.xaml의 XAML 코드에서 컨트롤이 포함된 모눈을 찾습니다. 다음과 유사합니다. 앞의 그림에 표시된 것과 정확히 동일한 레이아웃을 원하는 경우 다음 XAML을 복사하여 붙여 넣어 MainPage.xaml 파일의 모눈 레이아웃을 대체하는 데 사용합니다.

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <TextBox Height="Auto" HorizontalAlignment="Stretch" Margin="0,0,120,0" Name="textBox1" Text="http://www.xbox.com" VerticalAlignment="Top" />
        <Button Content="Go" Height="Auto" HorizontalAlignment="Right" Name="button1" VerticalAlignment="Top" Width="Auto" />
        <phone:WebBrowser HorizontalAlignment="Stretch" Margin="0,84,0,0" Name="webBrowser1" VerticalAlignment="Stretch" Height="Auto" Width="Auto" />
    </Grid>
    

이 단계는 Go 버튼을 구현하는 코드를 추가합니다.

코드를 추가하려면

  1. 추가한 Go Button 컨트롤을 두 번 클릭하여 버튼 클릭 이벤트에 대한 이벤트 처리기를 추가합니다. 다음과 유사한 MainPage.xaml.cs 파일이 표시됩니다.

    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    using Microsoft.Phone.Controls;
    
    namespace MiniBrowser
    {
        public partial class MainPage : PhoneApplicationPage
        {
            // Constructor
            public MainPage()
            {
                InitializeComponent();
            }
    
    
            private void button1_Click(object sender, RoutedEventArgs e)
            {
    
            }
        }
    }
    
    
    
  2. Go 버튼을 두 번 클릭하면 button1_Click 이벤트 처리기를 포함하도록 XAML도 업데이트됩니다.

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <TextBox Height="Auto" HorizontalAlignment="Stretch" Margin="0,0,120,0" Name="textBox1" Text="http://www.xbox.com" VerticalAlignment="Top" />
        <Button Content="Go" Height="Auto" HorizontalAlignment="Right" Name="button1" VerticalAlignment="Top" Width="Auto" Click="button1_Click" />
        <phone:WebBrowser HorizontalAlignment="Stretch" Margin="0,84,0,0" Name="webBrowser1" VerticalAlignment="Stretch" Height="Auto" Width="Auto" />
    </Grid>
    
    
    
  3. MainPage.xaml.cs에서 button1_Click 이벤트 처리기를 다음 코드 줄과 대체합니다. 이 코드는 텍스트 상자에 입력된 URL을 가져와서 webBrowser1 컨트롤에서 해당 페이지를 탐색합니다.

    private void button1_Click(object sender, RoutedEventArgs e)
    {
        string site = textBox1.Text;    
        webBrowser1.Navigate(new Uri(site, UriKind.Absolute));
    }
    

이제 응용프로그램이 완성되었습니다. 이번 단계에서는 응용프로그램을 빌드하고 실행하며 디버그합니다.

중요중요:

응용프로그램을 테스트하기 전에 데스크톱 컴퓨터가 인터넷에 연결되어 있는지 확인합니다.

응용프로그램을 빌드하고 디버그하려면

  1. 디버그 | 솔루션 빌드 메뉴 명령을 선택하여 솔루션을 빌드합니다. 오류 목록 창에 오류가 나타나지 않고 프로젝트가 빌드되어야 합니다. 오류 목록 창이 아직 열려 있지 않으면 보기 | 다른 창 | 오류 목록 메뉴 명령을 선택하여 이 창을 열 수 있습니다. 오류가 있는 경우 위 단계를 검토하고 오류를 수정한 다음 솔루션을 다시 빌드합니다.

  2. 표준 도구 모음에서 응용프로그램 배포 대상을 Windows Phone 에뮬레이터로 설정합니다.

    에뮬레이터를 선택하는 표준 도구 모음의 대상

  3. 디버그 | 디버깅 시작 메뉴 명령을 선택하여 응용프로그램을 실행합니다. 에뮬레이터 창이 열리고 응용프로그램이 시작됩니다.

  4. Go 버튼을 클릭하여 브라우저 창이 지정 웹 사이트를 탐색하는지 확인하여 응용프로그램을 테스트할 수 있습니다.

    참고참고:

    인터넷 연결 속도와 데스크톱 CPU에 따라 에뮬레이터에서 웹 사이트가 로드되는 데 몇 초 정도 걸릴 수 있습니다.

  5. 에뮬레이터의 Rotation 컨트롤 중 하나를 누릅니다.

    왼쪽 회전 버튼 또는 오른쪽 회전 버튼

    에뮬레이터가 가로 모드로 회전됩니다. 가로 화면 형식에 맞춰 컨트롤의 크기가 자체 조정됩니다.

    GetStartedFirstAppRunningGetStartedFirstAppRunningLandscape
  6. 원하는 코드 줄에 커서를 두고 디버그 | 중단점 설정/해제 메뉴 명령을 선택하여 코드에 디버그 중단점을 설정할 수 있습니다.

  7. 디버그를 중지하려면 디버그 | 디버깅 중지 메뉴 명령을 선택할 수 있습니다.

이제 첫 번째 Windows Phone Silverlight 응용프로그램을 완료했습니다. Silverlight 개발에 대한 자세한 내용은 Silverlight 문서를 참조하십시오.

Microsoft는 MSDN 웹 사이트에 대한 귀하의 의견을 이해하기 위해 온라인 설문 조사를 진행하고 있습니다. 참여하도록 선택하시면 MSDN 웹 사이트에서 나가실 때 온라인 설문 조사가 표시됩니다.

참여하시겠습니까?
표시:
© 2014 Microsoft