title: Using a basic fade-in animation when Visibility of a UIElement is changed to "Visible" causes screen to flicker momentarily
body: <p>I'm having a frustrating problem running a simple fade in animation in my app.</p>
  
  <p>My app consists of three pivots.</p>
  
  <p>Each pivot contains three sections that have their detailed information "Collapsed" by default and that becomes "Visible" if you tap anywhere on the section.</p>
  
  <p>When you tap to expand the detailed information for a section, a fadeIn() animation is called from the code-behind:</p>
  
  <pre><code>nowExpandableContent.Visibility = System.Windows.Visibility.Visible;
  
              Storyboard s = new Storyboard();
  
              DoubleAnimation fadeInAnimation = new DoubleAnimation();
              fadeInAnimation.From = 0.0;
              fadeInAnimation.To = 1.0;
              fadeInAnimation.Duration = new Duration(TimeSpan.FromSeconds(1.0));
  
              Storyboard.SetTarget(fadeInAnimation, this.nowExpandableContent);
              Storyboard.SetTargetProperty(fadeInAnimation, new PropertyPath("Opacity"));
  
              s.Children.Add(fadeInAnimation);
  
              s.Begin();
  </code></pre>
  
  <p>The problem I'm having is that sometimes when I tap a section to expand, the app will flicker/flash momentarily (having paid close attention, I noticed it's showing the content of the other pivots). Sometimes this can happen on my first tap of a section. Other times it can take a few or more taps (open/close/open/close etc.) for it to occur. It's really random.</p>
  
  <p>This is an excerpt from the xaml of the first pivot/section within it (note: the Tap event handler, "Now_Tap", is where the fadeIn method is called from):</p>
  
  <pre><code>&lt;controls:PivotItem 
      x:Name="pivotNow"
      Margin="0"&gt;
  
      &lt;ScrollViewer 
          Height="780"
          ManipulationStarted="ScrollViewerToday_ManipulationStarted"
          x:Name="scrollViewerNowPivot"&gt;
  
          &lt;Grid 
              x:Name="GridNow"&gt;
  
              &lt;Grid.RowDefinitions&gt;
                  &lt;RowDefinition Height="*"/&gt; &lt;!-- NOW --&gt;
              &lt;/Grid.RowDefinitions&gt;
  
              &lt;!-- NOW ROW START --&gt;
              &lt;StackPanel 
                  Background="{Binding ActiveTheme.BackgroundAlt1, Source={StaticResource ThemeController}}"
                  Grid.Row="0"
                  Tap="Now_Tap"&gt;
  
                  &lt;!-- NOW GRID START --&gt;
                  &lt;Grid
                      Margin="0,50,0,50"&gt;
                      &lt;Grid.ColumnDefinitions&gt;
                          &lt;ColumnDefinition Width="70"/&gt;
                          &lt;ColumnDefinition Width="*"/&gt;
                          &lt;ColumnDefinition Width="auto"/&gt;
                          &lt;ColumnDefinition Width="50"/&gt;
                      &lt;/Grid.ColumnDefinitions&gt;
                      &lt;Grid.RowDefinitions&gt;
                          &lt;RowDefinition Height="*"/&gt;
                          &lt;RowDefinition Height="*"/&gt;
                          &lt;RowDefinition Height="*"/&gt;
                      &lt;/Grid.RowDefinitions&gt;
  
                      &lt;!-- NOW TITLE ROW START --&gt;
                      &lt;wptoolkit:WrapPanel 
                          Grid.Row="0"
                          Grid.Column="1"
                          Orientation="Horizontal"&gt;
                          &lt;!-- NOW TITLE --&gt;
                          &lt;TextBlock 
                              FontSize="18"
                              FontWeight="Bold"
                              Foreground="{Binding ActiveTheme.ForegroundAlt1, Source={StaticResource ThemeController}}"
                              Text="NOW"/&gt;
                          &lt;!-- NOW EXPANDABLE ICON --&gt;
                          &lt;Border 
                              Background="{Binding ActiveTheme.BackgroundAlt1, Source={StaticResource ThemeController}}"
                              BorderBrush="{Binding ActiveTheme.ForegroundAlt1, Source={StaticResource ThemeController}}"
                              BorderThickness="1"
                              CornerRadius="250"
                              Margin="15,2,0,0"
                              Opacity="0.5"
                              Padding="4,5,4,4"
                              Width="24"&gt;
                              &lt;TextBlock 
                                  FontSize="10"
                                  FontFamily="Segoe UI Symbol"                                                        
                                  Foreground="{Binding ActiveTheme.ForegroundAlt1, Source={StaticResource ThemeController}}"
                                  HorizontalAlignment="Center"
                                  Opacity="0.5"
                                  Text="&amp;#xE109;"                                            
                                  x:Name="nowExpandableIcon"/&gt;
                          &lt;/Border&gt;
                      &lt;/wptoolkit:WrapPanel&gt;
                      &lt;!-- NOW TITLE ROW END --&gt;
  
                      &lt;!-- NOW CONTENT ROW START --&gt;
                      &lt;StackPanel 
                          Grid.Row="1"
                          Grid.Column="1"
                          Margin="0,50,0,50"&gt;
                          &lt;wptoolkit:WrapPanel&gt;
                              &lt;!-- NOW ICON --&gt;
                              &lt;TextBlock 
                                  FontSize="80" 
                                  FontWeight="Bold" 
                                  FontFamily="/Assets/Fonts/WeatherIcons-Regular.otf#Weather Icons"
                                  Foreground="{Binding PivotNow.IconColour}" 
                                  Text="{Binding PivotNow.Icon}"
                                  VerticalAlignment="Bottom"/&gt;
                              &lt;!-- NOW TEMPERATURE --&gt;
                              &lt;TextBlock 
                                  FontSize="90"
                                  FontWeight="Bold"
                                  Margin="40,0,0,-5"
                                  Text="{Binding Location.Currently.Temperature}"
                                  VerticalAlignment="Bottom"/&gt;
                          &lt;/wptoolkit:WrapPanel&gt;
                          &lt;!-- NOW SUMMARY --&gt;
                          &lt;TextBlock 
                              FontSize="24"
                              Margin="0,20,0,0"
                              TextWrapping="Wrap"&gt;
                                  &lt;Run Text="{Binding PivotNow.Summary}"/&gt;&lt;Run Text="."/&gt; &lt;Run Text="Feels like "/&gt;&lt;Run Text="{Binding Location.Currently.ApparentTemperature}"/&gt;&lt;Run Text="."/&gt;
                          &lt;/TextBlock&gt;
                          &lt;!-- NOW EXPANDABLE CONTENT --&gt;
                          &lt;TextBlock        
                              FontSize="24"
                              Margin="0,30,0,0"
                              TextWrapping="Wrap"
                              Text="{Binding Location.Currently.ExpandableContent}"
                              Visibility="Collapsed"
                              x:Name="nowExpandableContent"/&gt;
                      &lt;/StackPanel&gt;
                      &lt;!-- NOW CONTENT ROW END --&gt;
  
                  &lt;/Grid&gt;
                  &lt;!-- NOW GRID END --&gt;
              &lt;/StackPanel&gt;
              &lt;!-- NOW ROW END --&gt;
  </code></pre>
  
  <p>I know it's tough to diagnose the root cause of this issue without having access to the entire xaml/debugging application, but are there any hints towards what may be causing this behaviour from what I have shared? If not, is the general problem I'm having remotely familiar to anyone by any chance? </p>
  
  <p>I should add that this problem never occurs if I expand a section without using an animation.</p>
  
  <p>Thanks for your time.</p>