WPF数据触发器和故事板

Question

我试图在ViewModel/Presentation Model忙时触发进度动画.我有一个IsBusy属性,ViewModel被设置为UserControl的DataContext.当IsBusy属性为true时,触发"progressAnimation"故事板的最佳方法是什么？Blend只让med在UserControl级别添加Event-Triggers,我只能在我的数据模板中创建属性触发器.

"progressAnimation"被定义为用户控件中的资源.

我尝试在UserControl上添加DataTriggers作为样式,但是当我尝试启动StoryBoard时,我收到以下错误:

'System.Windows.Style' value cannot be assigned to property 'Style' 
of object'Colorful.Control.SearchPanel'. A Storyboard tree in a Style 
cannot specify a TargetName. Remove TargetName 'progressWheel'.

ProgressWheel是我试图设置动画的对象的名称,因此删除目标名称显然不是我想要的.

我希望使用数据绑定技术在XAML中解决这个问题,而不必通过代码公开事件和启动/停止动画.

Answer 1

你想要的是通过在progressWheel上声明动画来实现的:XAML:

<UserControl x:Class="TriggerSpike.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="300">
<UserControl.Resources>
    <DoubleAnimation x:Key="SearchAnimation" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:4"/>
    <DoubleAnimation x:Key="StopSearchAnimation" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:4"/>
</UserControl.Resources>
<StackPanel>
    <TextBlock Name="progressWheel" TextAlignment="Center" Opacity="0">
        <TextBlock.Style>
            <Style>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsBusy}" Value="True">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <StaticResource ResourceKey="SearchAnimation"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                        <DataTrigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                   <StaticResource ResourceKey="StopSearchAnimation"/> 
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.ExitActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </TextBlock.Style>
        Searching
    </TextBlock>
    <Label Content="Here your search query"/>
    <TextBox Text="{Binding SearchClause}"/>
    <Button Click="Button_Click">Search!</Button>
    <TextBlock Text="{Binding Result}"/>
</StackPanel>

代码背后:

    using System.Windows;
using System.Windows.Controls;

namespace TriggerSpike
{
    public partial class UserControl1 : UserControl
    {
        private MyViewModel myModel;

        public UserControl1()
        {
            myModel=new MyViewModel();
            DataContext = myModel;
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            myModel.Search(myModel.SearchClause);
        }
    }
}

视图模型:

    using System.ComponentModel;
using System.Threading;
using System.Windows;

namespace TriggerSpike
{
    class MyViewModel:DependencyObject
    {

        public string SearchClause{ get;set;}

        public bool IsBusy
        {
            get { return (bool)GetValue(IsBusyProperty); }
            set { SetValue(IsBusyProperty, value); }
        }

        public static readonly DependencyProperty IsBusyProperty =
            DependencyProperty.Register("IsBusy", typeof(bool), typeof(MyViewModel), new UIPropertyMetadata(false));



        public string Result
        {
            get { return (string)GetValue(ResultProperty); }
            set { SetValue(ResultProperty, value); }
        }

        public static readonly DependencyProperty ResultProperty =
            DependencyProperty.Register("Result", typeof(string), typeof(MyViewModel), new UIPropertyMetadata(string.Empty));

        public void Search(string search_clause)
        {
            Result = string.Empty;
            SearchClause = search_clause;
            var worker = new BackgroundWorker();
            worker.DoWork += worker_DoWork;
            worker.RunWorkerCompleted += worker_RunWorkerCompleted;
            IsBusy = true;
            worker.RunWorkerAsync();
        }

        void worker_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)
        {
            IsBusy=false;
            Result = "Sorry, no results found for: " + SearchClause;
        }

        void worker_DoWork(object sender, DoWorkEventArgs e)
        {
            Thread.Sleep(5000);
        }
    }
}

希望这可以帮助!

Answer 2

虽然建议将动画直接附加到要动画的元素的答案在简单的情况下解决了这个问题,但是当你有一个需要定位多个元素的复杂动画时,这并不是真的可行.(当然,您可以将动画附加到每个元素,但管理起来非常糟糕.)

因此,有一种替代方法可以解决这个问题,让您使用a DataTrigger来运行以命名元素为目标的动画.

在WPF中有三个可以附加触发器的位置:元素,样式和模板.但是,前两个选项在这里不起作用.第一个被排除,因为WPF不支持DataTrigger直接在元素上使用.(就我所知,这没有特别好的理由.据我所知,当我多年前向WPF团队的人询问此事时,他们说他们本来希望支持它,但没有有时间让它工作.)并且样式已经出局,因为正如您报告的错误消息所示,您无法在与样式关联的动画中定位命名元素.

这样就离开了模板.您可以使用控件或数据模板.

<ContentControl>
    <ContentControl.Template>
        <ControlTemplate TargetType="ContentControl">
            <ControlTemplate.Resources>
                <Storyboard x:Key="myAnimation">

                    <!-- Your animation goes here... -->

                </Storyboard>
            </ControlTemplate.Resources>
            <ControlTemplate.Triggers>
                <DataTrigger
                    Binding="{Binding MyProperty}"
                    Value="DesiredValue">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard
                            x:Name="beginAnimation"
                            Storyboard="{StaticResource myAnimation}" />
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <StopStoryboard
                            BeginStoryboardName="beginAnimation" />
                    </DataTrigger.ExitActions>
                </DataTrigger>
            </ControlTemplate.Triggers>

            <!-- Content to be animated goes here -->

        </ControlTemplate>
    </ContentControl.Template>
<ContentControl>

通过这种结构,WPF很高兴让动画引用模板中的命名元素.(我已经将动画和模板内容都留空了 - 显然你会用实际的动画和内容填充它.)

这在模板中工作但不是样式的原因是,当您应用模板时,它定义的命名元素将始终存在,因此在该模板范围内定义的动画可以安全地引用这些元素.风格通常不是这种情况,因为样式可以应用于多个不同的元素,每个元素可能具有完全不同的可视树.(有点令人沮丧的是,即使在可以确定所需元素存在的场景中它也会阻止你这样做,但也许有一些东西使得动画很难被绑定到右边的命名元素我知道在WPF中有很多优化可以使样式元素有效地重用,所以其中一个可能是难以支持的.)