title: How do I use a Reactive User Control as a template for displaying a list of View Models in a List Box using Avalonia and ReactiveUI?
body: <p>I'm trying to use Avalonia and ReactiveUI to display a list box of images pulled from a local data base. My implementation is based off of ReactiveUI's example on their docs: <a href="https://www.reactiveui.net/docs/getting-started/compelling-example" rel="nofollow noreferrer">here</a>. I go about it by creating a view and view model for the main page which contains a list of view models made for the individual images. From what I'm getting from the demo Avalonia is supposed to recognize the image view models and display the corresponding user control in the list box but instead the list box displays nothing and the element inspector reports that the list box is hooked up to a list of generic objects. I'm not sure what I'm doing wrong but I suspect it has something to do with it not making the connection between the image view model and image view.</p>
  <p>BrowserViewModel.cs (MainWindowViewModel):</p>
  <pre class="lang-cs prettyprint-override"><code>using System.Collections;
  using System.Collections.Generic;
  using System.Linq;
  using System.Reactive;
  using System.Reactive.Disposables;
  using System.Threading.Tasks;
  using Avalonia.NETCoreMVVMApp.Models;
  using ReactiveUI;
  
  namespace Avalonia.NETCoreMVVMApp.ViewModels
  {
      public class BrowserViewModel : ReactiveObject
      {
          //how many results to display per page. Right now in the absence of pages it's used as the limit for how many results
          //I pull from the database
          private const int PageResultSize = 50;
          //Observable property for the list of results pulled from the databse
          private readonly ObservableAsPropertyHelper&lt;List&lt;BrowserResultViewModel&gt;&gt; _browserResults;
          public List&lt;BrowserResultViewModel&gt; BrowserResults =&gt; _browserResults.Value;
          
          //reactive command used to link the SubmitButton click event to the service that retrieves images from the database
          public ReactiveCommand&lt;Unit, List&lt;BrowserResultViewModel&gt;&gt; FetchImages { get; }
  
          //property for the search query out in through a text box
          private string _searchQuerry;
          public string SearchQuerry
          {
              get =&gt; _searchQuerry;
              set =&gt; this.RaiseAndSetIfChanged(ref _searchQuerry, value);
          }
  
          //property for keeping track of the page the browser is on. (Not yet implemented)
          private int _pageNumber;
          public int PageNumber
          {
              get =&gt; _pageNumber;
              set =&gt; this.RaiseAndSetIfChanged(ref _pageNumber, value);
          }
          
  
          public BrowserViewModel()
          {
              FetchImages = ReactiveCommand.CreateFromTask(FetchImagesAsync);
              _browserResults = FetchImages.ToProperty(
                  this, x =&gt; x.BrowserResults, scheduler: RxApp.MainThreadScheduler);
          }
  
          //background function for the FetchImage command
          public async Task&lt;List&lt;BrowserResultViewModel&gt;&gt; FetchImagesAsync()
          {
              var context = new ApplicationContext();
              var results = context.Images
                  .Take(PageResultSize)
                  .Select(x =&gt; new BrowserResultViewModel(x.FileUri, x.Tags
                      .Select(x =&gt; x.Name)
                      .ToList()))
                  .ToList();
              return results;
          }
      }
  }
  </code></pre>
  <p>BrowserResultViewModel.cs:</p>
  <pre class="lang-cs prettyprint-override"><code>using System;
  using System.Collections.Generic;
  using ReactiveUI;
  
  namespace Avalonia.NETCoreMVVMApp.ViewModels
  {
      public class BrowserResultViewModel : ReactiveObject
      {
          //Uri containing corresponding image file path.
          public Uri ImageUri;
  
          //property for an image's corresponding tags (Not yet implemented)
          private List&lt;string&gt; _tags;
          public List&lt;string&gt; Tags
          {
              get =&gt; _tags;
              set =&gt; this.RaiseAndSetIfChanged(ref _tags, value);
          }
          
          public BrowserResultViewModel(Uri imageUri, List&lt;string&gt; tags)
          {
              ImageUri = imageUri;
              Tags = tags;
          }
      }
  }
  </code></pre>
  <p>BrowserView.cs (MainWindowView):</p>
  <pre class="lang-cs prettyprint-override"><code>using Avalonia;
  using Avalonia.Controls;
  using Avalonia.Controls.Mixins;
  using Avalonia.Markup.Xaml;
  using Avalonia.NETCoreMVVMApp.ViewModels;
  using Avalonia.ReactiveUI;
  using ReactiveUI;
  
  namespace Avalonia.NETCoreMVVMApp.Views
  {
      public partial class BrowserResultView : ReactiveUserControl&lt;BrowserResultViewModel&gt;
      {
          
          public BrowserResultView()
          {
              this.WhenActivated(disposable =&gt;
              {
                  //this binds the uri for an image to the image control in avalonia.
                  this.OneWayBind(ViewModel,
                          viewModel =&gt; viewModel.ImageUri,
                          view =&gt; view.Thumbnail.Source)
                      .DisposeWith(disposable);
              });
              
              InitializeComponent();
          }
  
          private void InitializeComponent()
          {
              AvaloniaXamlLoader.Load(this);
          }
      }    
  }
  </code></pre>
  <p>BrowserResultView.cs:</p>
  
  <pre><code>using Avalonia;
  using Avalonia.Controls;
  using Avalonia.Controls.Mixins;
  using Avalonia.Markup.Xaml;
  using Avalonia.NETCoreMVVMApp.ViewModels;
  using Avalonia.ReactiveUI;
  using ReactiveUI;
  
  namespace Avalonia.NETCoreMVVMApp.Views
  {
      public partial class BrowserResultView : ReactiveUserControl&lt;BrowserResultViewModel&gt;
      {
          
          public BrowserResultView()
          {
              this.WhenActivated(disposable =&gt;
              {
                  //this binds the uri for an image to the image control in avalonia.
                  this.OneWayBind(ViewModel,
                          viewModel =&gt; viewModel.ImageUri,
                          view =&gt; view.Thumbnail.Source)
                      .DisposeWith(disposable);
              });
              
              InitializeComponent();
          }
  
          private void InitializeComponent()
          {
              AvaloniaXamlLoader.Load(this);
          }
      }    
  }
  </code></pre>
  <p>BrowserResultView.axml:</p>
  <pre class="lang-xml prettyprint-override"><code>&lt;UserControl xmlns=&quot;https://github.com/avaloniaui&quot;
               xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;
               xmlns:d=&quot;http://schemas.microsoft.com/expression/blend/2008&quot;
               xmlns:mc=&quot;http://schemas.openxmlformats.org/markup-compatibility/2006&quot;
               mc:Ignorable=&quot;d&quot; d:DesignWidth=&quot;800&quot; d:DesignHeight=&quot;450&quot;
               x:Class=&quot;Avalonia.NETCoreMVVMApp.Views.BrowserResultView&quot;&gt;
      &lt;Grid&gt;
          &lt;Image x:Name=&quot;Thumbnail&quot; Margin=&quot;6&quot; Width=&quot;64&quot; Height=&quot;64&quot; HorizontalAlignment=&quot;Center&quot; VerticalAlignment=&quot;Center&quot;/&gt;
      &lt;/Grid&gt;
  &lt;/UserControl&gt;
  </code></pre>
  <p>MainWindow.axaml:</p>
  <pre class="lang-xml prettyprint-override"><code>&lt;Window xmlns=&quot;https://github.com/avaloniaui&quot;
          xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;
          xmlns:vm=&quot;using:Avalonia.NETCoreMVVMApp.ViewModels&quot;
          xmlns:d=&quot;http://schemas.microsoft.com/expression/blend/2008&quot;
          xmlns:mc=&quot;http://schemas.openxmlformats.org/markup-compatibility/2006&quot;
          xmlns:reactiveUi=&quot;http://reactiveui.net&quot;
          mc:Ignorable=&quot;d&quot; d:DesignWidth=&quot;800&quot; d:DesignHeight=&quot;450&quot;
          x:Class=&quot;Avalonia.NETCoreMVVMApp.Views.MainWindow&quot;
          Icon=&quot;/Assets/avalonia-logo.ico&quot;
          Title=&quot;Avalonia.NETCoreMVVMApp&quot;&gt;
  
      &lt;Grid RowDefinitions=&quot;1*, 20*&quot; ColumnDefinitions=&quot;*&quot;&gt;
          &lt;Grid RowDefinitions=&quot;*&quot; ColumnDefinitions=&quot;*, 70&quot;&gt;
              &lt;TextBox x:Name=&quot;searchBox&quot;/&gt;
              &lt;Button Grid.Column=&quot;1&quot; x:Name=&quot;submitSearchBtn&quot;&gt;Submit&lt;/Button&gt;
          &lt;/Grid&gt;
          &lt;ListBox x:Name=&quot;browserResultsListBox&quot; Grid.Row=&quot;1&quot;/&gt;
      &lt;/Grid&gt;
  &lt;/Window&gt;
  </code></pre>