The following forum(s) have migrated to Microsoft Q&A (Preview): Developing Universal Windows apps!
Visit Microsoft Q&A (Preview) to post new questions.

Learn More

 locked
How to update visibility of an UI element in a DataTemplate in GridView RRS feed

  • Question

  • Hi all,

    I have a GridView with following structure:

    <Page.Resources>
        <local:boolToVisibilityConverter x:Key="BoolToVisibilityConverter"/>
    </Page.Resources>

    <GridView ItemsSource="{x:Bind ExampleItems, Mode=OneWay}" x:Name="mDataGridView" ItemClick="mDataGridView_ItemClick" IsItemClickEnabled="True"> <GridView.ItemTemplate> <DataTemplate x:Name="DataTemplate" x:DataType="local:ItemTemplate"> <StackPanel Height="100" Width="100" Background="OrangeRed" x:Name="rootPanel"> <TextBlock x:Name="TitleTextBlock" Text="{x:Bind Title,Mode=OneWay}"/> <TextBlock Text="{x:Bind Subtitle,Mode=OneWay}" /> <TextBlock Text="{x:Bind Description,Mode=OneWay}" /> <ProgressBar Visibility="{x:Bind ShowProgress, Converter={StaticResource BoolToVisibilityConverter},Mode=OneWay}" /> </StackPanel> </DataTemplate> </GridView.ItemTemplate> </GridView>


    And corresponding item data class:

    public class ItemTemplate
    {
        public string Title { get; set; }
        public string Subtitle { get; set; }
        public string Description { get; set; }
    
        public bool ShowProgress { get; set; }
    }

    A converter to convert the "ShowProgress" property into Visibility:

    public class boolToVisibilityConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            bool show = (bool)value;
            return show ? Visibility.Visible : Visibility.Collapsed;
        }
    
        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            Visibility visibility = (Visibility)value;
            return visibility.Equals(Visibility.Visible);
        }
    }

    The code works fine when display the GridView when the application starts. But if I try to change the the progress bar visibility by changing corresponding "ShowProgress" property, the view won't update. Any one got any idea for how to change the visibility with x:bind mechanism? Any suggestion would be appreciated. Thank you.

    Alex

    Friday, November 22, 2019 6:18 AM

Answers

  • Hi Alex,
    implement INotifyPropertyChanged:

      public class ItemTemplate : INotifyPropertyChanged
      {
        public string Title { get; set; }
        public string Subtitle { get; set; }
        public string Description { get; set; }
    
        private bool _showProgress = true;
        public bool ShowProgress
        {
          get { return this._showProgress; }
          set { this._showProgress = value; OnPropChanged(); }
        }
    
        public event PropertyChangedEventHandler PropertyChanged;
        private void OnPropChanged([CallerMemberName] string propName = "") =>
          PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
      }


    --
    Best Regards / Viele Grüße
    Peter Fleischer (former MVP for Developer Technologies)
    Homepage, Tipps, Tricks


    • Edited by Peter Fleischer Friday, November 22, 2019 6:53 AM
    • Marked as answer by goldkyo Friday, November 22, 2019 6:57 AM
    Friday, November 22, 2019 6:46 AM

All replies

  • Hi Alex,
    implement INotifyPropertyChanged:

      public class ItemTemplate : INotifyPropertyChanged
      {
        public string Title { get; set; }
        public string Subtitle { get; set; }
        public string Description { get; set; }
    
        private bool _showProgress = true;
        public bool ShowProgress
        {
          get { return this._showProgress; }
          set { this._showProgress = value; OnPropChanged(); }
        }
    
        public event PropertyChangedEventHandler PropertyChanged;
        private void OnPropChanged([CallerMemberName] string propName = "") =>
          PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
      }


    --
    Best Regards / Viele Grüße
    Peter Fleischer (former MVP for Developer Technologies)
    Homepage, Tipps, Tricks


    • Edited by Peter Fleischer Friday, November 22, 2019 6:53 AM
    • Marked as answer by goldkyo Friday, November 22, 2019 6:57 AM
    Friday, November 22, 2019 6:46 AM
  • Hi Peter,

    Thanks, that works great!

    Alex

    Friday, November 22, 2019 6:58 AM