본문 바로가기

WindowsRT

ThemeDictionaries

요즘 목표가 퇴근 후에 월,수,금 공부(밥 먹고 퇴근하기) 화,목은 헬스장 가서 몸짱 만들기(현상 유지하기).

   

공부 목표로 "Windows Store App을 하나 만들어 보면서 공부해 보자!!" 일단 만만한 서비스에 대해서 대충 API 사용하는 부분은 다 만들고 UI을 붙이려고 하니까 멍~

   

그래서 기본 Template으로 만들어진걸 참조하자라는 마음으로 Grid App(XAML)을 선택하고, 프로젝트를 생성해 보니 기존에 Silverlight나 WP으로 프로젝트를 만들었을 때보다 훨씬 많은 파일들을 생성 Orz..(이걸 언제 다 본담.. 덜덜).

   

   

먼가 참 많은데 다들 훑어 보고 개발하고 있죠(후후후.. 찔리면 일단 개발 하던 것 잠시 멈추고 한 번 훑어 봅시다 양심적으로)

   

어디서 시작하는지 당황하지 말고 일단 App파일부터 당당하게 시작

   

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>

            <!-- 
                Styles that define common aspects of the platform look and feel
                Required by Visual Studio project and item templates
                -->
            <ResourceDictionary Source="Common/StandardStyles.xaml"/>
        </ResourceDictionary.MergedDictionaries>

        <!-- Application-specific resources -->

        <x:String x:Key="AppName">App1</x:String>
    </ResourceDictionary>
</Application.Resources>

   

   

중간에 보면 StandardStyles.xaml을 Merge 해주는 것을 볼 수 있다. 그래서 머 기본 스타일들을 넣어줬나 싶어서 한 번 훑어 보기로 한다.

   

굉~~~~장히 많고 긴 Style들이 정의 되어 있는데 그 중에 다음과 같은 부분이 눈에 띈다.

   

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <x:String x:Key="BackButtonGlyph">&#xE071;</x:String>
        <x:String x:Key="BackButtonSnappedGlyph">&#xE0BA;</x:String>
    </ResourceDictionary>

    <ResourceDictionary x:Key="HighContrast">
        <x:String x:Key="BackButtonGlyph">&#xE071;</x:String>
        <x:String x:Key="BackButtonSnappedGlyph">&#xE0C4;</x:String>
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

   

2개의 ResourceDictionary가 같은 키 값을 가지는 String을 등록하고 있다.

   

아하~ ThemeDictionaries에 등록된 ResourceDictionary중에 하나를 선택해서 사용이 되나보다~ 라고 생각을 할 수 있겠다.


그래서 ResourceDictionary을 선택해주는 코드를 찾아 봤는데 없더라!!!

   

잘못 찾았나 싶어서 다시 찾아봤지만 정말 없더라!!!

   

   

그래서 windows store app 개발을 하지만 google에서 검색 ㅋ_ㅋ

   

다음과 같은 좌표들을 얻게 된다.

http://msdn.microsoft.com/library/windows/apps/BR208807

   

머 주렁주렁 써있다. 머 다 읽으면 좋지만 중간에 Example을 바로 보면 이해가 더 빠르다.

   

대략 Key값을 보면 "Default", "HighContrastBlack", "HighContrastWhite", "HighContrastCustom" 으로 ResourceDictionary들이 등록이 되어있다.

   

비슷하게 흉내를 내서 샘플을 만들어 보았다.

   

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.Resources>
                <ResourceDictionary>
                        <ResourceDictionary.ThemeDictionaries>
                                <ResourceDictionary x:Key="Default">
                                        <Style TargetType="Button" >
                                                <Setter Property="Background" Value="Green"/>
                                                <Setter Property="Foreground" Value="White"/>
                                                <Setter Property="BorderBrush" Value="Gold" />
                                        </Style>
                                </ResourceDictionary>
                                <ResourceDictionary x:Key="HighContrastWhite">
                                        <Style TargetType="Button" >
                                                <Setter Property="Background" Value="White"/>
                                                <Setter Property="Foreground" Value="Black"/>
                                                <Setter Property="BorderBrush" Value="Yellow" />
                                        </Style>
                                </ResourceDictionary>
                        </ResourceDictionary.ThemeDictionaries>
                </ResourceDictionary>
        </Grid.Resources>
        <Button Content="
메롱" Width="100" Height="50"/>
</Grid>

   

   

자~ 그냥 일단 실행을 해보자.

   

   

   

Default 스타일이 적용 된 것을 확인 할 수 있다.

   

그럼 밑에 HighContrastWhite는 어떻게 선택해야 할까? 여기서 센스를 발휘해 보자.

   

우리가 윈도우를 사용하면서 창틀 색도 바꿔보고 배경화면도 바꿔 본적이 있다면 고대비~~을 본적이 있을 것이다.

   

바로 저기다!! 눈치가 있다면 고대비 흰색을 선택하고 다시 빌드 해볼 것이다.

   

그렇다. 그런 것이다.

   

그렇다면 HighContrastBlack을 정의하고 고대비 검정을 선택하면? 당연하다. 그렇다.

   

그런데 우리가 처음에 봤던 ResourceDictionary에서 Key값이 "HighContrast" 였다.

   

그래서 추가 해봤다.

   

<ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Default">
                        <Style TargetType="Button" >
                                <Setter Property="Background" Value="Green"/>
                                <Setter Property="Foreground" Value="White"/>
                                <Setter Property="BorderBrush" Value="Gold" />
                        </Style>
                </ResourceDictionary>
                <ResourceDictionary x:Key="HighContrast">
                        <Style TargetType="Button" >
                                <Setter Property="Background" Value="Turquoise"/>
                                <Setter Property="Foreground" Value="Azure"/>
                                <Setter Property="BorderBrush" Value="Cornsilk" />
                        </Style>
                </ResourceDictionary>
                <ResourceDictionary x:Key="HighContrastWhite">
                        <Style TargetType="Button" >
                                <Setter Property="Background" Value="White"/>
                                <Setter Property="Foreground" Value="Black"/>
                                <Setter Property="BorderBrush" Value="Yellow" />
                        </Style>
                </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>

   

그리고 고대비 검정을 선택해 보도록 해보자.

   

   

HighContrastBlack이 없으닌까 HighContrast가 적용이 되었다. 머 이야기 할 필요도 없이 HighContastBlack도 있었다면 그게 적용이 된다.

   

머 사실 HighContrastBlack/White 등등을 고려해서 정말 알차게 구현해도 좋지만 일단은 그냥 이런게 있구나~ 하는 정보만 알고 넘어가자.

   

이 내용을 찾다 보니까 Application.REquestedTheme Property라는게 있다는 것을 알게 되었다. 

http://msdn.microsoft.com/en-US/library/windows/apps/windows.ui.xaml.application.requestedtheme

   

요건 다음에 다뤄보도록 하자. 자 이제 굿 나잇~