🔘 🕧 🔮 Avalonia songeur 🚃 🔄 👇🏿

En AvaloniaUI, comme dans tout autre outil de haute qualité, beaucoup d'opportunités. Mais malheureusement, contrairement au web, diverses animations de téléchargements et d'autres choses spécifiques n'ont pas été faites (pour l'instant) en grand nombre pour cela.
Dans cet article, je veux vous présenter un peu plus la stylisation d'Avalonia, avec ses animations et montrer avec un exemple comment faire une simple fenêtre de démarrage.

Voici quelques exemples:

nous allons examiner l'animation la plus simple que beaucoup de gens connaissent:

afin de créer une animation similaire, créez un projet Avalonia mvvm à partir du modèle et ajoutez-y le répertoire Controls, dans lequel nous ajouterons les fichiers nécessaires.

Nous ajoutons 2 fichiers à la solution:

Dans le fichier cs, nous créons simplement une classe que nous hériterons de ContentControl, et nous n'y ajouterons rien d'autre, car toute la magie sera créée uniquement à partir de xaml.

    public class LoadRound:ContentControl
    {
        
  }

Créez d'abord un modèle pour notre future 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>

Ici, nous avons indiqué que la future conception sera associée à la classe ci-dessus.
Remplissez maintenant le modèle. Pour ce faire, nous avons besoin de 8 cercles noirs, placés en cercle sur la toile.

<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>

Nous obtenons donc une sorte d'image statique.

Ensuite, pour simuler le mouvement, nous allons changer la transparence des cercles.
Pour cela, nous indiquons un style de plus.

<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>

À l'intérieur du style, nous n'avons indiqué que les animations de la transparence de ce cercle dans un certain% de l'application d'animation. Dans la propriété Duration, nous avons spécifié la durée de l'animation entière, et dans la propriété IterationCount, le nombre de répétitions.

Et nous obtenons un tel clignotement. Et en appliquant cette animation (avec un décalage temporel) à tous les cercles, nous obtenons l'effet de "mouvement" qui nous est nécessaire.

Pour utiliser notre nouveau contrôle, vous devez ajouter son espace de noms à la description de la fenêtre principale.

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

Ajouter un contrôle à la page elle-même

<controls:LoadRound />

Et appliquez un style dans la fenêtre qui ajoute une visualisation à notre contrôle.

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

Le support pour c # peut être trouvé ici , et pour Avalonia ici .

Avalonia songeur

More articles: