Wie animiere ich Strichzeichnungen auf einer C#-WPF-Leinwand mithilfe von Code?

Animierte Linien auf einer Leinwand in C# erstellen

In diesem Artikel erfahren Sie, wie Sie eine Animation einer nach und nach gezogenen Linie erstellen eine Leinwand in einem C#/WPF-Projekt mithilfe von Code statt XAML.

Implementierung

Die Implementierung beinhaltet die Verwendung eines Canvas innerhalb einer ListBox, um die Zeilen zu erstellen. Jede Linie wird durch ein LineViewModel dargestellt, das Eigenschaften für Koordinaten, Farben, Dicke und Deckkraft enthält.

Ein Timer wird verwendet, um die Linienkoordinaten im Laufe der Zeit zu aktualisieren und die Bewegung der Linie über die Leinwand zu animieren. Die AnimationSpeed-Eigenschaft steuert die Geschwindigkeit der Animation.

XAML-Code

Das XAML für die ListBox und ihre Elementvorlage sieht wie folgt aus:

<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

Die LineViewModel-Klasse ist für die Verwaltung der Eigenschaften und Animationen der einzelnen Klassen verantwortlich line:

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

Verwendung

Um die Animation zu verwenden, können Sie LineViewModel-Objekte zum DataContext der ListBox hinzufügen. Die Animate-Eigenschaft kann verwendet werden, um die Animation zu starten oder zu stoppen.

Fazit

Mit den oben beschriebenen Techniken können Sie animierte Linien auf einer Leinwand in einem C#/ erstellen. WPF-Projekt ohne Rückgriff auf XAML. Der timerbasierte Ansatz bietet eine einfache und flexible Möglichkeit, die Geschwindigkeit und das Verhalten der Animation zu steuern.

Das obige ist der detaillierte Inhalt vonWie animiere ich Strichzeichnungen auf einer C#-WPF-Leinwand mithilfe von Code?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!