1

私は WPF が初めてで、Rectangle のサイズと位置の変更をアニメーション化しようとしています。四角形を INotifyPropertyChanged プロパティにバインドして設定します。これは問題なく機能しますが、変更が極端になる可能性があるため、視覚的に不快にならないようにしたいと考えています。

これはうまくいきます：

<Rectangle Fill="{x:Static SystemColors.ControlBrush}" 
        Stroke="black">
<Rectangle.Style>
    <Style TargetType="{x:Type Rectangle}">
        <Setter Property="Canvas.Left" Value="{Binding Path=Coil.Left, Mode=OneWay}"/>
        <Setter Property="Canvas.Top" Value="{Binding Path=Coil.Top, Mode=OneWay}"/>
        <Setter Property="Width" Value="{Binding Path=Coil.Width, Mode=OneWay}"/>
        <Setter Property="Height" Value="{Binding Path=Coil.Height, Mode=OneWay}"/>
    </Style>
</Rectangle.Style>

Coil.Left は、INotifyPropertyChanged オブジェクト内の RectangleF 構造であり、長方形を含むキャンバスの DataContext プロパティは、オブジェクトの作成後にコード ビハインドで設定されています。

EventTrigger を使用してこれをうまくアニメーション化することもできました。

<Rectangle Fill="{x:Static SystemColors.ControlBrush}" 
        Stroke="black">
<Rectangle.Style>
    <Style TargetType="{x:Type Rectangle}">
        <Setter Property="Canvas.Left" Value="{Binding Path=Coil.Left, Mode=OneTime}"/>
        <Setter Property="Canvas.Top" Value="{Binding Path=Coil.Top, Mode=OneTime}"/>
        <Setter Property="Width" Value="{Binding Path=Coil.Width, Mode=OneTime}"/>
        <Setter Property="Height" Value="{Binding Path=Coil.Height, Mode=OneTime}"/>
    </Style>
</Rectangle.Style>
<Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseEnter">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Width" 
                                        To="{Binding Path=Coil.Width, Mode=OneWay}"
                                        Duration="0:0:5"/>
                    <DoubleAnimation Storyboard.TargetProperty="Height" 
                                        To="{Binding Path=Coil.Height, Mode=OneWay}"
                                        Duration="0:0:0.5"/>
                    <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" 
                                        To="{Binding Path=Coil.Left, Mode=OneWay}"
                                        Duration="0:0:5"/>
                    <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" 
                                        To="{Binding Path=Coil.Top, Mode=OneWay}"
                                        Duration="0:0:5"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</Rectangle.Triggers>

Rectangle の上にマウスを移動すると、アニメーションによって、Coil.Left、Top、Width、および Height の現在のプロパティ値に期待どおりに変化します。

ただし、私が達成したいのは、Coil プロパティ値の変更をアニメーション化することです。したがって、私の計画は、DataTrigger を設定し、コンバーターを使用して常に true を返すことで、変更がアニメーションを介して再生されるようにすることでした。

しかし、私が何をしても、DataTrigger を使用するとウィンドウが開く前に例外エラーが発生し、なぜこれが起こっているのかわかりません。簡単にするために、コンバーターを取り出して、単純な値を使用しました。

<Rectangle Fill="{x:Static SystemColors.ControlBrush}" 
        Stroke="black">
<Rectangle.Style>
    <Style TargetType="{x:Type Rectangle}">
        <Setter Property="Canvas.Left" Value="{Binding Path=Coil.Left, Mode=OneTime}"/>
        <Setter Property="Canvas.Top" Value="{Binding Path=Coil.Top, Mode=OneTime}"/>
        <Setter Property="Width" Value="{Binding Path=Coil.Width, Mode=OneTime}"/>
        <Setter Property="Height" Value="{Binding Path=Coil.Height, Mode=OneTime}"/>
    </Style>
</Rectangle.Style>
<Rectangle.Triggers>
    <DataTrigger Binding="{Binding Path=Coil.Height}" Value="60">
        <DataTrigger.EnterActions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Width" 
                                        To="{Binding Path=Coil.Width, Mode=OneWay}"
                                        Duration="0:0:5"/>
                    <DoubleAnimation Storyboard.TargetProperty="Height" 
                                        To="{Binding Path=Coil.Height, Mode=OneWay}"
                                        Duration="0:0:0.5"/>
                    <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" 
                                        To="{Binding Path=Coil.Left, Mode=OneWay}"
                                        Duration="0:0:5"/>
                    <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" 
                                        To="{Binding Path=Coil.Top, Mode=OneWay}"
                                        Duration="0:0:5"/>
                </Storyboard>
            </BeginStoryboard>
        </DataTrigger.EnterActions>
    </DataTrigger>
</Rectangle.Triggers>

なぜこれで例外エラーが発生するのかについて何か考えはありますか? それは私のWPFの経験不足の問題だと確信しています。これは私の最初のプロジェクトです。

前もって感謝します。

--ジョン

4

2 に答える 2

0

FrameworkElementlike aにRectangleは のみを使用できますEventTrigger。ではStyle、/ControlTemplateと/もDataTemplate使用できます。TriggerMultiTriggerDataTriggerMultiDataTrigger

これは、スタイルに移行することを意味し、動作するはずですDataTrigger:Rectangle

<Rectangle Fill="{x:Static SystemColors.ControlBrush}" Stroke="Black">
    <Rectangle.Style>
        <Style TargetType="{x:Type Rectangle}">
            ... 
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=Coil.Height}" Value="60">
                    ...
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Rectangle.Style>
</Rectangle>
于 2012-05-17T22:03:43.107 に答える