방법: Windows Phone의 컨트롤 각도 조절 효과 사용

2012-02-09

이 항목에서는 응용프로그램 내에서 컨트롤에 각도 조절 효과를 적용하는 방법에 대해 설명합니다. 이 항목에 앞서 Windows Phone의 각도 조절 효과를 읽어보시기 바랍니다. 지금부터 이 항목에서는 다음 단계를 다룹니다.

  1. 기본 Windows Phone 응용프로그램을 만들고 TiltEffect 클래스 파일을 추가합니다.

    참고참고:

    TiltEffect.cs 파일은 각도 조절 기능을 사용하거나 사용하지 않도록 하는 종속성 속성을 정의합니다. 또한 컨트롤에 대한 시각적 "각도 조절" 효과를 만드는 데 필요한 코드도 제공합니다.

  2. 각도를 조절할 컨트롤 모음을 추가합니다.

  3. 지정한 모든 컨트롤에 각도 조절 기능을 제공하기 위해 IsTiltEnabled 종속성 속성을 전역적으로 적용합니다.

  4. 각도 조절 효과를 해제하기 위해 SuppressTilt 종속성 속성을 단일 컨트롤에 적용합니다.

이 섹션에서는 기본 각도 조절 효과 응용프로그램을 만들고 TiltEffect.cs 파일을 가져옵니다.

기본 각도 조절 효과 응용프로그램을 만들려면

  1. 시작 메뉴에서 Windows Phone용 Visual Studio 2010 Express를 실행합니다.

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

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

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

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

  6. 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 추가, 새 항목을 차례로 클릭합니다. 클래스를 선택하고 파일 이름을 TiltEffect.cs로 바꾼 다음 페이지 맨 아래에 있는 추가를 클릭합니다.

이 항목에서는 이 파일에 필요한 코드가 제공되지 않으므로 컨트롤 각도 조절 효과 샘플에서 ControlTiltEffect 샘플을 다운로드해야 합니다. 솔루션을 다운로드한 후 다음 단계를 수행합니다.

TiltEffect.cs 파일을 가져오려면

  1. 다운로드한 솔루션에서 TiltEffect.cs 파일을 찾습니다.

  2. TiltEffect.cs 파일을 프로젝트로 가져옵니다.

  3. 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 추가를 클릭한 다음 기존 항목을 선택합니다. TiltEffect.cs 파일을 찾아 추가를 클릭합니다.

  4. TiltEffect.cs 파일의 네임스페이스를 프로젝트 네임스페이스 이름으로 변경합니다. 예를 들어 코드를 이 파일에 복사했다면 네임스페이스는 ControlTiltEffect가 됩니다.

    namespace ControlTiltEffect
    
    

    네임스페이스를 프로젝트의 네임스페이스로 변경합니다.

이 섹션에서는 각도 조절 효과를 사용하거나 해제하는 XAML 코드를 통해 컨트롤 모음을 추가합니다.

각도 조절이 가능한 컨트롤을 추가하려면

  • MainPage.xaml에서 페이지 아래쪽의 Content Panel 섹션 아래에 있는 XAML 코드에 다음 코드를 추가합니다. 섹션 앞의 주석은 ""<!--ContentPanel - place additional content here-->"입니다. 해당 섹션에 이미 채워져 있는 열고 닫는 Grid 태그를 제거합니다.

    <!--An assortment of controls that will support the tilt effect.-->
            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                <Button Width="186" Height="185" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="9,20,0,0" />
                <Button Content="Button (Suppressed)" Height="150" HorizontalAlignment="Left" Margin="37,0,0,161" VerticalAlignment="Bottom" Width="380"/>
                <CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Left" Margin="235,25,0,0" Name="checkBox1" VerticalAlignment="Top" />
                <RadioButton Content="RadioButton" Height="72" HorizontalAlignment="Left" Margin="235,103,0,0" Name="radioButton1" VerticalAlignment="Top" />
                <HyperlinkButton Content="HyperlinkButton" Height="30" HorizontalAlignment="Left" Margin="25,211,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="409" />
                <ListBox Height="110" HorizontalAlignment="Left" Margin="6,472,0,0" Name="listBox1" VerticalAlignment="Top" Width="460" ItemsSource="{Binding}" >
                    <ListBoxItem Content="First ListBoxItem" ></ListBoxItem>
                    <ListBoxItem Content="Second ListBoxItem" ></ListBoxItem>
                    <ListBoxItem Content="Third ListBoxItem" ></ListBoxItem>
                    <ListBoxItem Content="Fourth ListBoxItem" ></ListBoxItem>
                </ListBox>              
            </Grid>
    
    
    참고참고:

    또한 ToolBox에서 이들 컨트롤을 자신의 페이지 및 위치에 끌어서 놓을 수 있습니다. 다음 그림은 일반적인 페이지 모양입니다.

    AP_CoreCont_Tilt

이 섹션에서는 페이지에 IsTiltEnabled 종속성 속성을 추가하고 사용합니다. 만들어진 모든 컨트롤에 각도 조절 효과가 전파되도록 페이지의 루트에 속성이 추가됩니다. 각도 조절 효과를 전역적으로 적용하거나 단일 컨트롤에만 적용하도록 설정할 수 있습니다. 또한 SuppressTilt 종속성 속성을 사용하여 단일 컨트롤에 적용되는 각도 조절 효과를 해제합니다.

각도 조절 효과 종속성 속성을 적용하려면

  1. MainPage.xaml에서 페이지 맨 위에 다음 네임스페이스 선언을 추가합니다.

    xmlns:local="clr-namespace:[Namespace]"
    
    
    참고참고:

    [Namespace]에는 응용프로그램 네임스페이스를 입력합니다.

  2. MainPage.xaml에서 페이지의 맨 위에 종속성 속성 IsTiltEnabled를 추가하고 사용하도록 설정합니다.

    local:TiltEffect.IsTiltEnabled="True"
    
    
    참고참고:

    이 코드는 TiltEffect.cs 파일에서 IsTiltEnabled 종속성 속성을 참조하며 해당 페이지에서 전역적으로 각도 조절 기능을 사용하게 합니다.

  3. 페이지의 XAML 코드에서 Content 속성이 Button (Suppressed)로 설정된 Button 컨트롤을 찾습니다. 이 코드를 다음과 같이 수정합니다.

    <Button Content="Button (Suppressed)" Height="150" HorizontalAlignment="Left" Margin="37,0,0,161" VerticalAlignment="Bottom" Width="380" local:TiltEffect.SuppressTilt="True"/>
    
    
    참고참고:

    위 코드에서 수정된 사항은 단지 SuppressTilt 종속성 속성을 추가하고 그 값을 True로 설정한 것입니다.

  4. 디버그 | 디버깅 시작 메뉴 명령을 선택하여 응용프로그램을 실행합니다. 이렇게 하면 에뮬레이터 창이 열리고 응용프로그램이 실행되며, 또는 선택에 따라 단말기로 배포됩니다. 응용프로그램이 실행되면 모든 컨트롤에 각도 조절 효과가 적용된 것을 확인할 수 있습니다. 단, suppressed tilt 종속성 속성이 설정된 버튼은 예외입니다.

표시: