WPF DoubleAnimation Duration Binding

🖥️ UI/UX 프로그래밍 Q&A WPF Q&A
1

안녕하세요.

Button 내에 Rectangle을 넣어서 애니메이션을 만들고 있습니다.
Button이 클릭 되면, VM의 특정 값의 bool 값이 바꾸고 bool 값이 True이면 애니메이션이 실행되는 구조입니다.

여기서 애니메이션의 Duration을 VM의 값을 Binding해서 사용하고 싶은데, Binding을 하게 되면 아래와 같은 에러를 표출합니다.

“InvalidOperationException: 스레드에서 사용하기 위해 이 Storyboard 시간 표시 막대 트리를 고정할 수 없습니다.”

DoubleAnimation의 Duration에는 Binding을 할 수 없는 건 지 궁금합니다.
아니면 다른 방법이 있는 지 궁금합니다.

Duration에 넣는 값은 TimeSpan 값 입니다.

<Rectangle.Style>
    <Style TargetType="Rectangle">
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsPlaying}" Value="True">
                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetProperty="Width"
                                To="26"
                                Duration="{Binding EventTime}" />
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
                <DataTrigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetProperty="Width"
                                To="0"
                                Duration="0:0:0" />
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.ExitActions>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</Rectangle.Style>
4개의 좋아요
2

아래 글을 참고 하시겠어요?

6개의 좋아요
3

아주 예전에 제가 겪었던 처리방법도 공유해드립니다.

https://arong.info/List/ContentsView/69

7개의 좋아요
4

@eklimshines 저도 Youtube 영상을 만들 때 DoubleAnimation을 많이 사용했었는데 저도 동일한 문제를 겪었습니다. 그래서 @dimohy @aroooong 두분 말씀해주신 방법처럼 해결했던 기억이 있네요. :smile:

4개의 좋아요
5

우아 직접 만드신 사이트이신가요? :+1:
가입했습니다~

3개의 좋아요
6

엇, 그냥 인터넷상 자료 스크래핑 해서 기록할 용도와(출처 페이지 밝히고)
개인적으로 자료 기록 용도로 만든거라., 블로그라고 보긴 어렵고

제 블로그는 https://blog.arong.info 입니다.

4개의 좋아요
7

다들 답변 주셔서 감사합니다.
@dimohy @aroooong 님의 게시물을 보고 방법을 생각해내서 수정했습니다.
사실 코드적으로 애니메이션을 만들기 싫어서 안했는데, 그냥 동적으로 만들어지도록 코드를 작성하였습니다.

질문 올릴 때, 빠진 부분이 ItemsControl를 통해서 버튼이 여러 개를 만들어지고 각각의 버튼에 이벤트 시간을 다르게 주고 싶은 의도가 있었습니다.

그래서 버튼이 누를 때, Rectangle의 Visibility가 바뀌도록 되어 있어서, 이를 이용해서 Event되도록 하였습니다.

그리고 Rectangle의 Tag에 Duration 값을 Binding해서 하도록 했습니다.

private void myRectangle_IsVisibleChanged(object sender, DependencyPropertyChangedEventArgs e)
        {
            if (e.NewValue is bool visible == true)
            {
                if (sender is Rectangle r)
                {
                    _begin.Duration = TimeSpan.FromMilliseconds(Double.Parse(r.Tag.ToString()));

                    Storyboard.SetTargetProperty(_begin, new PropertyPath(Rectangle.WidthProperty));

                    _playEventStoryBoard = new Storyboard();
                    _playEventStoryBoard.Children.Add(_begin);
                    _playEventStoryBoard.Begin(r);
                }
            }
        }
3개의 좋아요
8

오홋… 잘 해결 하셨네요. 나중에 샘플도 한번 올려봐 주시면 엄청 좋을 것 같아요~!!

2개의 좋아요