Задумчивая Авалония

В AvaloniaUI, как и в любом другом качественном инструменте куча возможностей. Но к сожалению, в отличие от веба для нее не сделали (пока что) в большом количестве различные анимации загрузок и прочих специфических штук.
В данной статье я хочу еще немного познакомить вас со стилизацией Авалонии, с ее анимациями и показать на примере, как можно сделать простенькое окно загрузки.
kfzhkydwh_vgwtxdupavvrfs7wg.png
Вот несколько примеров:
vtzfem9a-kpxibk1krlj1oti9r4.gif

Мы же с вами посмотрим на самую простую анимацию которая многим знакома:
5vt_9qm_bymycak0suetn7rlt24.gif

Для того, чтобы сделать похожую анимацию, создадим mvvm проект Авалонии из шаблона и добавим в него директорию Controls, в которую сложим необходимые файлы.
cfeforr2jqmbgaj8wu6nfa-vpnw.png

Добавим в решение 2 файла:
qxasolagwkihvnglvixt15t5owy.png
В cs файле просто создадим класс, который унаследуем от ContentControl, и более ничего добавлять в него не будем, ведь вся магия будет твориться только из xaml.

    public class LoadRound:ContentControl
    {
        
  }

Для начала создадим шаблон нашей будущей анимации:


    


Здесь мы указали, что будущее оформление будет связано с вышесозданным классом.
Теперь заполним шаблон. Для этого нам потребуется 8 черных кругов, размешенных по кругу на холсте.


Так мы получим некую статическую картинку
lc4dtu-jwx6lnnw3i_7zleakjb8.png

Далее, чтобы сымитировать движение, будем изменять прозрачность кругов.
Для этого укажем еще один стиль.

Внутри стиля мы указали только анимации, насколько должен быть данный круг прозрачен в определенный % применения анимации. В свойстве Duration мы указали длительность всей анимации, а в свойстве IterationCount — количество повторений.

99aphi55a9ut4c4ff-rywtbss7g.gif
И получим вот такое мигание. А применив данную анимацию (со сдвигом времени) ко всем кругам получим необходимый для нас эффект «движения».

Чтобы использовать наш новый контрол, необходимо добавить его неймспейс в описание главного окна.

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


Добавить контрол на саму страницу


И применить в рамках окна стиль, который добавит визуализации нашего контрола.

    
        
    

Поддержку по c# можно найти здесь, а по авалонии здесь.

© Habrahabr.ru