Share via

create a Microsoft Store-style carousel

Mahdi Hosseini 250 Reputation points
2025-11-20T09:15:45.9466667+00:00

Hello, I want to create a Microsoft Store-style carousel. The main issue is how to change the images. I’ve managed to add a slide effect to image transitions to some extent, but there are two major problems. First, it’s not as smooth and appealing as the Store. Second, the text in my sample feels stiff and lifeless, whereas in the Store it seems to have animations.

<local:StoreCarousel x:Name="myCarousel"

                     Title="Microsoft"

                     AutoShuffle="False"

                     Description="Apps to power of your work"

                     PipsPagerVisibility="VisibleByHover"

                     SlideDirection="Auto" />

      myCarousel.SetImages(new[]

{

    "ms-appx:///Assets/1.png",

    "ms-appx:///Assets/2.png",

    "ms-appx:///Assets/3.png",

});

this is my source code:

StoreCarousel.txt

StoreCarousel_Xaml.txt

Windows development | WinUI
Answer recommended by moderator
  1. Raymond Huynh (WICLOUD CORPORATION) 3,955 Reputation points Microsoft External Staff Moderator
    2025-11-21T09:48:46.06+00:00

    Hello Mahdi Hosseini,

    Thank you for reaching out, and I appreciate you sharing your progress so far. I understand how challenging it can be to recreate that polished Microsoft Store carousel experience, the smooth transitions and animated text really do set a high bar.

    I've done some research to help you with this, and here's what I found:

    The Microsoft Store team has mentioned that they've open-sourced several of their UI components through the Windows Community Toolkit Labs. You might find helpful resources here: https://github.com/CommunityToolkit/Labs-Windows

    The key to achieving those smooth, buttery transitions lies in using the Visual Layer with implicit animations, which run at 60 frames per second in a separate composition thread. This is likely what gives the Store its fluid feel compared to standard property changes.

    For your specific issues:

    For smooth image transitions: Consider using implicit animations with transition properties like OpacityTransition or TranslationTransition. These automatically interpolate between old and new values, creating much smoother effects than manual animations.

    For the text animations: The Community Toolkit offers Implicit.ShowAnimations and Implicit.HideAnimations attached properties that let you define composition animations directly in XAML. Combining opacity and translation animations should help make your text feel more dynamic.

    I'd also recommend checking out the WinUI 3 Gallery app (available on the Microsoft Store) for examples of connected animations, implicit animations, and effect animations. These examples can serve as great references for your implementation.

    Hope this helps, and best of luck with your project!

    Edit:
    Thanks to Mahdi Hosseini for solving this issue and sharing the solution with us. If anyone has the same issue, please visit the code sample
    https://github.com/ghost1372/DevWinUI/tree/main/dev/DevWinUI.Controls/Controls/Composition/StoreCarousel

    1 person found this answer helpful.

0 additional answers

Sort by: Most helpful
Most helpful Newest Oldest

Your answer

Answers can be marked as 'Accepted' by the question author and 'Recommended' by moderators, which helps users know the answer solved the author's problem.