inquiry about shimmer effect in uwp app

Deepak Patel 20 Reputation points
2024-09-27T05:58:18.2233333+00:00

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.

Universal Windows Platform (UWP)
0 comments No comments
{count} votes

Accepted answer
  1. Junjie Zhu - MSFT 17,636 Reputation points Microsoft Vendor
    2024-09-27T06:55:55.7566667+00:00

    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.


0 additional answers

Sort by: Most helpful

Your answer

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