Использование настраиваемого свойства управления в анимации

Question

Как подключить пользовательские свойства управления, которые анимируются внутри шаблона управления?

Я создаю пользовательскую кнопку с несколькими состояниями, и я хочу анимировать цвет текста кнопки при изменении состояния. Обычно текст серый, и на MouseOver он становится черным.

Я создал NormalTextBrush для черного текста, и FadedTextBrush для серого текста:

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

До сих пор, так хорошо. Моя анимация работает без ошибок. Когда мышь переходит через кнопку, текст переходит от серого к черному. Но то, что я действительно хочу сделать, это позволить разработчику, использующему элемент управления, указать цвет текста.

Итак, я переопределяю обе текстовые кисти как привязки к свойству переднего плана элемента управления. FadeTextBrush использует конвертер значений для изменения цвета переднего плана. Пересмотренные ресурсы выглядят следующим образом:

<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 не разрешает привязки к анимации внутри шаблонов управления. Он выдает исключение с сообщением «Невозможно заморозить это дерево временной таблицы раскадровки для использования по потокам». Проблема документирована here.

И это подводит меня к моему вопросу: Как настроить ресурсы кисти, чтобы они были подключены к свойству Foreground, но чтобы я мог использовать их с анимациями в моем шаблоне управления?

Любой, кто может ответить на этот вопрос, я куплю вам пиво в следующий раз, когда увижу вас! Спасибо за вашу помощь.

Answer 1

Вам необходимо сделать доступными инструменты. Я бы предложил два текстовых блока, которые занимают одно и то же пространство экрана, а затем манипулируют непрозрачностью каждого в раскадровке. Вот как наложение двух текстовых блоков, где верхний прозрачный в состоянии по умолчанию:

<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> 

Затем установите визуальное состояние группы с визуальным государственным менеджером, чтобы обменять их непрозрачности:

<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> 

или вы можете использовать свои собственные раскадровки. Дело в том, что мы теперь манипулируем постоянными значениями с помощью раскадровки, и все же вы можете установить передний план текстового блока каждого состояния с помощью любого выбранного вами метода.