Music app tutorial help. ViewLocator returns Not found

[BitForgeCraftedCode]

Getting stuck on the tutorial at this point https://docs.avaloniaui.net/docs/tutorials/music-store-app/album-view

When i inherit from ViewModelBase

public class AlbumViewModel : ViewModelBase
{        
}

the ViewLocatior just returns not found.

Anyone else run into this?

my MusicStoreViewModel.cs is this

using ReactiveUI;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Avalonia.MusicStore.ViewModels
{
    public class MusicStoreViewModel : ViewModelBase
    {
        private string? _searchText;
        private bool _isBusy;
        private AlbumViewModel? _selectedAlbum;

        public MusicStoreViewModel()
        {
            SearchResults.Add(new AlbumViewModel());
            SearchResults.Add(new AlbumViewModel());
            SearchResults.Add(new AlbumViewModel());
        }
        public ObservableCollection<AlbumViewModel> SearchResults { get; } = new();

        public AlbumViewModel? SelectedAlbum
        {
            get => _selectedAlbum;
            set => this.RaiseAndSetIfChanged(ref _selectedAlbum, value);
        }
        public string? SearchText
        {
            get => _searchText;
            set => this.RaiseAndSetIfChanged(ref _searchText, value);
        }

        public bool IsBusy
        {
            get => _isBusy;
            set => this.RaiseAndSetIfChanged(ref _isBusy, value);
        }
    }
}

My MusicStoreView is this

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="Avalonia.MusicStore.MusicStoreView"
			 xmlns:vm="clr-namespace:Avalonia.MusicStore.ViewModels"
			 x:DataType="vm:MusicStoreViewModel">
	<DockPanel>
		<StackPanel DockPanel.Dock="Top">
			<TextBox Text="{Binding SearchText}" Watermark="Search for Albums...." />
			<ProgressBar IsIndeterminate="True" IsVisible="{Binding IsBusy}" />
		</StackPanel>
		<Button Content="Buy Album"
				DockPanel.Dock="Bottom"
				HorizontalAlignment="Center" />
		
		<ListBox ItemsSource="{Binding SearchResults}" SelectedItem="{Binding SelectedAlbum}"/>
	
		
	</DockPanel>
</UserControl>

My AlbumViewModel is this

using ReactiveUI;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Avalonia.MusicStore.ViewModels
{
    public class AlbumViewModel : ViewModelBase
    {
    }
}

And my AlbumVIew is

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="Avalonia.MusicStore.AlbumView"
			 Width="200">
	<StackPanel Spacing="5" Width="200">
		<Border CornerRadius="10" ClipToBounds="True">
			<Panel Background="#7FFF22DD">
				<Image Width="200" Stretch="Uniform" />
				<Panel Height="200">
					<PathIcon Height="75" Width="75" Data="{StaticResource music_regular}" />
				</Panel>
			</Panel>
		</Border>
	</StackPanel>
</UserControl>

[stevemonaco]

The ViewModel -> View mapping that the default ViewLocator performs also includes the namespaces. So you need to change your view to Avalonia.MusicStore.Views.AlbumView so it can be mapped from Avalonia.MusicStore.ViewModels.AlbumViewModel. Remember to change the namespace in both the code-behind (xaml.cs) and the XAML (the x:Class).

[BitForgeCraftedCode]

Hi thanks for the reply. Unfortunately changing the namespace did not work and just tosses Unable to resolve type Avalonia.MusicStore.Views.AlbumView for the axaml file and tosses The name 'InitializeComponent' does not exist in the current context for the code-behinde

using Avalonia;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;

namespace Avalonia.MusicStore.Views.AlbumView;

public partial class AlbumView : UserControl
{
    public AlbumView()
    {
        InitializeComponent();
    }
}

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="Avalonia.MusicStore.Views.AlbumView"
			 Width="200">
	<StackPanel Spacing="5" Width="200">
		<Border CornerRadius="10" ClipToBounds="True">
			<Panel Background="#7FFF22DD">
				<Image Width="200" Stretch="Uniform" />
				<Panel Height="200">
					<PathIcon Height="75" Width="75" Data="{StaticResource music_regular}" />
				</Panel>
			</Panel>
		</Border>
	</StackPanel>
</UserControl>

[stevemonaco]

Your XAML and code-behind no longer match the same type which is why InitializeComponent isn't found.

namespace Avalonia.MusicStore.Views.AlbumView; // Change this

public partial class AlbumView : UserControl

This means the type will be Avalonia.MusicStore.Views.AlbumView.AlbumView. (Incorrect)

x:Class="Avalonia.MusicStore.Views.AlbumView"

This means the XAML side is Avalonia.MusicStore.Views.AlbumView. (Correct)

[BitForgeCraftedCode]

Thank you for your help Steve. Appreciate the time. Just in case anyone else needs the extra help here is my final AlbumView code. I don't think the tutorial mentioned changing the default namespaces around. So this was a very tricky one for someone new Avalonia to figure out. I mainly do web development with ASP NET Core but really trying to learn C# desktop dev.

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="Avalonia.MusicStore.Views.AlbumView"
			 Width="200">
	<StackPanel Spacing="5" Width="200">
		<Border CornerRadius="10" ClipToBounds="True">
			<Panel Background="#7FFF22DD">
				<Image Width="200" Stretch="Uniform" />
				<Panel Height="200">
					<PathIcon Height="75" Width="75" Data="{StaticResource music_regular}" />
				</Panel>
			</Panel>
		</Border>
	</StackPanel>
</UserControl>

using Avalonia;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;

namespace Avalonia.MusicStore.Views;

public partial class AlbumView : UserControl
{
    public AlbumView()
    {
        InitializeComponent();
    }
}