title: UWP - Display Progress Bar in ItemTemplate programmatically
body: <p>I'm building a UWP app for Windows Mobile but I've hit a bit of a snag with progress bars. I got one working on the first page on app launch, that's fine, but now I'm trying to show one inside a GridView. I will have N number of GridView controls on the screen at any one time, and want to display a ProgressBar in each.</p>
  
  <p>This works fine with the data binding and data will show, but when I tried to add an indeterminate ProgressBar before the TextBlock it doesn't seem to show. I can only assume I'm either putting it in the wrong place or I'm doing it wrong as my GridView is using <code>GridView.ItemTemplate</code>.</p>
  
  <p>Here are some screenshots:</p>
  
  <p><a href="https://i.stack.imgur.com/2Ft27.png" rel="nofollow noreferrer">Without data in the collection</a></p>
  
  <p><a href="https://i.stack.imgur.com/4dLvt.png" rel="nofollow noreferrer">With data in the collection</a></p>
  
  <h1>Update with Answer</h1>
  
  <p>With Justin XL's help I've managed to get to the bottom of the issue. I was binding to a normal clr property and not a DependencyProperty. I changed my code to use MVVM and setup the IsLoaded property to handle notifying the UI. Here is my updated and working code:</p>
  
  
  
  <p><strong>ViewModel.cs</strong></p>
  
  <pre class="lang-cs prettyprint-override"><code>public class ViewModel
  {
      public string Name { get; set; }
  }
  </code></pre>
  
  <p><strong>MainPageViewModel.cs</strong></p>
  
  <pre class="lang-cs prettyprint-override"><code>public class MainPageViewModel : INotifyPropertyChanged
  {
      public ObservableCollection&lt;ViewModel&gt; MyData { get; set; } = new ObservableCollection&lt;ViewModel&gt;();
  
      private bool _isLoaded;
  
      public bool IsLoaded
      {
          get { return _isLoaded; }
          set
          {
              _isLoaded = value;
              OnPropertyChanged();
          }
      }
  
      public async Task GetDataAsync()
      {
          // Add items to MyData
          IsLoaded = true;
      }
  
      public event PropertyChangedEventHandler PropertyChanged;
  
      protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
      {
          PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
      }
  }
  </code></pre>
  
  <p><strong>MainPage.xaml.cs</strong></p>
  
  <pre class="lang-cs prettyprint-override"><code>public sealed partial class MainPage : Page
  {
      public MainPage()
      {
          InitializeComponent();
          DataContext = new MainPageViewModel();
      }
  
      public MainPageViewModel Vm =&gt; DataContext as MainPageViewModel;
  
      protected override async void OnNavigatedTo(NavigationEventArgs e)
      {
          base.OnNavigatedTo(e);
  
          await Vm.GetDataAsync();
      }
  }
  </code></pre>
  
  <p><strong>MainPage.xaml</strong></p>
  
  <pre class="lang-cs prettyprint-override"><code>&lt;Page
      x:Class="MultiGridProgressBars.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:MultiGridProgressBars"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:models="using:MultiGridProgressBars.Models"
      mc:Ignorable="d"&gt;
  
      &lt;Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"&gt;
          &lt;GridView IsHitTestVisible="{x:Bind Vm.IsLoaded, Mode=OneWay}"
              Header="A Grid View"
              HorizontalAlignment="Left"
              x:Name="MyDataListView1"
              ItemsSource="{x:Bind Vm.MyData}"
              Width="164" 
              Margin="10,53,0,53"&gt;
              &lt;GridView.ItemTemplate&gt;
                  &lt;DataTemplate x:DataType="models:ViewModel"&gt;
                      &lt;Grid&gt;
                          &lt;Grid.ColumnDefinitions&gt;
                              &lt;ColumnDefinition Width="*"&gt;&lt;/ColumnDefinition&gt;
                              &lt;ColumnDefinition Width="Auto"&gt;&lt;/ColumnDefinition&gt;
                          &lt;/Grid.ColumnDefinitions&gt;
                          &lt;TextBlock Grid.Column="0" HorizontalAlignment="Stretch" TextWrapping="WrapWholeWords"&gt;
                              &lt;Run Text="{ x:Bind Name }"&gt;&lt;/Run&gt;
                          &lt;/TextBlock&gt;
                      &lt;/Grid&gt;
                  &lt;/DataTemplate&gt;
              &lt;/GridView.ItemTemplate&gt;
              &lt;GridView.ItemContainerStyle&gt;
                  &lt;Style TargetType="GridViewItem"&gt;
                      &lt;Setter Property="Margin" Value="0 0 0 10"&gt;&lt;/Setter&gt;
                      &lt;Setter Property="BorderThickness" Value="1"&gt;&lt;/Setter&gt;
                      &lt;Setter Property="BorderBrush" Value="Blue"&gt;&lt;/Setter&gt;
                      &lt;Setter Property="Padding" Value="5"&gt;&lt;/Setter&gt;
                      &lt;Setter Property="HorizontalContentAlignment" Value="Stretch"/&gt;
                      &lt;Setter Property="HorizontalAlignment" Value="Stretch"/&gt;
                      &lt;Setter Property="VerticalContentAlignment" Value="Stretch"/&gt;
                      &lt;Setter Property="VerticalAlignment" Value="Stretch"/&gt;
                      &lt;Setter Property="Width" Value="150"&gt;&lt;/Setter&gt;
                      &lt;Setter Property="Height" Value="80"&gt;&lt;/Setter&gt;
                  &lt;/Style&gt;
              &lt;/GridView.ItemContainerStyle&gt;
          &lt;/GridView&gt;
      &lt;/Grid&gt;
  &lt;/Page&gt;
  </code></pre>
  
  <p><strong>App.xaml</strong></p>
  
  <pre class="lang-cs prettyprint-override"><code>&lt;Application
          x:Class="MultiGridProgressBars.App"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:local="using:MultiGridProgressBars"
          xmlns:converters="using:MultiGridProgressBars.Converters"
          RequestedTheme="Light"&gt;
  
      &lt;Application.Resources&gt;
          &lt;converters:InvertIsCheckedVisiblityConverter x:Key="InvertIsCheckedVisiblityConverter" /&gt;
          &lt;Style TargetType="GridView"&gt;
              &lt;Setter Property="Padding" Value="0,0,0,10" /&gt;
              &lt;Setter Property="IsTabStop" Value="False" /&gt;
              &lt;Setter Property="TabNavigation" Value="Once" /&gt;
              &lt;Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/&gt;
              &lt;Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/&gt;
              &lt;Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" /&gt;
              &lt;Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False" /&gt;
              &lt;Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled" /&gt;
              &lt;Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True" /&gt;
              &lt;Setter Property="ScrollViewer.ZoomMode" Value="Disabled" /&gt;
              &lt;Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" /&gt;
              &lt;Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True" /&gt;
              &lt;Setter Property="IsSwipeEnabled" Value="True" /&gt;
              &lt;Setter Property="ItemContainerTransitions"&gt;
                  &lt;Setter.Value&gt;
                      &lt;TransitionCollection&gt;
                          &lt;AddDeleteThemeTransition /&gt;
                          &lt;ContentThemeTransition /&gt;
                          &lt;ReorderThemeTransition /&gt;
                          &lt;EntranceThemeTransition IsStaggeringEnabled="False" /&gt;
                      &lt;/TransitionCollection&gt;
                  &lt;/Setter.Value&gt;
              &lt;/Setter&gt;
              &lt;Setter Property="ItemsPanel"&gt;
                  &lt;Setter.Value&gt;
                      &lt;ItemsPanelTemplate&gt;
                          &lt;ItemsWrapGrid Orientation="Horizontal" /&gt;
                      &lt;/ItemsPanelTemplate&gt;
                  &lt;/Setter.Value&gt;
              &lt;/Setter&gt;
              &lt;Setter Property="Template"&gt;
                  &lt;Setter.Value&gt;
                      &lt;ControlTemplate TargetType="GridView"&gt;
                          &lt;Grid BorderBrush="{TemplateBinding BorderBrush}"
                                  BorderThickness="{TemplateBinding BorderThickness}"
                                  Background="{TemplateBinding Background}"&gt;
                              &lt;ScrollViewer x:Name="ScrollViewer"
                                              AutomationProperties.AccessibilityView="Raw"
                                              BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
                                              HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                              HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                              IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                                              IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
                                              IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
                                              IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                                              IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                              TabNavigation="{TemplateBinding TabNavigation}"
                                              VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                              VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                              ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"&gt;
                                  &lt;ItemsPresenter FooterTransitions="{TemplateBinding FooterTransitions}"
                                                  FooterTemplate="{TemplateBinding FooterTemplate}"
                                                  Footer="{TemplateBinding Footer}"
                                                  HeaderTemplate="{TemplateBinding HeaderTemplate}"
                                                  Header="{TemplateBinding Header}"
                                                  HeaderTransitions="{TemplateBinding HeaderTransitions}"
                                                  Padding="{TemplateBinding Padding}" /&gt;
                              &lt;/ScrollViewer&gt;
  
                              &lt;ProgressBar x:Name="StatusBar"
                                               Visibility="{Binding IsHitTestVisible, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource InvertIsCheckedVisiblityConverter}}"
                                               IsIndeterminate="True" /&gt;
                          &lt;/Grid&gt;
                      &lt;/ControlTemplate&gt;
                  &lt;/Setter.Value&gt;
              &lt;/Setter&gt;
          &lt;/Style&gt;
      &lt;/Application.Resources&gt;
  &lt;/Application&gt;
  </code></pre>
  
  <p><strong>InvertIsCheckedVisiblityConverter.cs</strong></p>
  
  <pre class="lang-cs prettyprint-override"><code>public class InvertIsCheckedVisiblityConverter : IValueConverter
  {
      public object Convert(object value, Type targetType, object parameter, string language)
      {
          bool isChecked = (bool) value;
          return isChecked ? Visibility.Collapsed : Visibility.Visible;
      }
  
      public object ConvertBack(object value, Type targetType, object parameter, string language)
      {
          return null;
      }
  }
  </code></pre>