コードを使用して C# WPF キャンバス上の線画をアニメーション化する方法

C# でキャンバスにアニメーションの線を作成する

この記事では、徐々に横に描かれる線のアニメーションを作成する方法を検討します。ではなくコードを使用した C#/WPF プロジェクトのキャンバスXAML.

実装

実装では、ListBox 内で Canvas を使用して線を作成します。各線は、座標、色、太さ、不透明度のプロパティを含む LineViewModel によって表されます。

タイマーを使用して時間の経過とともに線の座標を更新し、キャンバス上の線の動きをアニメーション化します。 AnimationSpeed プロパティは、アニメーションの速度を制御します。

XAML コード

ListBox とその項目テンプレートの XAML は次のようになります:

<listbox itemssource="{Binding}" x:name="lst" height="500" width="500">
    <listbox.itemspanel>
        <itemspaneltemplate>
            <canvas isitemshost="True"></canvas>
        </itemspaneltemplate>
    </listbox.itemspanel>
    <listbox.itemcontainerstyle>
        <style targettype="ListBoxItem">
            <Setter Property="FocusVisualStyle">
                <Setter.Value>
                    <Style TargetType="Control">
                        <Setter Property="Opacity" Value="0"/>
                    </style>
                
            
            <setter property="Template">
                <setter.value>
                    <controltemplate targettype="ListBoxItem">
                        <line x1="{Binding X1}" y1="{Binding Y1}" x2="{Binding X2}" y2="{Binding Y2}" strokethickness="{Binding Thickness}" opacity="{Binding Opacity}" x:name="Line">
                            <line.stroke>
                                <lineargradientbrush startpoint="0,0" endpoint="1,1">
                                    <gradientstop color="{Binding Color1}" offset="0"></gradientstop>
                                    <gradientstop color="{Binding Color2}" offset="1"></gradientstop>
                                </lineargradientbrush>
                            </line.stroke>
                        </line>
                        <controltemplate.triggers>
                            <trigger property="IsSelected" value="true">
                                <setter property="Effect" targetname="Line">
                                    <setter.value>
                                        <dropshadoweffect color="CornflowerBlue" shadowdepth="3" blurradius="10"></dropshadoweffect>
                                    </setter.value>
                                </setter>
                            </trigger>
                        </controltemplate.triggers>
                    </controltemplate>
                </setter.value>
            </setter>
        
    </listbox.itemcontainerstyle>
</listbox>

ViewModel

LineViewModelクラスは、各行のプロパティとアニメーションを管理します。

public class LineViewModel : INotifyPropertyChanged
{
    // ...properties and animation implementation...
}

Usage

アニメーションを使用するには、LineViewModel オブジェクトをリストボックス。 Animate プロパティは、アニメーションを開始または停止するために使用できます。

結論

上記の手法を使用すると、C#/ のキャンバス上にアニメーション化された線を作成できます。 XAML に頼らない WPF プロジェクト。タイマーベースのアプローチにより、アニメーションの速度と動作を制御するためのシンプルかつ柔軟な方法が提供されます。

以上がコードを使用して C# WPF キャンバス上の線画をアニメーション化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。