How to customize the waiting shimmer on AIAssistView

[Mike Rowley]

I am trying to customize the color and style of the shimmer that appears when the AI Assist View is waiting for a response.  Here is a screen capture of what I am seeing.  How can I customize the shimmer?

[Sowntharya Jayamoorthy]

Hi Mike Rowley,

To customize the color of the shimmer, please refer to the following code snippet:
UG Link: https://help.syncfusion.com/maui/themes/keys#sfshimmer

Code snippet:

<Application xmlns:syncTheme="clr-namespace:Syncfusion.Maui.Themes;assembly=Syncfusion.Maui.Core"

             ...>

 <Application.Resources>

    <ResourceDictionary>

        <ResourceDictionary.MergedDictionaries>

            <syncTheme:SyncfusionThemeResourceDictionary />

            <ResourceDictionary>

                <x:String x:Key="SfShimmerTheme">CommonTheme</x:String>

                <Color x:Key="SfShimmerFillColor">Pink</Color>

                <Color x:Key="SfShimmerWaveColor">Purple</Color>

            </ResourceDictionary>

        </ResourceDictionary.MergedDictionaries>

    </ResourceDictionary>

 </Application.Resources>

 

....

 

</Application>

 

"Reg Shimmer Style customization"
We are currently working on adding template support to customize the default appearance of shimmer. This feature will be available in our 2025 Vol 1 release which is scheduled to be rolled out in March 2025. We will keep you updated and inform you as soon as the 2025 Vol 1 release is available.

Regards,
Sowntharya J.

[Mike Rowley]

Excellent, that was exactly what I was looking for, thank you.

May I suggest, in the customization section of every control, for example in this link for the Shimmer control https://help.syncfusion.com/maui/shimmer/customization you should consider putting this link in there to expose this information better to developers.
https://help.syncfusion.com/maui/themes/keys

Just a thought. 

Thanks for the assistance! 🙏

[Sowntharya Jayamoorthy]

Hi Mike Rowley,

Thank you for your valuable suggestion! We will consider adding the themes key link to the customization section for better visibility. If you need any further assistance or encounter additional issues, please feel free to reach out.

Regards,

Sowntharya J.

[Sowntharya Jayamoorthy]

Hi Mike Rowley,

We are glad to announce that our Essential Studio® 2025 Volume 1 Main Release V29.1.33 is rolled out with the feature “Shimmer customization in SfAssistView” and is available for download under the following link.

Essential Studio® 2025 Volume 1 Main Release v29.1.33 is available for download | Announcements Forums | Syncfusion®

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

Attached sample for your reference with Shimmer customization code.

Code snippet:

<ContentPage.Resources>

<Style TargetType="aiAssist:ResponseLoaderView">

    <Setter Property="ControlTemplate">

        <Setter.Value>

            <ControlTemplate>

                <Grid HeightRequest="32"

                          ColumnDefinitions="Auto, *"

                          HorizontalOptions="Start"

                          VerticalOptions="Center">

                    <Border HeightRequest="32"

                                WidthRequest="32"

                                BackgroundColor="LightGray">

                        <Border.StrokeShape>

                            <RoundRectangle CornerRadius="16" />

                        </Border.StrokeShape>

                        <Label Text="&#xE7E1;"

                                   FontFamily="MauiSampleFontIcon"

                                   FontSize="16"

                                   TextColor="Black"

                                   HorizontalOptions="Center"

                                   VerticalOptions="Center" />

                    </Border>

                    <HorizontalStackLayout Padding="16,0,0,0"

                                               Spacing="4"

                                               Grid.Column="1">

                        <Ellipse x:Name="dot1" HeightRequest="10" WidthRequest="10"/>

                            <Ellipse x:Name="dot2" HeightRequest="10" WidthRequest="10"/>

                            <Ellipse x:Name="dot3" HeightRequest="10" WidthRequest="10"/>

                            <Ellipse x:Name="dot4" HeightRequest="10" WidthRequest="10"/>

                            <HorizontalStackLayout.Behaviors>

                                <local:DotAnimationBehavior />

                            </HorizontalStackLayout.Behaviors>

                        </HorizontalStackLayout>

                </Grid>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>

</ContentPage.Resources>

Regards,

Sowntharya J.

Attachment: AssistViewSample_6062a66f.zip

[Michael Brown]

This was very helpful adding in the custom control template for shimmer.  Thank you.

[Muthukumar Madasamy]

Hi Michael Brown,

You're most welcome! We're glad to hear that the shimmer customization using the custom control template was helpful for you.

If you need any assistance or have further suggestions, feel free to reach out anytime.

Best Regards,

Muthu Kumar M.