🔻 ❤️ 📤 Nachdenklich Avalonia 👩‍✈️ 🔥 ✋🏻

In AvaloniaUI gibt es wie in jedem anderen hochwertigen Tool viele Möglichkeiten. Aber leider wurden im Gegensatz zum Web verschiedene Animationen von Downloads und anderen spezifischen Dingen (vorerst) nicht in großer Zahl dafür gemacht.
In diesem Artikel möchte ich Ihnen das Styling von Avalonia mit seinen Animationen etwas näher erläutern und anhand eines Beispiels zeigen, wie Sie ein einfaches Ladefenster erstellen.

Hier einige Beispiele:

Wir sehen uns die einfachste Animation an, mit der viele Menschen vertraut sind:

Um eine ähnliche Animation zu erstellen, erstellen Sie ein mvvm Avalonia-Projekt aus der Vorlage und fügen Sie das Controls-Verzeichnis hinzu, in das wir die erforderlichen Dateien einfügen.

Wir fügen der Lösung zwei Dateien hinzu:

In der cs-Datei erstellen wir einfach eine Klasse, die wir von ContentControl erben, und wir fügen nichts anderes hinzu, da die gesamte Magie nur von xaml erstellt wird.

    public class LoadRound:ContentControl
    {
        
  }

Erstellen Sie zunächst eine Vorlage für unsere zukünftige Animation:

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:cc="clr-namespace:Load.Controls">
    <Style Selector="cc|LoadRound">
  </Style>
</Styles>

Hier haben wir angegeben, dass das zukünftige Design mit der obigen Klasse verbunden sein wird.
Füllen Sie nun die Vorlage aus. Dazu benötigen wir 8 schwarze Kreise, die in einem Kreis auf der Leinwand platziert sind.

<Style Selector="cc|LoadRound">
        <Setter Property="Template">
            <ControlTemplate>
                <Grid ClipToBounds="True">

                    <ContentPresenter Name="Content"
                                      Content="{TemplateBinding Content}"
                                      ContentTemplate="{TemplateBinding ContentTemplate}" />
                    <Canvas Width="160" Height="160" 
                            IsHitTestVisible="False">
                        <Ellipse Width="40" Height="40" Classes="ellipse pos_el_8" Canvas.Left="60" Canvas.Top="20"
                                 Fill="Black" />
                        <Ellipse Width="40" Height="40" Classes="ellipse pos_el_7" Canvas.Left="100" Canvas.Top="40"
                                 Fill="Black" />
                        <Ellipse Width="40" Height="40" Classes="ellipse pos_el_6" Canvas.Left="120" Canvas.Top="80"
                                 Fill="Black" />
                        <Ellipse Width="40" Height="40" Classes="ellipse pos_el_5" Canvas.Left="100" Canvas.Top="120"
                                 Fill="Black" />
                        <Ellipse Width="40" Height="40" Classes="ellipse pos_el_4" Canvas.Left="60" Canvas.Top="140"
                                 Fill="Black" />
                        <Ellipse Width="40" Height="40" Classes="ellipse pos_el_3" Canvas.Left="20" Canvas.Top="120"
                                 Fill="Black" />
                        <Ellipse Width="40" Height="40" Classes="ellipse pos_el_2" Canvas.Left="0" Canvas.Top="80"
                                 Fill="Black" />
                        <Ellipse Width="40" Height="40"  Classes="ellipse pos_el_1" Canvas.Left="20" Canvas.Top="40"
                                 Fill="Black" />
                    </Canvas>
                </Grid>
            </ControlTemplate>
        </Setter>
    </Style>

Wir erhalten also eine Art statisches Bild. Um

die Bewegung zu simulieren, ändern wir als nächstes die Transparenz der Kreise.
Dazu geben wir einen weiteren Stil an.

<Style Selector="Ellipse.pos_el_1">
        <Style.Animations>
            <Animation Duration="0:0:0.5" IterationCount="INFINITE">
                <KeyFrame Cue="0%">
                    <Setter Property="Opacity" Value="0.17" />
                </KeyFrame>
                <KeyFrame Cue="14%">
                    <Setter Property="Opacity" Value="0.34" />
                </KeyFrame>
                <KeyFrame Cue="28%">
                    <Setter Property="Opacity" Value="0.50" />
                </KeyFrame>
                <KeyFrame Cue="42%">
                    <Setter Property="Opacity" Value="0.67" />
                </KeyFrame>
                <KeyFrame Cue="56%">
                    <Setter Property="Opacity" Value="0.84" />
                </KeyFrame>
                <KeyFrame Cue="70%">
                    <Setter Property="Opacity" Value="1" />
                </KeyFrame>
                <KeyFrame Cue="84%">
                    <Setter Property="Opacity" Value="0" />
                </KeyFrame>
                <KeyFrame Cue="100%">
                    <Setter Property="Opacity" Value="0.07" />
                </KeyFrame>
            </Animation>
        </Style.Animations>
    </Style>

Innerhalb des Stils haben wir nur Animationen angegeben, wie transparent dieser Kreis in einem bestimmten Prozentsatz der Animationsanwendung sein sollte. In der Duration-Eigenschaft haben wir die Dauer der gesamten Animation und in der IterationCount-Eigenschaft die Anzahl der Wiederholungen angegeben.

Und wir bekommen so einen Augenblick. Wenn wir diese Animation (mit einer Zeitverschiebung) auf alle Kreise anwenden, erhalten wir den für uns notwendigen Effekt der "Bewegung".

Um unser neues Steuerelement verwenden zu können, müssen Sie seinen Namespace zur Beschreibung des Hauptfensters hinzufügen.

xmlns:controls="clr-namespace:Load.Controls"

Fügen Sie der Seite selbst die Kontrolle hinzu

<controls:LoadRound />

Wenden Sie innerhalb des Fensters einen Stil an, der unserer Steuerung eine Visualisierung hinzufügt.

    <Window.Styles>
        <StyleInclude Source="avares://Load/Controls/LoadRound.xaml" />
    </Window.Styles>

Unterstützung für c # finden Sie hier und für Avalonia hier .

Nachdenklich Avalonia

More articles: