방법: Windows Phone의 아이콘 버튼 및 메뉴 항목 동적 변경

2012-02-09

이 항목에서는 응용프로그램의 아이콘 버튼 및 메뉴 항목을 런타임에 동적으로 변경하는 방법에 대해 설명합니다. 응용프로그램 모음은 Silverlight 컨트롤이 아니므로 데이터 바인딩 같은 일부 공통 컨트롤 기능을 지원하지 않습니다. 이는 XAML에서 설정된 이름 속성을 사용해서는 아이콘 버튼과 메뉴 항목 텍스트를 변경할 수 없음을 의미합니다. 아이콘 버튼과 메뉴 항목을 런타임에 변경하려면 코드를 사용하여 응용프로그램 모음을 만들어야 합니다. 자세한 내용은 Windows Phone용 응용프로그램 모음 개요를 참조하십시오.

다음 프로시저에서는 버튼이 있는 응용프로그램 모음을 만듭니다. 사용자가 버튼을 클릭하면 재생과 일시 중지 간에 전환됩니다. 버튼의 텍스트와 아이콘을 모두 변경합니다. 또한 메뉴 항목을 만들고 텍스트를 전환합니다.

이 프로시저에서는 버튼에 사용할 재생 및 일시 중지 아이콘을 추가합니다. 자세한 내용은 Windows Phone용 응용프로그램 모음 아이콘 버튼을 참조하십시오.

아이콘 버튼 이미지를 추가하려면

  1. 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 추가를 가리킨 다음 새 폴더를 클릭합니다.

  2. 폴더 이름을 이미지로 지정합니다.

  3. 솔루션 탐색기에서 폴더 이미지를 마우스 오른쪽 버튼으로 클릭하고 추가를 가리킨 다음 기존 항목을 클릭합니다.

  4. 다음 위치 중 하나를 검색하여 표준 아이콘을 찾습니다.

    C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Icons\dark

    C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Icons\dark

  5. 다음 파일을 선택하고 추가를 클릭합니다. 아래에 나오는 대로 이름을 바꿉니다.

    원래 이름

    새 이름

    appbar.transport.play.rest.png

    play.png

    appbar.transport.pause.rest.png

    pause.png

  6. 솔루션 탐색기에서 새 파일 둘 다를 선택합니다.

  7. 속성 창에서 2개의 새 파일에 대해 다음 속성을 설정합니다.

    속성

    Build Action

    Content

    Copy to Output Directory

    Copy if newer

이 프로시저에서는 응용프로그램 모음을 만들고 버튼 하나와 메뉴 항목 하나를 추가합니다. 자세한 내용은 방법: 코드를 사용하여 Windows Phone용 응용프로그램 모음 만들기를 참조하십시오.

코드를 사용하여 응용프로그램 모음을 만들려면

  1. 편집기에서 페이지에 대한 코드 숨김 파일을 엽니다.

  2. 코드 맨 위에 다음 문을 추가합니다.

    using Microsoft.Phone.Shell;
    
  3. 페이지 생성자에서 InitializeComponent에 대한 호출 뒤에 다음 코드를 추가합니다. 이 코드는 새 응용프로그램 모음 개체를 초기화하고, 버튼과 메뉴 항목을 만들고, 초기 텍스트 및 아이콘을 설정하고, 클릭 이벤트 처리기를 식별합니다.

    ApplicationBar = new ApplicationBar();
    
    ApplicationBarIconButton button1 = new ApplicationBarIconButton();
    button1.IconUri = new Uri("/Images/play.png", UriKind.Relative);
    button1.Text = "play";
    ApplicationBar.Buttons.Add(button1);
    button1.Click += new EventHandler(button1_Click);
    
    ApplicationBarMenuItem menuItem1 = new ApplicationBarMenuItem();
    menuItem1.Text = "menu item state 0";
    ApplicationBar.MenuItems.Add(menuItem1);
    menuItem1.Click += new EventHandler(menuItem1_Click);
    
  4. 페이지에 다음 코드를 추가합니다. 이는 클릭 이벤트 처리기입니다. 다음 프로시저에서는 이들 메서드에 코드를 추가합니다.

    private void button1_Click(object sender, EventArgs e)
    {
    }
    
    private void menuItem1_Click(object sender, EventArgs e)
    {
    }
    
    

이 프로시저에서는 아이콘 버튼 이미지, 아이콘 버튼 텍스트 및 메뉴 항목 텍스트를 변경합니다. 버튼 및 메뉴 항목은 응용프로그램 모음 개체의 두 컬렉션입니다. 버튼과 메뉴 항목을 만든 순서를 알고 있고 컬렉션 크기가 작으므로 개체에 액세스하는 가장 쉬운 방법은 컬렉션에서의 위치를 기준으로 삼는 것입니다.

다음 프로시저에서는 테스트 용도로만 클릭 이벤트에 코드를 추가합니다. 응용프로그램 내에서 코드가 필요한 어디에서든 코드를 사용할 수 있습니다.

아이콘 버튼을 동적으로 변경하려면

  1. 버튼 클릭 이벤트에 다음 코드를 추가합니다.

    private void button1_Click(object sender, EventArgs e)
    {
        ApplicationBarIconButton btn = (ApplicationBarIconButton)ApplicationBar.Buttons[0];
    
        if (btn.Text == "play")
        {
            btn.Text="pause";
            btn.IconUri = new Uri("/Images/pause.png", UriKind.Relative);
        }
        else if(btn.Text == "pause")
        {
            btn.Text="play";
            btn.IconUri = new Uri("/Images/play.png", UriKind.Relative);
        }
    }
    
  2. 응용프로그램을 저장하고, 빌드하고, 실행합니다.

  3. 버튼을 여러 번 클릭하여 아이콘과 텍스트가 모두 변경되었다가 다시 변경되는지 확인합니다.

메뉴 항목을 동적으로 변경하려면

  1. 메뉴 항목 클릭 이벤트에 다음 코드를 추가합니다.

    private void menuItem1_Click(object sender, EventArgs e)
    {
        ApplicationBarMenuItem mi = (ApplicationBarMenuItem)ApplicationBar.MenuItems[0];
    
        if (mi.Text == "menu item state 0")
        {
            mi.Text="menu item state 1";
        }
        else if(mi.Text == "menu item state 1")
    {
            mi.Text="menu item state 0";
        }
    }
    
  2. 응용프로그램을 저장하고, 빌드하고, 실행합니다.

  3. 메뉴 항목을 여러 번 클릭하여 텍스트가 변경되었다가 다시 변경되는지 확인합니다.

표시: