Design Template Selector in Windows Runtime Apps

Hello All,

Here i am sharing you some code which supports both WinRT-(8.x,10.0) versions.

public class TimelineContentTemplateSelector : DataTemplateSelector
    {
        public DataTemplate ContentTemplate { get; set; }
        public DataTemplate EmptyTemplate { get; set; }

        protected override DataTemplate SelectTemplateCore(object item,
                                                           DependencyObject container)
        {
            if (item is TimelineContentViewModel)
                return ContentTemplate;
            if (item is TimelineEmptyContentViewModel)
                return EmptyTemplate;

            return base.SelectTemplateCore(item, container);
        }
    }


Where TimelineContentViewModel is for the content which you want to display,means how your view of control look like.
And, TimelineEmptyContentViewModel is to show empty view of control.Requires when we need to show default view or while data to control is loading.

  public class TimelineContentViewModel : ViewModelBase
    {
     
        private string _applicationPlaceholder;
        public string ApplicationPlaceholder
        {
            get
            {
                return _applicationPlaceholder;
            }
            set
            {
                if (_applicationPlaceholder != value)
                {
                    _applicationPlaceholder = value;
                    Notify("ApplicationPlaceholder");
                }
            }
        }

        private string _contentTitle;
        public string ContentTitle
        {
            get
            {
                return _contentTitle;
            }
            set
            {
                if (_contentTitle != value)
                {
                    _contentTitle = value;
                    Notify("ContentTitle");
                }
            }
        }
 }


Where ApplicationPlaceholder and ContentTitle is just properties of the model,you can add or delete as required for content view of control.

 public class TimelineEmptyContentViewModel : ViewModelBase
    {
    }

Its empty,since i need to show nothing.You can add placeholder icon here for the empty/default view.


 /// <summary>
    /// Abstract model for all ViewModel classes. Encapsulates the common behavior across all the
    /// view models.
    /// Its reponsible to notify the property changed so that UI can be updated accordingly.
    /// </summary>

    public class ViewModelBase : INotifyPropertyChanged
    {
        private bool _isInitialized = false;
        private bool _processing = false;
        public event PropertyChangedEventHandler PropertyChanged;

        public ViewModelBase()
        {
        }
        protected void Notify(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        public virtual bool InitializeAsync()
        {
            return false;
        }
    }

You can extend you view model classes with this ViewModelBase  class to add notify property change to your class properties.



Now,use TimelineEmptyContentViewModel initially, when we navigated to page and shows it untill all data for control gets loaded.

Once data to control is loaded to TimelineContentViewModel object,assign tis object to datacontext of the page.

Hope this post will help you.


Happy Coding !! :)