CODEWITHSUNDEEP
c#xamlanimationwindows-10win-universal-app
Jan Chalupa
Jan Chalupa

Reputation: 897

UWP (XAML & C#): Animated CommandBar icon

How is it possible to make CommandBar icon animated like in Photos app during syncing photo collection with OneDrive? Should I use a GIF image or there is some better way to do that?

Upvotes: 3

Views: 1564

Answers (1)

Alamakanambra
Alamakanambra

Reputation: 7851

It is easy with Storyboard defined in xaml:

 <Page.Resources>
    <Storyboard x:Name="IconRotation" AutoReverse="False" RepeatBehavior="Forever">
        <DoubleAnimation Duration="0:0:1" To="360" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="symbolIcon" />
   </Storyboard>
 </Page.Resources>

SymbolIcon, AppBarButton and CommandBar:

<CommandBar>
  <AppBarButton>
    <AppBarButton.Icon>
     <SymbolIcon x:Name="symbolIcon"  Symbol="Sync" RenderTransformOrigin="0.5,0.5" >
       <SymbolIcon.RenderTransform>
          <CompositeTransform/>
       </SymbolIcon.RenderTransform>
      </SymbolIcon>
     </AppBarButton.Icon>
    </AppBarButton>
  </CommandBar>

Run it and stop it in cs file:

IconRotation.Begin();
IconRotation.Stop();

To change speed of rotation, change Duration property on storyboard and you should be able to reach exactly same animation like in Photo app.

Upvotes: 9

Related Questions