أفالونيا متأمل

في AvaloniaUI ، كما هو الحال في أي أداة أخرى عالية الجودة ، هناك الكثير من الفرص. ولكن للأسف ، على عكس الويب ، لم يتم تنفيذ الرسوم المتحركة المختلفة للتنزيلات وأشياء محددة أخرى (في الوقت الحالي) بأعداد كبيرة لذلك.
في هذه المقالة ، أود أن أقدم لك أكثر قليلاً من تصميم أفالونيا ، مع رسومها المتحركة وأظهر مع مثال كيفية إنشاء نافذة تمهيد بسيطة.


فيما يلي بعض الأمثلة:


سنلقي نظرة على أبسط الرسوم المتحركة التي يعرفها الكثير من الناس: من


أجل إنشاء رسوم متحركة مماثلة ، قم بإنشاء مشروع mvvm Avalonia من النموذج وإضافة دليل عناصر التحكم إليه ، والذي سنضيف إليه الملفات الضرورية.


أضف ملفين إلى الحل:

في ملف cs ، قم فقط بإنشاء فئة سوف نرثها من ContentControl ، ولن نضيف أي شيء آخر إليها ، لأن كل السحر سيتم فقط من xaml.
    public class LoadRound:ContentControl
    {
        
  }


أولاً ، أنشئ نموذجًا للرسوم المتحركة المستقبلية:
<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>

هنا أشرنا إلى أن التصميم المستقبلي سيرتبط بالفئة المذكورة أعلاه.
الآن املأ النموذج. للقيام بذلك ، نحتاج إلى 8 دوائر سوداء ، موضوعة في دائرة على القماش.
<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>

لذا نحصل على صورة ثابتة نوعًا ما


، وبعد ذلك ، لمحاكاة الحركة ، سنغير شفافية الدوائر.
لهذا ، نشير إلى نمط واحد آخر.
<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>


داخل النمط ، أشرنا إلى الرسوم المتحركة فقط إلى مدى شفافية هذه الدائرة في نسبة معينة من تطبيق الرسوم المتحركة. في خاصية Duration ، حددنا مدة الرسم المتحرك بالكامل ، وفي خاصية IterationCount ، عدد التكرارات.


ونحصل على مثل هذه الومضة. وبتطبيق هذه الرسوم المتحركة (مع تغيير الوقت) على جميع الدوائر نحصل على تأثير "الحركة" اللازمة لنا.

لاستخدام عنصر التحكم الجديد الخاص بنا ، تحتاج إلى إضافة مساحة الاسم الخاصة به إلى وصف النافذة الرئيسية.
xmlns:controls="clr-namespace:Load.Controls"

إضافة عنصر تحكم إلى الصفحة نفسها
<controls:LoadRound />

وتطبيق نمط داخل النافذة يضيف التصور إلى سيطرتنا.
    <Window.Styles>
        <StyleInclude Source="avares://Load/Controls/LoadRound.xaml" />
    </Window.Styles>


يمكن العثور على دعم لـ c # هنا ، ولأفالونيا هنا .

All Articles