1

（DrawingInstructions）にバインドしているMVVMを使用していて、追加されているシェイプObservableCollection<Shape>をアニメーション化したいと思います。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>

ビューモデルには、描画命令に追加される線に名前を付けるコードが含まれています。

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によって提案された解決策は機能します- 、、、、およびプロパティをLine持つをX1表す「モデル」クラスを導入します。データは、アニメーションの個々のプロパティを使用してバインドされます。X2Y1Y2TimeOffsetObservableCollection<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 を Line のコレクションにバインドして、それらを線として表示することはできません。代わりに、必要なプロパティを持つモデル クラスを作成する必要があります。そうしないと、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 に答える