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

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


Вот несколько примеров:

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

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

Добавим в решение 2 файла:

В 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# можно найти здесь, а по авалонии здесь.