1

我正在使用 MVVM，绑定到ObservableCollection<Shape>(DrawingInstructions) 并希望Line为添加的形状设置动画。

各条线应以DoubleAnimation某种方式从 (X1,Y1) 到 (X2,Y2) 绘制。

我已经尝试过以下变体，但它不起作用。

<ItemsControl ItemsSource="{Binding Path=DrawingInstructions}">
<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate >
        <Canvas>
            :
        </Canvas>
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Triggers>
    <EventTrigger RoutedEvent="Binding.TargetUpdated">
        <BeginStoryboard>
            <Storyboard >
                <DoubleAnimation Duration="0:0:2" Storyboard.TargetName="CurrentLine" Storyboard.TargetProperty="Position" From="{Binding Path=X1}" To="{Binding Path=X2}"/>
                <DoubleAnimation Duration="0:0:2" Storyboard.TargetName="CurrentLine" Storyboard.TargetProperty="Position" From="{Binding Path=Y1}" To="{Binding Path=Y2}"/>
            </Storyboard>
        </BeginStoryboard>                  
    </EventTrigger>
</ItemsControl.Triggers>

Viewmodel 包含命名要添加到绘图指令的 Line 的代码。

var line = new Line
{
    X1 = currentSituation.Position.X,
    Y1 = currentSituation.Position.Y,
    X2 = newSituation.Position.X,
    Y2 = newSituation.Position.Y,
    Name = "CurrentLine",
    Stroke = brush,
    StrokeThickness = 2
};
drawingInstructions.Add(line);

更新：

@Nico 建议的解决方案有效——引入一个“模型”类，表示一个with Line、X1、X2和properties 。数据绑定到使用动画中的各个属性：Y1Y2TimeOffsetObservableCollection<MyModelClass>

<ItemsControl.ItemTemplate>
    <DataTemplate>
        <Line Name="CurrentLine" X1="{Binding X1}" Y1="{Binding Y1}" X2="{Binding X1}" Y2="{Binding Y1}" Stroke="Black" StrokeThickness="2">
            <Line.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard>
                        <Storyboard >
                            <DoubleAnimation Storyboard.TargetName="CurrentLine" Storyboard.TargetProperty="X2" BeginTime="{Binding Path=TimeOffset}" From="{Binding Path=X1}" To="{Binding Path=X2}"/>
                            <DoubleAnimation Storyboard.TargetName="CurrentLine" Storyboard.TargetProperty="Y2" BeginTime="{Binding Path=TimeOffset}" From="{Binding Path=Y1}" To="{Binding Path=Y2}"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Line.Triggers>
        </Line>
    </DataTemplate>
</ItemsControl.ItemTemplate>
4

1 回答 1

1

首先，您不能将 ItemsControl 绑定到 Lines 集合并将它们显示为线条。相反，您应该创建一个具有必要属性的模型类。否则你会得到一个 WPF 错误。我使用这些类进行测试：

public class VM
{
    public ObservableCollection<DrawingInstruction> DrawingInstructions { get; set; }
}

public class DrawingInstruction
{
    public double X1 { get; set; }
    public double X2 { get; set; }
    public double Y1 { get; set; }
    public double Y2 { get; set; }
}

然后，如前所述，您应该在动画中定位 X2 和 Y2 属性。这是对我有用的 XAML：

<ItemsControl ItemsSource="{Binding DrawingInstructions}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate >
            <Canvas/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Line Name="CurrentLine" X1="{Binding X1}" Y1="{Binding Y1}" Stroke="Black" StrokeThickness="2">
                <Line.Triggers>
                    <EventTrigger RoutedEvent="Loaded">
                        <BeginStoryboard>
                            <Storyboard >
                                <DoubleAnimation Duration="0:0:2" Storyboard.TargetName="CurrentLine" Storyboard.TargetProperty="X2" From="{Binding Path=X1}" To="{Binding Path=X2}"/>
                                <DoubleAnimation Duration="0:0:2" Storyboard.TargetName="CurrentLine" Storyboard.TargetProperty="Y2" From="{Binding Path=Y1}" To="{Binding Path=Y2}"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Line.Triggers>
            </Line>
        </DataTemplate>
    </ItemsControl.ItemTemplate>            
</ItemsControl>

加载控件后动画立即开始。我希望那是你的意图。因为每个项目都有自己的动画，所以您应该将动画添加到 ItemTemplate。

于 2013-02-06T21:05:39.460 回答