단추에 스킨 및 애니메이션 효과 적용

앱의 단추에 스킨을 적용하고 애니메이션 효과를 줄 수도 있습니다. 다음과 같이 하세요.

앱의 모양을 정의하는 작업은 매우 중요하므로 PNG 파일을 사용하여 앱에 가장 적합한 모양을 만드는 iOS UIButton 사용자 지정 변형에 많은 시간을 투자해 왔습니다. 이때 사용자가 단추를 탭할 때의 작업 즉, 단추가 깜박이도록 할까요? 새 이미지를 표시할까요? 크기를 변경할까요? 아니면 세 가지 모두 실행되도록 할까요? 등을 결정했을 것입니다.

Windows 스토어 앱 단추 컨트롤도 모양을 변경할 수 있으며 사용자 지정 애니메이션 효과를 적용할 수도 있습니다. XAML에서 이러한 효과를 만들고 C# 및 C++에서 트리거하는 방법을 살펴보겠습니다.

참고  JavaScript 및 HTML을 사용하는 Windows 스토어 앱용 애니메이션에 대한 자세한 내용은 UI 애니메이션을 참조하세요.

단추 컨트롤에 스킨 적용

여러 가지 방식으로 단추 컨트롤의 모양을 변경할 수 있지만 가장 일반적인 방법은 다음과 같습니다.

  • 미리 설정된 스타일 사용
  • XAML 그리기 도구 사용
  • 비트맵 사용

좀더 자세히 살펴보겠습니다.

  • 미리 설정된 스타일 사용

    앱이 표준 Windows 8 디자인 지침을 따르도록 하려는 경우 많은 작업을 수행할 필요가 없습니다. 기존 XAML 단추는 예상대로 모양과 느낌을 제공하므로 빠른 시작: 컨트롤 스타일 지정(C#/VB/C++ 및 XAML을 사용하는 Windows 스토어 앱)에 표시된 대로 몇 가지 속성만 조정하면 색, 크기 및 글꼴 스타일을 변경할 수 있습니다. 이러한 단추는 모든 표시 크기에서 제대로 표시되도록 자동으로 크기가 조정됩니다.

    Xcode를 사용하는 경우 완료, 확인, 취소 등에 시스템 디자인을 사용할 수 있습니다. Windows 8에서 Windows 스토어 앱의 해당 단추는 StandardStyles.xaml에 저장됩니다. 예를 들어 다음은 XAML 단추에 적용되어 앱 바 컨트롤에서 사용할 수 있는 기본 제공 재생 단추 스타일입니다.

    샘플 단추

    다음 XAML만 있으면 이 스타일을 만들 수 있습니다.

    
     <Button x:Name="myPlayButton"  Style="{StaticResource PlayAppBarButtonStyle}" />
    
    

    참고  StaticResource에 있는 대부분의 스타일은 기본적으로 주석 처리되어 있습니다. 이러한 스타일을 사용하려면 StandardStyles.xaml 파일을 열고 사용할 단추를 찾은 다음 주석 처리를 제거합니다.

    Windows 8.1용으로 특별히 작성된 앱에는 더 이상 StandardStyles.xaml 파일이 없으며, 대신 AppBarButton이라는 새로운 유형의 단추가 있습니다. 예를 들어 Windows 8.1 앱에서 재생 단추를 만들려면 다음 XAML을 사용합니다.

    
    <AppBarButton x:Name="myPlayButton" Icon="Play" Label="Play"/>
    
    
  • XAML 사용

    예를 들어 미디어 재생 앱에서 다음과 같이 표시되는 단추 버전을 만들려고 합니다.

    샘플 단추

    이 단추는 어두운 그라데이션 배경과 재생을 나타내는 기호가 있는 전격 이미지로 구성됩니다. 사용자가 단추를 탭하면 전경 이미지를 변경할 수 있으므로 전경 및 배경 이미지를 별도로 유지하는 것이 적절한 방법처럼 보일 수 있습니다.

    이제 자주 사용하는 그림판 프로그램을 시작하여 일부 이미지를 만들기 전에 같은 결과를 프로그래밍 방식으로 얻는 방법을 고려해 보세요. XAML에는 많은 그리기 옵션이 있으므로 그라데이션 텍스처 배경과 전경의 삼각형 모양을 빠르게 만들 수 있습니다. 다음은 이 작업을 수행하는 한 가지 방법입니다.

    
     <Button x:Name="myCoolButton" Height="55" Width="104"  BorderThickness="0" >
                <Grid>
                    <Rectangle Width="104" Height="55">
                        <Rectangle.Fill>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Color="Black" Offset="0.0" />
                                <GradientStop Color="Gray" Offset="0.03" />
                                <GradientStop Color="Black" Offset="0.25" />
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                    <Polygon  Points="25,3,25,39,55,21">
                        <Polygon.Fill>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Color="LightGreen" Offset="0.0" />
                                <GradientStop Color="DarkGreen" Offset="1.0" />
                            </LinearGradientBrush>
                        </Polygon.Fill>
                    </Polygon>
                </Grid>
            </Button>
    
    

    XAML을 직접 입력하지 않으려면 Blend를 사용하여 보다 시각적인 방법으로 동일한 효과를 만들 수 있습니다.

    Blend를 사용하여 단추 만들기

  • 비트맵 사용

    XAML 단추 컨트롤을 사용하면 모양을 직접 정의하여 콘텐츠를 재정의할 수 있습니다. 즉, 여러 이미지를 표시하도록 할 수 있습니다. Grid 요소는 다음과 같이 두 개체(하나의 배경 이미지, 하나의 전경 이미지)를 쌓는 데 사용됩니다.

    
      <Button x:Name="myBitMapButton" Height="55" Width="104" BorderThickness="0" >
                <Grid>
                    <Image Source="graduated-button.png"/>
                    <Image Source="play-green.png"/>
                </Grid>
            </Button>
    
    

    다음과 같이 StackPanel 요소를 사용하면 TextBlock과 같은 개체를 훨씬 더 많이 결합하여 단추를 만들 수 있습니다.

    샘플 단추

    다음은 이 작업을 수행하는 코드입니다.

    
      <Grid Background="#FF5989A4">
            <Button x:Name="myBitMapButton"   Height="200" Width="104"  BorderThickness="0" Margin="80,34,0,679" >
                <StackPanel Height="86" >
                    <Grid Height="55" VerticalAlignment="Top" >
                        <Image Source="graduated-button.png" Margin="0,16,0,-7"/>
                    <Image Source="play-green.png" Margin="0,16,0,-5"/>
                    <TextBlock Text="Play"  VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="24,0,22,-15"/>
                    </Grid>
                </StackPanel>
            </Button>
    
    

비트맵보다 XAML을 사용하는 경우의 이점은 실제로 이미지가 벡터가 된다는 점입니다. 즉, 이미지가 표시될 화면의 해상도에 관계없이 이미지의 크기가 더 잘 조정됩니다. 비트맵과 XAML 방법을 모두 사용하여 단추를 만들고 나란히 배치하면 이미지를 확대할 때 명확하게 보이는 것을 확인할 수 있습니다. 물론 여러 버전으로 이미지를 제공(여러 해상도 지원 참조)하여 크기 조정 효과를 줄일 수 있지만 이러한 모든 파일을 관리하는 것은 곧 성가신 일이 될 수 있습니다.

확인하세요! 픽셀!

XAML의 뛰어난 장점은 여러 컨트롤에서 사용할 수 있는 템플릿을 정의할 수 있다는 점입니다. 예를 들어 다음과 같이 동일한 그라데이션 배경을 사용하는 일련의 단추를 만들려는 경우를 살펴보겠습니다.

미디어 컨트롤 단추

매번 그라데이션 배경을 정의하는 대신 각 단추에서 사용할 스타일을 만들 수 있습니다. 이 예에서 스타일은 단추를 표시하는 페이지에 대한 .xaml 파일 즉, MainPage.xaml에 배치됩니다. 그런 다음 스타일은 <Page.Resources> 섹션 내에 배치됩니다.


        <Style x:Name="graduatedButton" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Rectangle>
                                <Rectangle.Fill >
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Color="Black" Offset="0.0" />
                                        <GradientStop Color="Gray" Offset="0.03" />
                                        <GradientStop Color="Black" Offset="0.25" />
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <ContentPresenter />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

추가 콘텐츠(에: 텍스트 또는 다른 이미지)에 대한 자리 표시자인 <ContentPresenter/> 태그의 사용을 살펴보세요. 다음은 이 새 스타일을 사용하는 단추를 선언한 다음 삼각형을 더 추가하는 XAML입니다.


       <Button x:Name="myPlayButton" Style="{StaticResource graduatedButton}"  Height="44" Width="135"  Click="myPlayButton_Click" >
            <Grid>
                 <Polygon Points="50,3,50,39,86,21">
                    <Polygon.Fill>
                     <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                         <GradientStop Color="Yellow" Offset="0.0" />
                         <GradientStop Color="YellowGreen" Offset="0.5" />
                    </LinearGradientBrush>
                </Polygon.Fill>
              </Polygon>
            </Grid>
        </Button>


단추에 애니메이션 효과 적용

iOS 앱을 작성할 때 단추와 같은 컨트롤에 애니메이션 효과를 적용하는 것은 일반적으로 [UIView beginAnimations]/[UIView commitAnimations] 블록 내에서 컨트롤의 속성 일부를 변경하는 문제입니다. Windows 스토어 앱의 해당 프로세스에는 스토리보드 개체 만들기가 포함됩니다. 스토리보드 개체는 컨트롤이 따라야 하는 스크립트로 간주될 수 있으며 해당 속성이 시간에 따라 어떻게 변경되는지를 설명합니다. 이 개체는 단추를 탭할 때 발생하는 애니메이션 만들기나 새 정보 패널에서의 밀기에 적합합니다.

참고  XAML 용어 스토리보드와 iOS 용어 스토리보드를 혼동하지 마세요.

Blend를 사용하면 애니메이션을 가장 쉽게 만들 수 있습니다. Blend는 스토리보드를 구성하는 XAML을 만들 수 있는 그래픽 방법을 제공하며 Blend를 사용하면 작업하면서 애니메이션을 미리 볼 수도 있습니다.

먼저 특정 단추에 단일 애니메이션을 추가하는 과정을 살펴본 다음 스타일을 만들어 여러 단추에 적용할 수 있는 애니메이션 만들기를 살펴보겠습니다. 이 애니메이션에서는 화면으로 밀어넣은 것처럼 단추가 기울어지도록 합니다.

다음과 같이 XAML 파일에서 단추를 정의합니다.


 <Button x:Name="TiltButton"   BorderThickness="0" Margin="100,0,0,0" >
            <Grid>
                <Rectangle Width="200" Height="100">
                    <Rectangle.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Color="Black" Offset="0.0" />
                            <GradientStop Color="Gray" Offset="0.03" />
                            <GradientStop Color="Black" Offset="0.25" />
                        </LinearGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
                <Polygon  Points="75,5,75,95,145,50">
                    <Polygon.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Color="LightGreen" Offset="0.0" />
                            <GradientStop Color="DarkGreen" Offset="1.0" />
                        </LinearGradientBrush>
                    </Polygon.Fill>
                </Polygon>
            </Grid>
        </Button>

그러면 다음과 같은 모양의 단추가 생성됩니다.

단추

이제 Blend에서 프로젝트를 엽니다. 다음에 표시된 대로 단추 컨트롤을 선택하고 개체 및 타임라인 창에서 + 단추를 클릭합니다.

작업 중인 Blend

다음과 같이 새로 만들기를 선택하여 새 스토리보드 개체를 만들고 이름을 지정합니다.

Blend에서 새 스토리보드 만들기

시간 코드 디스플레이 왼쪽에 있는 키 프레임 기록 단추를 탭합니다. 그러면 모든 단추의 속성이 기본 위치에 있는 키 프레임이 만들어집니다. 노란색 플레이헤드 선을 약 0.5초 미만으로 끕니다. 그러면 두 번째(이 경우 마지막) 키 프레임의 위치가 됩니다.

플레이헤드 이동

이제 기울기 효과를 얻기 위해 단추의 매개 변수를 조정할 수 있습니다. 오른쪽에 있는 속성 보기의 변형에서 프로젝션을 찾고 Y 각도를 약 -30으로 변경합니다.

Y축 값을 변경하여 기울기 효과 만들기

마지막으로 개체 및 타임라인 창에서 스토리보드의 이름을 클릭한 다음 오른쪽에서 AutoReverse가 선택되어 있는지 확인합니다. 그러면 애니메이션이 완료된 후 원래 상태로 다시 돌아갑니다.

AutoReverse 선택

Blend 프로젝트를 저장하고 Visual Studio로 돌아갑니다. 솔루션을 다시 로드할지를 묻는 메시지가 표시되면 모두 예를 클릭해야 합니다. 이제 애니메이션이 프로젝트의 일부가 되었지만 자동으로 트리거되지는 않습니다. 대신 두 가지 작업을 수행하도록 단추의 XAML 정의를 변경해야 합니다. 첫째 단추는 변형을 지원(실제로 필요한 XAML이 Blend에서 자동으로 추가됨)해야 하며, 둘째 C# 코드 숨김 파일에서 함수를 호출해야 합니다(여기서는 함수를 직접 추가해야 함). 다음은 업데이트된 XAML입니다.


<Button x:Name="TiltButton"   BorderThickness="0"  Click="TiltButton_Click" >
            <Grid>
                <Rectangle x:Name="rectangle" Width="200" Height="100">
                	<Rectangle.Projection>
                		<PlaneProjection/>
                	</Rectangle.Projection>
                    <Rectangle.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Color="Black" Offset="0.0" />
                            <GradientStop Color="Gray" Offset="0.03" />
                            <GradientStop Color="Black" Offset="0.25" />
                        </LinearGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
                <Polygon  Points="75,5,75,95,145,50">
                    <Polygon.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Color="LightGreen" Offset="0.0" />
                            <GradientStop Color="DarkGreen" Offset="1.0" />
                        </LinearGradientBrush>
                    </Polygon.Fill>
                </Polygon>
            </Grid>
        </Button>

다음은 애니메이션을 트리거할 코드 숨김 페이지의 C# 함수입니다.


private void TiltButton_Click(object sender, RoutedEventArgs e)
        {
            TiltAnimation.Begin();
        }

C++를 사용하는 경우 유사한 코드를 사용할 수 있습니다.


void MyApp::MainPage::TiltButton_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
	TiltAnimation->Begin();
}


이 앱을 실행하면 다음과 같이 단추를 탭할 때 단추가 빠르게 약간 기울어지는 것을 확인할 수 있습니다.

실제로 기울어짐

위의 섹션에서는 스타일을 만들어 사용자 인터페이스 구현 속도를 어떻게 향상시킬 수 있는지를 살펴보았습니다. 다음은 스타일을 사용하여 만든 단추 컨트롤이 애니메이션을 상속하도록 스타일에 스토리보드를 추가하는 방법입니다. 핵심은 VisualStateManager 개체를 사용하는 것입니다. 이 개체를 사용하면 단추 이벤트별로 특정 스토리보드를 정의할 수 있기 때문입니다. 다음은 단추를 탭할 때 간단한 애니메이션을 트리거하는 XAML입니다. 이전처럼 이 XAML을 <Page.Resources> 섹션에 배치하면 스타일이 단추에 적용됩니다.


 <Style x:Name="graduatedButton" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="grid" RenderTransformOrigin="0.5,0.5">
                            <Grid.RenderTransform>
                                <CompositeTransform/>
                            </Grid.RenderTransform>
                            <VisualStateManager.VisualStateGroups>                             
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>                                 
                                        <VisualState x:Name="Pressed">                                    
                                            <Storyboard >
                                            <DoubleAnimation Duration="0" To=" 0.9" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="grid"/>
                                            <DoubleAnimation Duration="0" To=" 0.9" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="grid"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>                              
                            </VisualStateManager.VisualStateGroups>
                            <Rectangle >
                                <Rectangle.Fill >
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Color="Black" Offset="0.0" />
                                        <GradientStop Color="Gray" Offset="0.03" />
                                        <GradientStop Color="Black" Offset="0.25" />
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <ContentPresenter />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

VisualStateManager 사용은 Begin()으로 스토리보드 애니메이션을 트리거하지 않아도 됨을 의미합니다. 이는 상태가 활성화되면 애니메이션이 자동으로 트리거되기 때문입니다.

관련 항목

iOS 개발자용 항목
iOS 개발자용 리소스
iOS 개발자용 Windows 8 컨트롤
iOS 개발자용 Windows 8 도움말
스킨 및 애니메이션 항목
시작: 애니메이션
방법: XAML 및 Expression Blend를 사용하여 사용자 인터페이스 만들기
UI 애니메이션(C#/VB/C++ 및 XAML을 사용하는 Windows 스토어 앱)
스토리보드 애니메이션(C#/VB/C++ 및 XAML을 사용하는 Windows 스토어 앱)
시각적 상태에 대한 스토리보드 애니메이션

 

 

표시:
© 2015 Microsoft