ColorAnimationExtensionsPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<pages:BasePage 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:pages="clr-namespace:CommunityToolkit.Maui.Sample.Pages"
    xmlns:mct="clr-namespace:CommunityToolkit.Maui.Converters;assembly=CommunityToolkit.Maui"
    x:Class="CommunityToolkit.Maui.Sample.Pages.Extensions.ColorAnimationExtensionsPage"
    xmlns:vm="clr-namespace:CommunityToolkit.Maui.Sample.ViewModels.Converters"
    x:TypeArguments="vm:ColorAnimationExtensionsViewModel"
    x:DataType="vm:ColorAnimationExtensionsViewModel">

    <pages:BasePage.Resources>
        <ResourceDictionary>
            <mct:ColorToColorForTextConverter x:Key="ColorToColorForTextConverter"/>
        </ResourceDictionary>
    </pages:BasePage.Resources>

    <pages:BasePage.Content>
        <ScrollView>
            <VerticalStackLayout Spacing="12">
                <Label Text="The BackgroundColorTo extension method provides an easy way to have an animation to change the BackgroundColor of a VisualElement" />
                <Label x:Name="TextColorToDescriptionLabel" Text="The TextColorTo extension method provides an easy way to have an animation to change the TextColor of an element that implements ITextStyle" />

                <Label Text="Color: " FontSize="12" VerticalOptions="End" VerticalTextAlignment="End"/>
                <Picker x:Name="ColorPicker" />

                <Label Text="Rate (ms):" FontSize="12" VerticalOptions="End" VerticalTextAlignment="End"/>
                <Entry Keyboard="Numeric" x:Name="RateInput" Text="16" />

                <Label Text="Duration (ms):" FontSize="12" VerticalOptions="End" VerticalTextAlignment="End"/>
                <Entry Keyboard="Numeric" x:Name="DurationInput" Text="1500" />

                <Label Text="Easing function: " FontSize="12" VerticalOptions="End" VerticalTextAlignment="End"/>
                <Picker x:Name="EasingPicker" />

                <Button Text="Animate" Clicked="Button_Clicked" BackgroundColor="DarkGreen" />

                <Frame x:Name="ColorFrame"
                       BorderColor="Black"
                       HasShadow="False"
                       BackgroundColor="White">

                    <Label TextColor="{Binding Source={x:Reference ColorFrame}, Path=BackgroundColor, Converter={StaticResource ColorToColorForTextConverter}}"
                            Text="Watch My Background Color Change"
                            HorizontalTextAlignment="Center"
                            VerticalTextAlignment="Center"/>
                </Frame>

            </VerticalStackLayout>
        </ScrollView>   
    </pages:BasePage.Content>
</pages:BasePage>