inquiry about shimmer effect in uwp app

Question

I am developing a UWP application and would like to inquire whether there are any built-in controls or effects in UWP (or any associated libraries) that can be used directly to implement shimmer effect in my app.

Answer 1

Hello @Deepak Patel ,

Welcome to Microsoft Q&A!

It is recommended to use Windows.UI.Composition APIs to implement shimmer effect. You can refer to the following code.

<Grid Background="Black">
    <Viewbox Stretch="Uniform" StretchDirection="DownOnly" Margin="20, 0, 20, 0">
        <TextBlock Name="txtBlock" FontSize="100" Foreground="DimGray" FontFamily="SegoeUI" FontWeight="Thin" 
               TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center"> 
        Text Shimmer
        </TextBlock>
    </Viewbox>
</Grid>

private void MainPage_Loaded(object sender, RoutedEventArgs e)
 {
     //get interop compositor
     var _compositor = ElementCompositionPreview.GetElementVisual(txtBlock).Compositor;
     //get interop visual for XAML TextBlock
     var text = ElementCompositionPreview.GetElementVisual(txtBlock);
     var _pointLight = _compositor.CreatePointLight();
     _pointLight.Color = Colors.White;
     _pointLight.CoordinateSpace = text; //set up co-ordinate space for offset
     _pointLight.Targets.Add(text); //target XAML TextBlock
     //starts out to the left; vertically centered; light's z-offset is related to fontsize
     _pointLight.Offset = new Vector3(-(float)txtBlock.ActualWidth, (float)txtBlock.ActualHeight / 2, (float)txtBlock.FontSize);
     //simple offset.X animation that runs forever
     var animation = _compositor.CreateScalarKeyFrameAnimation();
     animation.InsertKeyFrame(1, 2 * (float)txtBlock.ActualWidth);
     animation.Duration = TimeSpan.FromSeconds(3.3f);
     animation.IterationBehavior = AnimationIterationBehavior.Forever;
     _pointLight.StartAnimation("Offset.X", animation);
 }

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.