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

Windows Phone의 테마 리소스를 적용하는 방법

2014-06-18

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

 

테마는 Windows Phone 단말기에서 시각적 요소를 개인 설정하는 데 사용되는 리소스 집합입니다. 테마는 컨트롤과 UI 요소가 Windows Phone 응용프로그램 전체에 일관되게 표시되도록 합니다. 이 항목에서는 테마 리소스를 사용하고 프로그래밍 방식으로 테마 배경과 테마 컬러를 확인하는 응용프로그램을 만드는 방법에 대해 설명합니다. 테마 리소스를 사용하는 방법에 대한 자세한 내용은 Windows Phone의 테마를 참조하세요.

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

 

사용자가 단말기의 설정 메뉴에서 시스템 차원의 테마를 사용하도록 설정하는 경우 응용프로그램의 테마 관련 색만 변경됩니다. 글꼴과 컨트롤 크기는 변경되지 않습니다. 예를 들어 사용자가 테마 설정 페이지에서 테마 컬러를 자주색으로 설정하면 응용프로그램에서 해당 리소스 브러시로 구성된 UI 요소만 자주색으로 변경됩니다.

참고참고:

다른 테마를 선택할 때 응용프로그램이 유휴 상태이면 다음에 시작할 때까지 응용프로그램이 새 테마에 맞게 조정되지 않습니다.

다음 이미지는 이 항목에서 만든 응용프로그램이 테마 변경 사항에 맞게 조정되는 방식을 보여 줍니다.

THEME_ResourcesHowTo

이 이미지는 왼쪽에서 오른쪽으로 배경이 어둡게이고 테마 컬러가 빨강인 경우의 응용프로그램을 보여 줍니다. 설정 페이지에서 테마를 선택하여 테마 페이지를 엽니다. 테마 페이지에서 테마가 밝게 배경과 주황 테마 컬러로 변경됩니다. 응용프로그램을 다시 실행하면 새 테마 설정이 반영됩니다.

이 단계에서는 응용프로그램을 만들고, 응용프로그램 및 페이지 제목을 설정하고, 사각형 하나와 texBlock 컨트롤 두 개를 추가합니다. 각 컨트롤은 테마 리소스를 사용하는 다른 방법을 보여 줍니다.

응용프로그램을 준비하려면

  1. Visual Studio 에서 파일 | 새 프로젝트 메뉴 명령을 선택하여 새 프로젝트를 만듭니다.

  2. 새 프로젝트 창이 표시됩니다. Visual C# 템플릿을 확장한 다음 Windows Phone 템플릿을 선택합니다.

  3. Windows Phone 앱  템플릿을 선택합니다. 이름 상자에 선택한 이름을 입력합니다.

  4. 확인을 클릭합니다. Windows Phone 플랫폼 선택 대화 상자가 표시됩니다.

  5. 대상 Windows Phone 버전 메뉴에서 Windows Phone OS 7.1 이 선택되었는지 확인합니다.

  6. 확인을 클릭합니다. 새 프로젝트가 만들어지고 MainPage.xaml이 Visual Studio 디자이너 창에서 열립니다.

  7. MainPage.xaml에서 LayoutRoot라는 그리드를 다음 코드로 바꿉니다.

        <!--LayoutRoot is the root grid where all page content is placed-->
        <Grid x:Name="LayoutRoot" Background="Transparent">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    
            <!--TitlePanel contains the name of the application and page title-->
            <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
                <TextBlock x:Name="ApplicationTitle" Text="THEME RESOURCES" Style="{StaticResource PhoneTextNormalStyle}"/>
                <TextBlock x:Name="PageTitle" Text="example" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
            </StackPanel>
    
            <!--ContentPanel - place additional content here-->
            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    
            </Grid>
        </Grid>
    
    

테마 리소스를 적용하려면

  1. MainPage.xaml에서 ContentPanel이라는 Grid 안에 다음 코드를 추가합니다.

                <Rectangle 
                    Height="100" 
                    HorizontalAlignment="Left" 
                    Margin="12,33,0,0" 
                    Name="rectangle1" 
                    Stroke="{StaticResource PhoneForegroundBrush}" 
                    StrokeThickness="1" 
                    VerticalAlignment="Top" 
                    Width="200" 
                    Fill="{StaticResource PhoneAccentBrush}" />
    
    

    이 코드는 페이지의 왼쪽 위에 사각형을 만듭니다. Fill 특성과 이 특성이 StaticResource 태그를 사용하여 PhoneAccentBrush라는 리소스 브러시를 지정하는 방법을 확인합니다. 이 특정 브러시를 사용하면 사각형 색이 시스템 차원의 테마 변경에 응답할 수 있습니다. 예를 들어 사용자가 휴대폰 설정 메뉴에서 테마 컬러를 수정하면 사각형이 해당 색으로 변경됩니다.

  2. MainPage.xaml에서 ContentPanel이라는 Grid 안의 사각형 아래에 다음 코드를 추가합니다.

                <TextBlock 
                    Height="45" 
                    HorizontalAlignment="Left" 
                    Margin="20,154,0,0" 
                    Name="textBlock1" 
                    Text="background =" 
                    VerticalAlignment="Top" 
                    Width="400" 
                    FontFamily="{StaticResource PhoneFontFamilySemiLight}" 
                    FontSize="{StaticResource PhoneFontSizeLarge}"/>
    
    

    이 코드는 사각형 아래에 놓이고 이름이 textBlock1TextBlock 컨트롤을 만듭니다. StaticResource 태그가 FontFamilyFontSize 특성에 적용되었습니다. TextBlock 텍스트가 글꼴 PhoneFontFamilySemiLight(Segoe WP SemiLight) 및 글꼴 크기 PhoneFontSizeLarge(32)로 설정됩니다. 리소스 정의에 대한 자세한 내용은 Windows Phone의 테마 리소스를 참조하세요.

  3. MainPage.xaml에서 ContentPanel이라는 Grid 안의 textBlock1 아래에 다음 코드를 추가합니다.

                <TextBlock 
                    Height="35" 
                    HorizontalAlignment="Left" 
                    Margin="21,205,0,0" 
                    Name="textBlock2" 
                    Text="accent color = " 
                    VerticalAlignment="Top" 
                    Width="400" 
                    Style="{StaticResource PhoneTextAccentStyle}"/>
    
    

    이 코드는textBlock2라는 두 번째 TextBlock을 만들고 스타일 리소스 PhoneTextAccentStyle을 적용합니다. 이 테마 리소스는 글꼴(PhoneFontFamilySemiBold), 글꼴 크기(PhoneFontSizeNormal) 및 전경(PhoneAccentBrush)을 사용합니다. 시스템 차원의 테마를 시작하면 휴대폰 테마 브러시로 인해 TextBlock 텍스트 색이 변경됩니다.

테마 배경과 테마 컬러는 현재 응용프로그램 리소스로 사용할 수 있습니다. 이 섹션에서는 각각 PhoneDarkThemeVisibilityPhoneAccentColor 리소스를 사용하여 테마 배경과 테마 컬러를 확인합니다.

참고참고:

XNA Framework 기반 Windows Phone 응용프로그램은 이 섹션에 설명된 대로 현재 응용프로그램 개체에 액세스하여 테마 리소스를 사용할 수 있습니다. 사용 가능한 테마 리소스에 대한 자세한 내용은 Windows Phone의 테마 리소스를 참조하세요.

테마 배경을 확인하려면

  • 기본 페이지의 코드 숨김 파일인 MainPage.xaml에서 MainPage 생성자의 InitializeComponent 호출 아래에 다음 코드를 추가합니다.

            // Determine the visibility of the dark background.
            Visibility darkBackgroundVisibility = 
                (Visibility)Application.Current.Resources["PhoneDarkThemeVisibility"];
    
            // Write the theme background value.
            if (darkBackgroundVisibility == Visibility.Visible)
            {
                textBlock1.Text = "background = dark";
            }
            else
            {
                textBlock1.Text = "background = light";
            }
    
    

    이 코드는 응용프로그램 리소스 설정에서 현재 테마 배경을 확인하는 방법을 보여 줍니다. 현재 테마에서 사용되는 배경 유형을 확인하고 textBlock1Text 속성에 씁니다.

테마 컬러를 확인하려면

  • MainPage.xaml에서 MainPage 생성자의 방금 추가한 코드 아래에 다음 코드를 추가합니다.

            // Determine the accent color.
            Color currentAccentColorHex = 
                (Color)Application.Current.Resources["PhoneAccentColor"];
    
            string currentAccentColor = "";
    
            switch (currentAccentColorHex.ToString())
            {
                case "#FF1BA1E2": currentAccentColor = "blue"; break;
    
                case "#FFA05000": currentAccentColor = "brown"; break;
    
                case "#FF339933": currentAccentColor = "green"; break;
    
                case "#FFE671B8": currentAccentColor = "pink"; break;
    
                case "#FFA200FF": currentAccentColor = "purple"; break;
    
                case "#FFE51400": currentAccentColor = "red"; break;
    
                case "#FF00ABA9": currentAccentColor = "teal (viridian)"; break;
    
                // Lime changed to #FFA2C139 in Windows Phone OS 7.1.
                case "#FF8CBF26": 
                case "#FFA2C139": currentAccentColor = "lime"; break;
    
                // Magenta changed to # FFD80073 in Windows Phone OS 7.1.
                case "#FFFF0097": 
                case "#FFD80073": currentAccentColor = "magenta"; break;
    
                // #FFF9609 (previously orange) is named mango in Windows Phone OS 7.1.
                case "#FFF09609": currentAccentColor = "mango (orange)"; break;
    
                // Mobile operator or hardware manufacturer color
                default: currentAccentColor = "custom eleventh color"; break;
            }
    
            // Write the current accent color.
            textBlock2.Text = "accent color = " + currentAccentColor;
    
    

    이 코드는 응용프로그램 테마 리소스에서 테마 컬러를 확인하는 방법을 보여 줍니다. 테마 컬러 값을 확인하고 switch/case 문을 사용하여 textBlock2Text 속성에 이름을 할당합니다.

이 섹션에서는 테마 배경과 테마 컬러를 변경하기 전과 후에 응용프로그램을 실행합니다.

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

  1. 디버그 | 디버깅 시작 메뉴 명령을 선택하여 응용프로그램을 실행합니다. 이렇게 하면 에뮬레이터 창이 열리고 응용프로그램이 실행됩니다. Rectangle 및 두 개의 TextBlock 컨트롤이 화면에 표시됩니다. Rectangle에 현재 시스템 테마와 일치하는 색이 지정되고 두 개의 텍스트 블록에 다른 글꼴과 글꼴 크기가 적용되어야 합니다. 또한 두 번째 TextBlockPhoneAccentBrush가 전경에 적용되었기 때문에 현재 시스템 테마와 일치하는 텍스트 색이 지정됩니다.

  2. 테마 배경과 테마 컬러를 변경합니다. 시작에서 목록으로 밀고 설정을 탭합니다. 설정에서 테마를 탭하고 다른 배경과 테마 컬러를 선택합니다.

  3. 응용프로그램을 다시 시작하고 새 테마로 조정되는 방식을 확인합니다. 다음 이미지는 이 섹션의 단계를 보여 줍니다.

    THEME_ResourcesHowTo

표시:
© 2014 Microsoft