Search code examples
wpfxamlfont-awesome

WPF Icon to spin

based on this answer i have two questions:

  1. Whats the name of the marked icon?

enter image description here

  1. How can I make it to raotate to the other direction, i.e to spin like:

enter image description here

Itried to add FlowDirection="RightToLeft" like: 

<fa:ImageAwesome FlowDirection="RightToLeft" SpinDuration="6" Icon="Cog" Width="200" Height="200" Foreground="White" Spin="True" />

but it still rotate to same direction

Solution

  • this should do the trick for you. You can modify the <Paths/> properties to tweak it to your requirements. With the StrokeThickness property you can modify the thickness. And with the Data property you can modify the shape of the icon.

    enter image description here

    <Grid Background="White">
    <Viewbox Height="30" Width="30" Stretch="Fill">
        <Path Stretch="Fill" Stroke="Black" StrokeThickness="8" Fill="Transparent" Data="M 50,10 A 40,40 0 1 1 90.45,29.55" RenderTransformOrigin="0.5,0.5">
            <Path.RenderTransform>
                <RotateTransform/>
            </Path.RenderTransform>
            <Path.Style>
                <Style>
                    <Style.Triggers>
                        <Trigger Property="Image.IsEnabled" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Angle" From="0" To="360" Duration="0:0:1"        RepeatBehavior="Forever" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Path.Style>
        </Path>
    </Viewbox>
</Grid>

    Other icons can be created with tools like Inkscape or retrieved from the material design website and be extracted from .svg files when viewed in a text editor.

    If you prefer to use images over paths, you can replace the <Path/> with an <Image/>, but keep in mind that paths are always rendered pixel-perfect while bitmap iamges migh result in artifacts.

    Paths are also less ressource intensive than images.