ControlTemplate Storyboard顏色動畫問題

Question

我有彩色動畫的問題。 這是我的來源：

 <Window.Resources>
    <hedit:BrushToColorConverter x:Key="BrushToColorConverter" />
    <Style x:Key="MyButtonStyle" TargetType="Button">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Margin" Value="5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <ControlTemplate.Resources>
                        <Storyboard x:Key="buttonAnimIn">
                            <!-- Problem line -->
                            <ColorAnimation Storyboard.TargetName="bntBack" Storyboard.TargetProperty="Color" To="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}, Converter={StaticResource BrushToColorConverter}}" />
                        </Storyboard>
                        <Storyboard x:Key="buttonAnimOut">
                            <ColorAnimation Storyboard.TargetName="bntBack" Storyboard.TargetProperty="Color" To="Blue" />
                        </Storyboard>
                        <Storyboard x:Key="buttonAnimForegroundIn">
                            <ColorAnimation Storyboard.TargetName="btnFore" Storyboard.TargetProperty="Color" To="Blue" />
                        </Storyboard>
                        <Storyboard x:Key="buttonAnimForegroundOut">
                            <ColorAnimation Storyboard.TargetName="btnFore" Storyboard.TargetProperty="Color" To="Red" />
                        </Storyboard>
                    </ControlTemplate.Resources>
                    <Border Name="border" 
                        BorderThickness="1"
                        Padding="4,2" 
                        BorderBrush="DarkGray" 
                        CornerRadius="3">
                        <Border.Background>
                            <SolidColorBrush Color="Blue" x:Name="bntBack" />
                        </Border.Background>
                        <ContentControl HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding Content}">
                            <ContentControl.Foreground>
                                <SolidColorBrush Color="Red" x:Name="btnFore" />
                            </ContentControl.Foreground>
                        </ContentControl >
                    </Border>
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="Button.MouseEnter">
                            <BeginStoryboard Storyboard="{StaticResource buttonAnimIn}" />
                            <BeginStoryboard Storyboard="{StaticResource buttonAnimForegroundIn}" />
                        </EventTrigger>
                        <EventTrigger RoutedEvent="Button.MouseLeave">
                            <BeginStoryboard Storyboard="{StaticResource buttonAnimOut}" />
                            <BeginStoryboard Storyboard="{StaticResource buttonAnimForegroundOut}" />
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

問題是：

無法將屬性“Style”中的值轉換為“System.Windows.Style”類型的對象。 無法凍結此Storyboard時間軸樹以跨線程使用。 標記文件'HLSLEditor; component / mainwindow.xaml'中的對象'System.Windows.Controls.Button'出錯。第223行位置25。

使用固定顏色時，它可以工作，但它無法使用父級的前景顏色...

如何對前景或背景顏色進行動畫處理？

謝謝！

Answer 1

你不能凍結Bindings，你可能可以通過將顏色聲明為資源來解決這個問題，然后在動畫中使用StaticResource時將Control的背景綁定到它。

例如

<Window.Background>
    <SolidColorBrush Color="{DynamicResource Background}"/>
</Window.Background>
<Window.Resources>
    <Color x:Key="Background">Green</Color>
</Window.Resources>

<ColorAnimation Storyboard.TargetProperty="Foreground.Color"
                Duration="0:0:1"
                To="{StaticResource Background}"/>

替代使用資源類：

public static class MyColors
{
    public static Color MyHighlightColor = Color.FromArgb(255, 0, 88, 0);
}

<ColorAnimation Storyboard.TargetProperty="Foreground.Color"
                Duration="0:0:1"
                To="{x:Static local:MyColors.MyHighlightColor}"/>

Answer 2

我認為理解錯誤可能會為您提供一種解決問題的方法。

動畫需要使用除UI線程之外的線程。 因此故事板必須是可凍結的，這意味着故事板中的所有動畫必須是可凍結的，並且這些動畫使用的所有內容也必須是可凍結的。

綁定不是freezable - 幾乎是定義，因為它們是一種可以改變依賴屬性的機制。 您不能在顏色動畫中使用動態綁定 - 在動畫運行時，屬性可能會發生變化。 無論您是綁定到對象還是使用DynamicResource都會發生同樣的事情。

問題是，這可以保護你不受任何你真正不想要的東西的影響。 在動畫運行時，您真的不希望顏色發生變化。 那不是你想要完成的。 如果用戶選擇其他外觀，您希望動畫使用的顏色資源發生更改。

因此，不是將故事板綁定到可換膚資源，而是將故事板添加到皮膚更改時設置的資源字典（使用靜態綁定設置顏色），並在事件觸發器中使用動態綁定。 這應該工作。

Answer 3

當我遇到這個問題時，我通過修改我的樣式來處理它，以便在彼此的頂部包含兩個相同的元素 - 一個用於“正常”狀態，一個用於“按下”狀態。 'press'一個默認情況下Opacity設置為0，另一個Opacity為1.我的動畫將不透明度從0更改為1，反之亦然。

這種方法實際上避免了Color屬性的動畫，但在XAML中保留所有內容時產生了相同的效果。 由於顏色是在樣式定義中設置的而不是動畫，因此可以根據需要進行綁定。 這可能不適合所有情況，但對於我相當簡單的風格，它是一種非常快速的方法來達到預期的效果。