locked
Graphical Glitch in Flipview control RRS feed

  • Question

  • Hi everybody, I'm experiencing a graphical glitch using a flipview inside a Windows phone 8.1 runtime application.

    I managed to replicate the problem in small example.

    Steps to reproduce the problem:

    1) Run the application

    2) Move the flipview on the third element ("c")

    3) Click the reload button. This action will clear the flipview and reload the elements into the flipview

    4) Click on the flipview element without dragging it.

    Performing these steps you'll notice the flipview blinking.

    Here is the code.


    <Page
        x:Class="TestBugFlipView.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:TestBugFlipView"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="250" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <FlipView Background="Red" Grid.Row="0" x:Name="MyFlipview" Height="250" ItemsSource="{Binding}">
                <FlipView.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Margin="0" Padding="15,0,15,0" Width="300" TextTrimming="CharacterEllipsis" Text="{Binding}" TextWrapping="WrapWholeWords" TextAlignment="Center" VerticalAlignment="Center" FontSize="55" />
                    </DataTemplate>
                </FlipView.ItemTemplate>
            </FlipView>
            <StackPanel Grid.Row="1" HorizontalAlignment="Center">
                <Button Content="Reload" Click="On_Button_Click" />
            </StackPanel>
        </Grid>
    </Page>
    


    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Runtime.InteropServices.WindowsRuntime;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    using System.Collections.ObjectModel;
    
    namespace TestBugFlipView
    {
       public sealed partial class MainPage : Page
        {
            ObservableCollection<string> m_Collection;
    
            public MainPage()
            {
                this.InitializeComponent();
                m_Collection = new ObservableCollection<string>();
                LoadElements();
                MyFlipview.DataContext = m_Collection;
            }
    
            public void LoadElements()
            {
                m_Collection.Clear();
                string[] arr = { "a", "b", "c", "d" };
                foreach (string s in arr)
                {
                    m_Collection.Add(s);
                }
            }
    
            private void On_Button_Click(object sender, RoutedEventArgs e)
            {
                int index = MyFlipview.SelectedIndex;
                LoadElements();
                MyFlipview.SelectedIndex = index;
            }
        }
    }

    Thanks in advance for the help.

    Monday, September 22, 2014 10:32 AM

Answers

  • Thanks for reporting this.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    • Proposed as answer by Jamles Hez Saturday, October 11, 2014 10:53 AM
    • Marked as answer by Jamles Hez Wednesday, October 15, 2014 9:08 AM
    Monday, September 22, 2014 1:04 PM
  • Hi g.developer84,

    I can reproduce the issue, thanks for reporting to us as well as Matt told you.

    But I don't know if you find a interesting thing, when you move the flipview to the second item(b), then click reload button, the flipview does not blinking. Only third and fourth item got blinking after clicking.

    I guess the blinking might because the flipview want to navigate to the correct item, for test purpose, I modify the code as blow:

            private void On_Button_Click(object sender, RoutedEventArgs e)
            {
                int index = MyFlipview.SelectedIndex;
                LoadElements();
                for (int i = 0; i <= index; i++)
                {
                    MyFlipview.SelectedIndex = i;
                }
            }

    Now a good news is there is no blinking any more, this is a quick walk around to make your app functions well :)

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by Jamles Hez Wednesday, October 15, 2014 9:08 AM
    Saturday, October 11, 2014 10:51 AM

All replies

  • Thanks for reporting this.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    • Proposed as answer by Jamles Hez Saturday, October 11, 2014 10:53 AM
    • Marked as answer by Jamles Hez Wednesday, October 15, 2014 9:08 AM
    Monday, September 22, 2014 1:04 PM
  • Hi g.developer84,

    I can reproduce the issue, thanks for reporting to us as well as Matt told you.

    But I don't know if you find a interesting thing, when you move the flipview to the second item(b), then click reload button, the flipview does not blinking. Only third and fourth item got blinking after clicking.

    I guess the blinking might because the flipview want to navigate to the correct item, for test purpose, I modify the code as blow:

            private void On_Button_Click(object sender, RoutedEventArgs e)
            {
                int index = MyFlipview.SelectedIndex;
                LoadElements();
                for (int i = 0; i <= index; i++)
                {
                    MyFlipview.SelectedIndex = i;
                }
            }

    Now a good news is there is no blinking any more, this is a quick walk around to make your app functions well :)

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by Jamles Hez Wednesday, October 15, 2014 9:08 AM
    Saturday, October 11, 2014 10:51 AM