Question

我想创建一个可以淡入淡出的动画控件，由bool值触发。为此，我制作了一个自定义控件＆＃39; FadeHeaderControl＆＃39;：

public class FadeHeaderControl : ContentControl
{
    public static readonly DependencyProperty IsAnimatedProperty = DependencyProperty.Register(
            "IsAnimated", typeof (bool), typeof (FadeHeaderControl), new FrameworkPropertyMetadata(default(bool)));

    public bool IsAnimated
    {
         get { return (bool) GetValue(IsAnimatedProperty); }
         set { SetValue(IsAnimatedProperty, value); }
    }

    static FadeHeaderControl()
    {
         DefaultStyleKeyProperty.OverrideMetadata(typeof(FadeHeaderControl), new FrameworkPropertyMetadata(typeof(FadeHeaderControl)));
    }
}

当IsAnimated Dependency属性设置为true（通过Binding）时，标题应该滑入（用户通知某些内容已更改）

我的MainWindow.xaml在这里：

<Window.DataContext>
    <wpfApplication1:MainWindowViewModel/>
</Window.DataContext>
<StackPanel>
    <wpfApplication1:FadeHeaderControl x:Name="Myrect" VerticalAlignment="Top" IsAnimated="{Binding AnimationStarts}">
        <Grid Background="Chartreuse" Width="Auto">
            <Button Margin="10" HorizontalAlignment="Right">Button</Button>
        </Grid>
    </wpfApplication1:FadeHeaderControl> 

    <Button Margin ="50"  Command="{Binding TriggerAnimationCommand}">Change visibility</Button>
</StackPanel>

和viewmodel：

public class MainWindowViewModel : ViewModelBase
{
    private bool _animationStarts;

    public bool AnimationStarts
    {
        get { return _animationStarts; }
        set
        {
            _animationStarts = value;
            RaisePropertyChanged(() => AnimationStarts);
        }
    }

    public ICommand TriggerAnimationCommand
    {
        get { return new RelayCommand(TriggerAnimation); }
    }

    private void TriggerAnimation()
    {
        AnimationStarts = !AnimationStarts;
    }
}

问题出现在Style for FadeHeaderControl中：

<ResourceDictionary>    
    <Storyboard x:Key="HeaderFadeInAnimation">
        <DoubleAnimation
            Storyboard.TargetProperty="Height" 
            From="0" 
            To="{Binding RelativeSource={RelativeSource AncestorType={x:Type wpfApplication1:FadeHeaderControl}}, Path=ActualHeight}" 
            Duration="0:0:0.5" 
            BeginTime="0:0:0" 
            />
    </Storyboard>

    <Storyboard x:Key="HeaderFadeOutAnimation">
        <DoubleAnimation
            Storyboard.TargetProperty="Height" 
            From="{Binding RelativeSource={RelativeSource AncestorType={x:Type wpfApplication1:FadeHeaderControl}}, Path=ActualHeight}" 
            To="0" 
            Duration="0:0:0.5" 
            BeginTime="0:0:0" 
            />
    </Storyboard>

    <Style TargetType="{x:Type wpfApplication1:FadeHeaderControl}" x:Shared="False">
        <Setter Property="IsAnimated" Value="False"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type wpfApplication1:FadeHeaderControl}">
                    <ContentPresenter x:Name="ContentPresenter" ContentSource="Content"></ContentPresenter>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsAnimated" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource HeaderFadeInAnimation}"/>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard Storyboard="{StaticResource HeaderFadeOutAnimation}"/>
                            </Trigger.ExitActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

如何绑定＆＃39; To＆＃39;或者＆＃39;来自＆＃39;双动画的值与此样式中FadeHeaderControl的实际高度 - 或者由于故事板架构而无法实现。如果我将值设置为静态数字，一切都会像预期的那样工作。

我应该用EventTrigger替换Trigger并在我的FadeHeaderControl中创建RoutedEvent吗？

关心并感谢您的帮助。

wpf storyboard内部风格的双动画

0 个答案: