WPF에서 TextBox.Foreground에 애니메이션 적용

Question

TextBox.ForegroundProperty을 애니메이트 할 수 있습니까?

<Color x:Key="NormalColor">#FF666666</Color> 
<SolidColorBrush x:Key="NormalBrush" Color="{StaticResource NormalColor}" /> 

<Color x:Key="MouseOverColor">#FF666666</Color> 
<SolidColorBrush x:Key="MouseOverBrush" Color="{StaticResource MouseOverColor}" /> 

<ControlTemplate x:Key="RegularTextBoxTemplate" TargetType="{x:Type TextBox}"> 
    <Grid> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="CommonStates"> 
       <VisualStateGroup.Transitions> 
        <VisualTransition GeneratedDuration="0:0:0.1"/> 
       </VisualStateGroup.Transitions> 
       <VisualState x:Name="Normal"/> 
       <VisualState x:Name="MouseOver"> 
        <Storyboard> 
         <!-- storyboard to animating foreground here... --> 
        </Storyboard> 
       </VisualState> 
      </VisualStateGroup > 
     </VisualStateManager> 
     <ScrollViewer x:Name="PART_ContentHost" 
         BorderThickness="0" 
         IsTabStop="False" 
         Background="{x:Null}"/> 
    </Grid> 
</ControlTemplate> 

<Style x:Key="RegularTextBox" TargetType="{x:Type TextBox}"> 
    <Setter Property="Foreground" Value="{StaticResource NormalBrush}"/> 
    <Setter Property="Template" Value="{StaticResource RegularTextBoxTemplate}"/> 
</Style> 

내 시도 스토리 보드는 다음과 같습니다 그들의

<ColorAnimationUsingKeyFrames Storyboard.TargetName="PART_ContentHost" 
        Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"> 
    <EasingColorKeyFrame KeyTime="0" Value="{StaticResource MouseOverColor}" /> 
</ColorAnimationUsingKeyFrames> 

<ColorAnimationUsingKeyFrames Storyboard.TargetName="PART_ContentHost" 
       Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"> 
    <EasingColorKeyFrame KeyTime="0" Value="{StaticResource MouseOverColor}" /> 
</ColorAnimationUsingKeyFrames> 

<ColorAnimationUsingKeyFrames Storyboard.TargetName="PART_ContentHost" 
      Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)"> 
    <EasingColorKeyFrame KeyTime="0" Value="{StaticResource MouseOverColor}" /> 
</ColorAnimationUsingKeyFrames> 

<ColorAnimationUsingKeyFrames 
        Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"> 
    <EasingColorKeyFrame KeyTime="0" Value="{StaticResource MouseOverColor}" /> 
</ColorAnimationUsingKeyFrames> 

<ColorAnimationUsingKeyFrames 
       Storyboard.TargetProperty="(TextBox.Foreground).(SolidColorBrush.Color)"> 
    <EasingColorKeyFrame KeyTime="0" Value="{StaticResource MouseOverColor}" /> 
</ColorAnimationUsingKeyFrames> 

<ColorAnimationUsingKeyFrames 
       Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"> 
    <EasingColorKeyFrame KeyTime="0" Value="{StaticResource MouseOverColor}" /> 
</ColorAnimationUsingKeyFrames> 

<ColorAnimationUsingKeyFrames 
      Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)"> 
    <EasingColorKeyFrame KeyTime="0" Value="{StaticResource MouseOverColor}" /> 
</ColorAnimationUsingKeyFrames> 

없음이 작동하지 않습니다. 어떤 생각? 심지어 가능할까요?

Answer 1

글쎄, 나를 도우 려던 모든 사람 덕분에 내 대답을 발견했다. 리소스에 TextBox.Foreground 속성을 설정하면 스토리 보드에서 애니메이션을 만들 수없는 것 같습니다. 스타일은 다음과 같아야합니다.

<Style x:Key="RegularTextBox" TargetType="{x:Type TextBox}"> 
    <Setter Property="Foreground"> 
     <Setter.Value> 
      <SolidColorBrush Color="{DynamicResource NormalColor}"/> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="Template" Value="{StaticResource RegularTextBoxTemplate}"/> 
</Style> 

이것은 내가 가진 유일한 문제였습니다. 그러나 기억해야 할 메모가 있습니다. 스토리 보드에서 템플릿 기반 상위를 타겟팅하려면 바인딩 할 필요가 없습니다. 우리는 단지 그것을 떠날 필요가있다 :

<!-- It's not necessary to set Storyboard.TargetName in storyboard --> 
<!-- It will automatically target the TemplatedParent --> 
<ColorAnimationUsingKeyFrames 
       Storyboard.TargetProperty="(TextBox.Foreground).(SolidColorBrush.Color)"> 
    <EasingColorKeyFrame KeyTime="0" Value="{DynamicResource MouseOverColor}" /> 
</ColorAnimationUsingKeyFrames> 

이것은 나를 위해 일한다.

---

Here은 작업 예입니다.

Answer 2

이것은 내가 생각했던 것보다 문제가 많았습니다. 여기 내 원래 대답은 다음과 같습니다.

---

ColorAnimationXXX 클래스가있는 것은 분명합니다.

코드는 here과 매우 유사하며 대신 ColorAnimation을 사용하여 색상을 애니메이션으로 나타냅니다. 이 예제의 속성은 XAML에서 정의되고 애니메이션에서 쉽게 참조 할 수 있도록 이름이 지정된 Brush (TextBox.Foreground와 동일)를 사용합니다.

그래서 귀하의 경우에 관련 코드는 다음과 같습니다

<VisualState Name="..."> 
    <Storyboard> 
     <ColorAnimation To="Green" 
         Storyboard.TargetName="tbBrush" 
         Storyboard.TargetProperty="Color"/> 
    </Storyboard> 
</VisualState> 

과 : 나는 실현 될 때까지 모두가 잘 이론적으로는 작동하지 않았다이었다

---

<TextBox.Foreground> 
    <SolidColorBrush x:Name="tbBrush" Color="#FF666666"/> 
</TextBox.Foreground> 

스타일로. 스타일 내에서 그리드의 Background 속성이 같은 뭔가 쉽게 애니메이션 반면 :

Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)" 

텍스트의 전경에 영향을 미칠 것이다 애니메이션에 속성을 찾기 위해 훨씬 더 어렵다. 처음에는 TextElement.Foreground을 직관적으로 보았습니다. 그리드와 ScrollViewer 레벨에서이 속성을 설정할 수있었습니다. 그 아래에있는 모든 하위 오브젝트에 영향을 줄 것으로 예상되는 모든 레벨의 오브젝트가 포함되어 있습니다. 텍스트 상자의. 필자의 가정은 TextBox 내용이 TextBlock으로 내부적으로 설정된다는 점입니다. TextBlock은 연결된 Foreground 속성의 값을 따릅니다. 내 가정은 틀렸고 PART_ContentHost ScrollViewer의 내용은 TextBox 내의 제어 논리에 의해 최상위 TextBox와 자체 사이의 개체 트리에서 전경 의존성 속성을 따르지 않는 하위 수준 개체로 설정됩니다.

그러면 문제는 스타일을 적용 할 TextBox 스타일 내에서 TextBox의 Foreground 속성을 설정하는 방법입니다. 테스트를 위해 TwoWay TemplatedParent 바인딩을 사용하여이를 설정하려고했습니다. PropertyColor를 SolidColorBrush의 Color로 가져 왔다고 생각합니다. 그러나 Color 속성이 그 시점에서 분명히 변경되지 않았기 때문에 여전히 작동하지 않았습니다. 이 문제는 here에 해당합니다.

실제로 작동하지 않는 것 외에도 Foreground 속성을 내부적으로 설정하는 것이 외부 소비자가 해당 속성의 값을 제어 할 것으로 예상 할 때 올바르게 보이지 않았습니다. 따라서 TextBox의 Foreground가 스타일에서 어떤 것도 따르지 않는다는 점을 감안할 때 TextBox 스타일 내에 중첩 된 TextBox를 사용하면 기능이 가장 잘 구현된다는 결론에 도달했습니다. 바깥 쪽 스타일에는 상태 관리자와 대부분의 레이아웃이 포함되어 있습니다. 그런 다음 내부 TextBox에는 텍스트 비트를 표시하도록 설계된 고유 한 스타일과 컨트롤 템플릿이 있습니다. 외부 스타일은 내부 TextBox의 Foreground 속성을 설정할 수 있으며, 내부 TextBox는 외부 관리자가이 값을 상태 관리자에서 설정할 수 있습니다.

<ControlTemplate x:Key="RegularTextBoxTemplate" TargetType="{x:Type TextBox}"> 
    <Grid> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="CommonStates"> 
       <VisualStateGroup.Transitions> 
        <VisualTransition GeneratedDuration="0:0:0.1"/> 
       </VisualStateGroup.Transitions> 
       <VisualState x:Name="Normal"/> 
       <VisualState x:Name="MouseOver"> 
        <Storyboard> 
         <ColorAnimation To="HotPink" 
          Storyboard.TargetName="InternalTextBox" 
          Storyboard.TargetProperty="(TextBox.Foreground).(SolidColorBrush.Color)"/> 
        </Storyboard> 
       </VisualState> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 
     <TextBox Foreground="Black" Text="{TemplateBinding Text}" x:Name="InternalTextBox"> 
      <TextBox.Style> 
       <Style TargetType="{x:Type TextBox}"> 
        <Setter Property="Template"> 
         <Setter.Value> 
          <ControlTemplate TargetType="{x:Type TextBox}"> 
           <Grid Background="{x:Null}"> 
            <ScrollViewer x:Name="PART_ContentHost" 
             BorderThickness="0" 
             IsTabStop="False" 
             Background="{x:Null}" /> 
           </Grid> 
          </ControlTemplate> 
         </Setter.Value> 
        </Setter> 
       </Style> 
      </TextBox.Style> 
     </TextBox> 
    </Grid> 
</ControlTemplate> 

<Style x:Key="RegularTextBox" TargetType="{x:Type TextBox}"> 
    <Setter Property="Template" Value="{StaticResource RegularTextBoxTemplate}"/> 
</Style> 

나는이 방법에 다른 사람의 의견을 듣고 관심이, 그리고 것 내가 고려하지 않은 그것으로 어떤 문제가 있는지 여부. 문제를 해결하고 결과 애플리케이션을 기습하려는 나의 시도를 토대로, 나는 지금 볼 수있는 가장 간단한 해결책이다.

Answer 3

당신은 TemplatedParent에 Storyboard.Target을 바인딩 할 수 있습니다 : 불행하게도

<ColorAnimationUsingKeyFrames 
     Storyboard.Target="{Binding RelativeSource={RelativeSource TemplatedParent}}" 
     Storyboard.TargetProperty="(TextBox.Foreground).(SolidColorBrush.Color)"> 
    <EasingColorKeyFrame KeyTime="0" Value="{StaticResource MouseOverColor}" /> 
</ColorAnimationUsingKeyFrames> 

, 난 단지 일반 전경 브러시는 스타일 세트 하지 않고, 직접 텍스트 상자 요소를 설정할 때이 작업을 얻을 수 있습니다 :

<TextBox Foreground="{StaticResource NormalBrush}" Style="{StaticResource RegularTextBox}" /> 

그것이 마우스 오버 상태 트리거링 스타일로 설정되어있는 경우는 '애니메이션 없다'(0). (1) '불변 오브젝트 인스턴스. "슬로우 편집 : TextBox 전경을 초기화 한 후 다시 설정하면이 문제가 발생합니다.