Show image above SMFPlayer issue

Question

An image (Image class) is placed above a SMFPlayer (both elements are created in code-behind). Z-index of the image is the Z-Index of SMFPlayer + 1. The image is resized (adjusting the width) according to the playing progress of SMFPlayer.

    videoPlayer = new SMFPlayer();
    videoPlayer.Width = 1920;
    videoPlayer.Height = 1080;
    videoPlayer.Margin = new Thickness(1920, 0, 0, 0);
    PlaylistItem item = new PlaylistItem();
    Random r = new Random();
    item.MediaSource = new Uri("video.wmv");
    item.DeliveryMethod = DeliveryMethods.ProgressiveDownload;
    videoPlayer.Playlist.Add(item);
    videoPlayer.AutoPlay = true;
    videoPlayer.AutoLoad = true;
    videoPlayer.IsControlStripVisible = false;
    videoPlayer.PlaylistVisibility = FeatureVisibility.Disabled;
    videoPlayer.MediaEnded += new EventHandler(player_MediaEnded);
    LayoutRoot.Children.Add(videoPlayer);

            bar_yellow3 = new Image();
            bar_yellow3.Source = new BitmapImage(new Uri("/SMF_ProgressiveDownload1;component/assets/bar_y.png", UriKind.Relative));
            bar_yellow3.Width = 775;
            bar_yellow3.Height = 34;
            bar_yellow3.Margin = new Thickness(2948,1034,0,0);
            bar_yellow3.Stretch = Stretch.Fill;
            bar_yellow3.VerticalAlignment = VerticalAlignment.Top;
            bar_yellow3.HorizontalAlignment = HorizontalAlignment.Left;
            LayoutRoot.Children.Add(bar_yellow3);

However, when the playing progress is less than 20%, the image blinks randomly. When the SMFPlayer is set to be invisible ( Visibility.Collapsed ) , the image is normal.

I have tried to call the update function of the Image, which is: bar_yellow3.UpdateLayout(); but the method does not solve the blinking issue.

Any solution?

Answer 1

Try use effects (Shazzam will help you) instead using Z order.