컨트롤 마다 animation 동기화(synchronization) 하기

ListView를 알람 컨테이너로 사용한다.

각 row가 하나의 알람 항목이 되도록.

알람이니만큼, 빨간 램프를 두었다. 깜빡이면 좋을 듯 하여, 애니메이션을 주었다.

알람이 추가될 때마다 깜빡질을 한다.

위와 같다. 각 알람 항목은 추가될 때마다 램프가 깜빡이기 시작한다.

두어개까지는 괜찮지만, 항목이 많아지다보니, 여기저기서 깜빡꺼리며 난잡하다. 보기 싫다. 거슬린다.

각 깜빡임을 어떻게 하면 동기화 할 수 있을까.

알람이 추가되는 타이밍이 다르니, 깜빡이는 동작의 주기도 다를진데...

(깜빡임의 구현은 해당 이미지의 Opacity를 Doubleanimation을 주어 바뀌도록 했다.)

처음 생각은 시간 동기화.

animation의 시작 시간을 현재 시간의 초를 기준으로 한다면 어떨까..

WPF Double animation의 시작에 대해 이벤트를 통해 할 수 있을 듯 하지만, 막상 어떻게 해야할지 감이 안선다.

두번째 생각은 알람이 추가될때마다 이전 추가된 알람들을 새로 한번에 다시 넣기.

-> 새로운 알람 추가마다, 리스트를 비우고 추가하는 로드는 차치하고서라도,

알람이 많아지면, 아무리 한번에 넣는다하더라도, 먼저 추가되는 것과, 맨 나중에 추가되는 놈의 시간차로

미세한 차이는 생길 듯 하다. 시도 하지 않았지만, 하면 될 듯은 한데, 별로 좋아 보이지 않음.

흠...

구글링 시작..

https://stackoverflow.com/questions/4725680/synchronize-wpf-coloranimation-across-several-controls

위에서 ColinE의 답변 참고.

샘플 코드는 없지만, 괜찮은 생각인 듯. 꼼수같지만, 그래서 더 재밌는 생각!

hidden으로 하나의 컨트롤을 감춰두고, 나머지 추가되는 모든 알람들은 animation에서 Opacity를 각자 시작하는 것이 아니라, WPF의 Element binding을 이용하여 감춰진 컨트롤의 Opacity로 바인딩 걸기.

감춰진 더미 컨트롤 코드

<Image Source="/Assets/red-circle.png" HorizontalAlignment="Center" Visibility="Hidden" x:Name="dummyImage">
    <Image.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation To="0.2" Duration="0:0:0.5" Storyboard.TargetProperty="Opacity" RepeatBehavior="Forever" AutoReverse="True"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Image.Triggers>
</Image>

위 더미에 이름을 부여하고 본래 컬럼의 정의를 아래와 같이 바인딩 한다.

<GridViewColumn Width="25">
    <GridViewColumn.CellTemplate>
        <DataTemplate>
            <Image Source="/Assets/red-circle.png" HorizontalAlignment="Center" Margin="0" Opacity="{Binding ElementName=dummyImage, Path=Opacity}"/>
        </DataTemplate>
    </GridViewColumn.CellTemplate>
</GridViewColumn>

효과 확인.

위와 같이 모든 램프가 동기화 되어 같이 밝아지고, 같이 어두워 진다.

난 이런 꼼수가 좋더라~