Задумчивая Авалония
В AvaloniaUI, как и в любом другом качественном инструменте куча возможностей. Но к сожалению, в отличие от веба для нее не сделали (пока что) в большом количестве различные анимации загрузок и прочих специфических штук.
В данной статье я хочу еще немного познакомить вас со стилизацией Авалонии, с ее анимациями и показать на примере, как можно сделать простенькое окно загрузки.
Вот несколько примеров:
Мы же с вами посмотрим на самую простую анимацию которая многим знакома:
Для того, чтобы сделать похожую анимацию, создадим mvvm проект Авалонии из шаблона и добавим в него директорию Controls, в которую сложим необходимые файлы.
Добавим в решение 2 файла:
В cs файле просто создадим класс, который унаследуем от ContentControl, и более ничего добавлять в него не будем, ведь вся магия будет твориться только из xaml.
public class LoadRound:ContentControl
{
}
Для начала создадим шаблон нашей будущей анимации:
Здесь мы указали, что будущее оформление будет связано с вышесозданным классом.
Теперь заполним шаблон. Для этого нам потребуется 8 черных кругов, размешенных по кругу на холсте.
Так мы получим некую статическую картинку
Далее, чтобы сымитировать движение, будем изменять прозрачность кругов.
Для этого укажем еще один стиль.
Внутри стиля мы указали только анимации, насколько должен быть данный круг прозрачен в определенный % применения анимации. В свойстве Duration мы указали длительность всей анимации, а в свойстве IterationCount — количество повторений.
И получим вот такое мигание. А применив данную анимацию (со сдвигом времени) ко всем кругам получим необходимый для нас эффект «движения».
Чтобы использовать наш новый контрол, необходимо добавить его неймспейс в описание главного окна.
xmlns:controls="clr-namespace:Load.Controls"
Добавить контрол на саму страницу
И применить в рамках окна стиль, который добавит визуализации нашего контрола.
Поддержку по c# можно найти здесь, а по авалонии здесь.