XAML or HTML

021. 비헤이비어(CallMethodAction) #2

XAML 뽀개기

사용자에게 좋은 인터페이스 경험을 제공하기 위해 계속해서 새로운 형태의 인터페이스가 유행 또는 제안되고 있는 같습니다. 중에서 가지를 CallMethodAction 비헤이비어를 이용해 구현해 봅시다비헤이비어 이름 그대로 메소드를 호출하는 기능을 하는 비헤이비어입니다.

 


예제로 사용할 것은 내용(Contents) 아주 길 때 흔히 제공되 인터페이스입니다. 스크롤을 하는 도중 다시 처음으로 돌아가려면 많은 스크롤 양에 불편함을 느낄 때가 종종 있습니다. 그럴 사용하면 알맞은 인터페이스입니다. 처음으로 바로가는 버튼을 제공하 아주 간단한 기능입니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<Grid>
    <ScrollViewer x:Name="Target_ScrollViewer">
        <StackPanel Margin="5">
            <TextBlock Text="A"/>
            <TextBlock Text="B"/>
            <TextBlock Text="C"/>
            <TextBlock Text="D"/>
            <TextBlock Text="E"/>
            <TextBlock Text="F"/>
            <TextBlock Text="G"/>
            <TextBlock Text="H"/>
            <TextBlock Text="I"/>
            <TextBlock Text="J"/>
            <TextBlock Text="K"/>
            <TextBlock Text="L"/>
            <TextBlock Text="M"/>
            <TextBlock Text="N"/>
            <TextBlock Text="O"/>
            <TextBlock Text="P"/>
            <TextBlock Text="Q"/>
            <TextBlock Text="R"/>
            <TextBlock Text="S"/>
            <TextBlock Text="T"/>
            <TextBlock Text="U"/>
            <TextBlock Text="V"/>
            <TextBlock Text="W"/>
            <TextBlock Text="X"/>
            <TextBlock Text="Y"/>
            <TextBlock Text="Z"/>
        </StackPanel>
    </ScrollViewer>
 
    <Button Content="↑" FontWeight="Bold" FontSize="18"
            HorizontalAlignment="Right" VerticalAlignment="Bottom"
            Margin="5,5,22,5">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="Click">
                <ei:CallMethodAction TargetObject="{Binding ElementName=Target_ScrollViewer}" 
                                     MethodName="ScrollToHome"/>
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </Button>
</Grid>
 
cs

 

ScrollViewer와 Button Grid 안에 구성했습니다. 그런 다음 이전 포스트에서 이야기 일반적인 방법으로 비헤이비어를 버튼에 설정합니다Grid 사용한 것은 별 다른 의미는 없고 정리하는 의미에서 그룹을 지은 것뿐 입니다

 

 

ScrollViewer 컨트롤은 스크롤과 관련된 함수(Method)를 포함하고 있습니다. 이런 정보를 바탕으로 비헤이비어에 여러 속성을 정의할 수 있습니다.

 

1
2
3
4
5
6
<i:Interaction.Triggers>
    <i:EventTrigger EventName="Click">
        <ei:CallMethodAction TargetObject="{Binding ElementName=Target_ScrollViewer}" 
                             MethodName="ScrollToHome"/>
    </i:EventTrigger>
</i:Interaction.Triggers>
cs

 


ElementName 문법을 이용해 TargetObject 속성을 정의하고 MethodName 속성에는 의도에 맞게 ScrollToHome 함수를 정의합니다. 트리거 버튼의 Click 이벤트로 되어 있어 앞서 정의한 액션이 실행되게 됩니다. 간단합니다.


이러한 비헤이비어의 속성 정의는 Blend for VS 속성 윈도우를 이용하면 XAML 문법에 익숙치 않아도 쉽게 정의할 있습니다.

 

그러면 기능을 필요로 하는 인터페이스마다 매번 버튼을 추가하고 하위에 비헤이비어를 정의해야할까요? 굉장히 비효율적일 같습니다. 다음 포스트에서 이를 해결해 봅시다.


샘플 코드 : https://github.com/CharlesKwon/XamlSimplified


참고 : MSDN > Working with built-in behaviors


관련 목차

 

020. 비헤이비어(Behavior) #1

021. 비헤이비어(CallMethodAction) #2

022. 비헤이비어(CallMethodAction) #3