내가 현재 개발 및 수정하고 있는 프로젝트인 4Chal에서 랭크 게임 챔피언 정보 컨트롤에 마우스를 올려보면 해당 챔피언의 이미지가 밝아져 선명하게 보이는 효과가 있는데, 이 글에서는 DoubleAnimation을 이용하여 해당 기능을 어떻게 구현하는지에 대하여 쓰는 글이다.

아래 동영상은 최종적으로 완성된 샘플이다.

처음에 이 기능을 구현할때는 WPF에서 이미지 컨트롤에 이펙트를 주어서 변화를 주려고 했으나 머리를 좀 더 굴려보니 훨씬 쉬운 방법이 생각났다.

바로 이미지 컨트롤 위에 검은색의 컨트롤을 덮어씌우고 해당 컨트롤의 Opacity를 적절히 변화 시키는것.

아래와 같은 구조로 작성했다.

<Grid>
        <Border x:Name="borderRoot">
            <Border.Triggers>
                <EventTrigger RoutedEvent="Border.MouseEnter">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="grdCover" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.5" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="Border.MouseLeave">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="grdCover" Storyboard.TargetProperty="Opacity" To="0.5" Duration="0:0:0.5" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Border.Triggers>
            <Grid>
                <Image x:Name="imgBackground" Source="riven.png" />
                <Grid x:Name="grdCover" Background="Black" Opacity="0.5"/>
            </Grid>
        </Border>
    </Grid>

이것이 해당 기능을 구현하는 XAML 코드이다. 상당히 간단함.

여담으로 부드러운 Opacity 변경을 위해서 DoubleAnimation에 From 속성을 쓰지 않았다.

추가적으로 해당 기능을 C# 코드로 작성하는 방법이다.