В AvaloniaUI, как и в любом другом качественном инструменте куча возможностей. Но к сожалению, в отличие от веба для нее не сделали (пока что) в большом количестве различные анимации загрузок и прочих специфических штук.
В данной статье я хочу еще немного познакомить вас со стилизацией Авалонии, с ее анимациями и показать на примере, как можно сделать простенькое окно загрузки.
![](https://habrastorage.org/r/w1560/webt/kf/zh/ky/kfzhkydwh_vgwtxdupavvrfs7wg.png)
Вот несколько примеров:
![](https://habrastorage.org/webt/vt/zf/em/vtzfem9a-kpxibk1krlj1oti9r4.gif)
Мы же с вами посмотрим на самую простую анимацию которая многим знакома:
![](https://habrastorage.org/webt/5v/t_/9q/5vt_9qm_bymycak0suetn7rlt24.gif)
Для того, чтобы сделать похожую анимацию, создадим mvvm проект Авалонии из шаблона и добавим в него директорию Controls, в которую сложим необходимые файлы.
![](https://habrastorage.org/r/w1560/webt/cf/ef/or/cfeforr2jqmbgaj8wu6nfa-vpnw.png)
Добавим в решение 2 файла:
![](https://habrastorage.org/r/w1560/webt/qx/as/ol/qxasolagwkihvnglvixt15t5owy.png)
В cs файле просто создадим класс, который унаследуем от ContentControl, и более ничего добавлять в него не будем, ведь вся магия будет твориться только из xaml.
Для начала создадим шаблон нашей будущей анимации:
Здесь мы указали, что будущее оформление будет связано с вышесозданным классом.
Теперь заполним шаблон. Для этого нам потребуется 8 черных кругов, размешенных по кругу на холсте.
Так мы получим некую статическую картинку
![](https://habrastorage.org/r/w1560/webt/lc/4d/tu/lc4dtu-jwx6lnnw3i_7zleakjb8.png)
Далее, чтобы сымитировать движение, будем изменять прозрачность кругов.
Для этого укажем еще один стиль.
Внутри стиля мы указали только анимации, насколько должен быть данный круг прозрачен в определенный % применения анимации. В свойстве Duration мы указали длительность всей анимации, а в свойстве IterationCount — количество повторений.
![](https://habrastorage.org/webt/99/ap/hi/99aphi55a9ut4c4ff-rywtbss7g.gif)
И получим вот такое мигание. А применив данную анимацию (со сдвигом времени) ко всем кругам получим необходимый для нас эффект «движения».
Чтобы использовать наш новый контрол, необходимо добавить его неймспейс в описание главного окна.
Добавить контрол на саму страницу
И применить в рамках окна стиль, который добавит визуализации нашего контрола.
Поддержку по c# можно найти здесь, а по авалонии здесь.
В данной статье я хочу еще немного познакомить вас со стилизацией Авалонии, с ее анимациями и показать на примере, как можно сделать простенькое окно загрузки.
![](https://habrastorage.org/webt/kf/zh/ky/kfzhkydwh_vgwtxdupavvrfs7wg.png)
Вот несколько примеров:
![](https://habrastorage.org/webt/vt/zf/em/vtzfem9a-kpxibk1krlj1oti9r4.gif)
Мы же с вами посмотрим на самую простую анимацию которая многим знакома:
![](https://habrastorage.org/webt/5v/t_/9q/5vt_9qm_bymycak0suetn7rlt24.gif)
Для того, чтобы сделать похожую анимацию, создадим mvvm проект Авалонии из шаблона и добавим в него директорию Controls, в которую сложим необходимые файлы.
![](https://habrastorage.org/webt/cf/ef/or/cfeforr2jqmbgaj8wu6nfa-vpnw.png)
Добавим в решение 2 файла:
![](https://habrastorage.org/webt/qx/as/ol/qxasolagwkihvnglvixt15t5owy.png)
В 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>
Так мы получим некую статическую картинку
![](https://habrastorage.org/webt/lc/4d/tu/lc4dtu-jwx6lnnw3i_7zleakjb8.png)
Далее, чтобы сымитировать движение, будем изменять прозрачность кругов.
Для этого укажем еще один стиль.
<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 — количество повторений.
![](https://habrastorage.org/webt/99/ap/hi/99aphi55a9ut4c4ff-rywtbss7g.gif)
И получим вот такое мигание. А применив данную анимацию (со сдвигом времени) ко всем кругам получим необходимый для нас эффект «движения».
Чтобы использовать наш новый контрол, необходимо добавить его неймспейс в описание главного окна.
xmlns:controls="clr-namespace:Load.Controls"
Добавить контрол на саму страницу
<controls:LoadRound />
И применить в рамках окна стиль, который добавит визуализации нашего контрола.
<Window.Styles>
<StyleInclude Source="avares://Load/Controls/LoadRound.xaml" />
</Window.Styles>
Поддержку по c# можно найти здесь, а по авалонии здесь.