STATEGROUP 클래스

StateGroup 클래스

스테이트(States) 집합을 그룹화하고 이들 사이를 전환하는데 사용됩니다. StateGroup은 Active 속성을 가지는데요. 현재 활성화 할 스테이트를 알려줍니다.

단독(Exclusive) 혹은 병렬(Parallel)로 Transition을 적용할 수 있습니다. Exclusive는 다음 스테이트가 활성화 되기 전에 각 스테이트가 완전히 비활성화되었을 때를 의미합니다. Parallel은 Exclusive와 달리 다른 스테이트들 사이에서 함께 실행됩니다.

예제

다음 예제는 스테이트 3개의 사각형 색을 전환하기 위해 StateGroup을 사용하는 방법을 보여줍니다:

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
<App>
    <JavaScript>
        stateGroup.goto("redState");
    </JavaScript>
    <StackPanel>
        <Panel Width="100" Height="100">
            <SolidColor ux:Name="someColor"/>
        </Panel>
        <StateGroup ux:Name="stateGroup" Transition="Parallel" Active="greenState">
            <State ux:Name="redState">
                <Change someColor.Color="#f00" Duration="0.2"/>
            </State>
            <State ux:Name="blueState">
                <Change someColor.Color="#00f" Duration="0.2"/>
            </State>
            <State ux:Name="greenState">
                <Change someColor.Color="#0f0" Duration="0.2"/>
            </State>
        </StateGroup>
        <Grid ColumnCount="3">
            <Button Text="Red">
                <Clicked>
                    <Set stateGroup.Active="redState"/>
                </Clicked>
            </Button>
            <Button Text="Blue">
                <Clicked>
                    <Set stateGroup.Active="blueState"/>
                </Clicked>
            </Button>
            <Button Text="Green">
                <Clicked>
                    <Set stateGroup.Active="greenState"/>
                </Clicked>
            </Button>
        </Grid>
    </StackPanel>
</App>

[[ 동영상 강좌(재생 목록 버튼을 누르세요) ]]

Was this article helpful?

Related Articles