AnimatedIconPage.xaml

<Page
    x:Class="WinUIGallery.ControlPages.AnimatedIconPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
    xmlns:local="using:WinUIGallery"
    xmlns:pages="using:WinUIGallery.ControlPages"
    mc:Ignorable="d">
    <StackPanel>
       <local:ControlExample x:Name="AnimatedIconExample1" HeaderText="Adding AnimatedIcon to a button"
            XamlSource="Icons/AnimatedIconSample1_xaml.txt" CSharpSource="Icons/AnimatedIconSample1_cs.txt">
            <local:ControlExample.Example>
                <StackPanel>
                    <TextBlock TextWrapping="WrapWholeWords">
                        The following example is a button that the user clicks to load a search experience. The AnimatedIcon consumes the animation created using 
                        Adobe AfterEffects and translated into Microsoft.UI.Composition objects using 
                        <Hyperlink NavigateUri="https://aka.ms/lottie">
                           Lottie-Windows
                        </Hyperlink>.
                        For guidance on how to properly structure your animation file see the AnimatedIcon Guidance page.<LineBreak></LineBreak>
                    </TextBlock>
                    <Button PointerEntered="Button_PointerEntered" PointerExited="Button_PointerExited" Width="75" AutomationProperties.Name="AnimatedIcon Example">
                        <AnimatedIcon x:Name="SearchAnimatedIcon" Source="{x:Bind pages:AnimatedIconPage.GetAnimationSourceFromString(AnimatedVisualSourceSelection.SelectedItem), Mode=OneWay}">
                            <AnimatedIcon.FallbackIconSource>
                                <SymbolIconSource Symbol="Find"/>
                            </AnimatedIcon.FallbackIconSource>
                        </AnimatedIcon>
                    </Button>
                </StackPanel>
            </local:ControlExample.Example>
            <local:ControlExample.Options>
                <ComboBox x:Name="AnimatedVisualSourceSelection" Header="Kind" SelectedIndex="4" VerticalAlignment="Center" MinWidth="340">
                    <x:String>AnimatedBackVisualSource</x:String>
                    <x:String>AnimatedChevronDownSmallVisualSource</x:String>
                    <x:String>AnimatedChevronRightDownSmallVisualSource</x:String>
                    <x:String>AnimatedChevronUpDownSmallVisualSource</x:String>
                    <x:String>AnimatedFindVisualSource</x:String>
                    <x:String>AnimatedGlobalNavigationButtonVisualSource</x:String>
                    <x:String>AnimatedSettingsVisualSource</x:String>
                </ComboBox>
            </local:ControlExample.Options>
            <local:ControlExample.Substitutions>
                <local:ControlExampleSubstitution Key="AnimatedVisualSourceKind" Value="{x:Bind AnimatedVisualSourceSelection.SelectedItem, Mode=OneWay}"/>
            </local:ControlExample.Substitutions>
        </local:ControlExample>
        <local:ControlExample x:Name="AnimatedIconExample2" HeaderText="Adding AnimatedIcon to a NavigationView" XamlSource="Icons/AnimatedIconSample2_xaml.txt">
            <local:ControlExample.Example>
                <StackPanel>
                    <TextBlock TextWrapping="WrapWholeWords">
                        If you set an AnimatedIcon as the value of the Icon property, the NavigationViewItem will set the states of the AnimatedIcon for you, according to the states of the control. For guidance on how to properly structure your animation file see the AnimatedIcon Guidance page. <LineBreak></LineBreak><LineBreak></LineBreak>For this example, this sets a custom animation GameSettingsIcon that was generated by the LottieGen tool.<LineBreak></LineBreak><LineBreak></LineBreak>
                    </TextBlock>
                    <NavigationView IsSettingsVisible="False">
                        <NavigationView.MenuItems>
                            <NavigationViewItem Content = "Game Settings">
                                <NavigationViewItem.Icon>
                                    <AnimatedIcon x:Name='GameSettingsIcon'>
                                        <AnimatedIcon.Source>
                                            <animatedvisuals:AnimatedSettingsVisualSource/>
                                        </AnimatedIcon.Source>
                                        <AnimatedIcon.FallbackIconSource>
                                            <FontIconSource Glyph="&#xE713;"/>
                                        </AnimatedIcon.FallbackIconSource>
                                    </AnimatedIcon>
                                </NavigationViewItem.Icon>
                            </NavigationViewItem>
                        </NavigationView.MenuItems>
                    </NavigationView>
                </StackPanel>
            </local:ControlExample.Example>
        </local:ControlExample>
    </StackPanel>
</Page>