애니메이션에서 사용자 지정 컨트롤 속성 사용

Question

컨트롤 템플릿 내에서 애니메이션을 적용 할 사용자 지정 컨트롤 속성을 어떻게 연결합니까?

여러 상태로 사용자 지정 단추를 만들고 있는데 상태가 변경 될 때 단추 텍스트의 색을 애니메이션으로 지정하려고합니다. 일반적으로 텍스트는 회색이며 MouseOver에서 검정색으로 바뀝니다.

나는 회색 텍스트 검정 텍스트에 대한 NormalTextBrush 및 FadedTextBrush을 만들어 :

<SolidColorBrush x:Key="NormalTextBrush" Color="Black" /> 
<SolidColorBrush x:Key="FadedTextBrush" Color="DarkSlateGray" /> 

지금까지 너무 좋아. 내 애니메이션이 오류없이 실행됩니다. 마우스가 버튼 위로 이동하면 텍스트가 회색에서 검은 색으로 바뀝니다. 하지만 내가 정말로하고 싶은 것은 컨트롤을 사용하는 개발자가 텍스트 색상을 지정하게하는 것입니다.

그래서 두 텍스트 브러시를 컨트롤의 Foreground 속성에 대한 바인딩으로 다시 정의합니다. FadedTextBrush는 값 변환기를 사용하여 전경색을 페이드합니다. 재정의 된 리소스는 다음과 같습니다.

<SolidColorBrush x:Key="NormalTextBrush" Color="{Binding Path=Foreground, RelativeSource={RelativeSource TemplatedParent}}" /> 
<SolidColorBrush x:Key="FadedTextBrush" Color="{Binding Path=Foreground, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource ColorConverter}, ConverterParameter='1.2'}" /> 

그리고 여기서 문제가 발생합니다. WPF는 컨트롤 템플릿 안의 애니메이션 바인딩을 허용하지 않습니다. "스레드간에 사용할 수 있도록이 Storyboard 타임 라인 트리를 고정 할 수 없습니다."라는 메시지와 함께 예외가 발생합니다. 문제는 here에 설명되어 있습니다.

그리고 그것은 내 질문에 가져온다 : 전경 속성에 유선 있도록 내 브러시 리소스를 설정하려면 어떻게해야합니까? 그래도 내 제어 템플릿에있는 애니메이션과 함께 사용할 수 있도록하려면 어떻게해야합니까?

누구나이 사람에게 대답 할 수있는 사람은 다음에 내가 당신을 볼 때 맥주를 사줄 것입니다! 당신의 도움을 주셔서 감사합니다.

Answer 1

사용 가능한 도구로 수행해야합니다. 동일한 스크린 공간을 차지하는 두 개의 텍스트 블록을 제안한 다음 스토리 보드에서 각각의 불투명도를 조작하십시오.

<VisualStateGroup x:Name="CommonStates"> 
    <VisualStateGroup.Transitions> 
     <VisualTransition GeneratedDuration="0:0:0.5"/> 
    </VisualStateGroup.Transitions> 
    <VisualState x:Name="Normal"/> 
    <VisualState x:Name="MouseOver"> 
     <Storyboard> 
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="textBlock1"> 
       <EasingDoubleKeyFrame KeyTime="0" Value="0"/> 
      </DoubleAnimationUsingKeyFrames> 
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="textBlock2"> 
       <EasingDoubleKeyFrame KeyTime="0" Value="1"/> 
      </DoubleAnimationUsingKeyFrames> 
     </Storyboard> 
    </VisualState> 
    <VisualState x:Name="Pressed"/> 
    <VisualState x:Name="Disabled"/> 
</VisualStateGroup> 

:

<Grid> 
    <TextBlock x:Name="textBlock1" Foreground="Black" 
     Margin="{TemplateBinding Padding}" 
     VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
     HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
     SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
     Text="{TemplateBinding Content}"/> 
    <TextBlock x:Name="textBlock2" Foreground="Gray" 
     Margin="{TemplateBinding Padding}" 
     VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
     HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
     SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
     Text="{TemplateBinding Content}" Opacity="0"/> 
</Grid> 

가 그런 시각적 상태 매니저와 시각적 상태 그룹을 설정

자신의 불투명도를 교환 : 여기 상단 하나는 기본 상태에서 투명 곳에 두 개의 텍스트 블록을 중첩하는 방법입니다 또는 자신의 스토리 보드를 사용할 수 있습니다. 핵심은 스토리 보드로 상수 값을 조작하고 있지만 선택한 모든 방법을 사용하여 각 상태의 텍스트 블록의 전경을 설정할 수 있다는 것입니다.