I was creating a chess application and i needed to use an observableCollection so that i can highlight the legal squares when a piece is selected. However whenever i initialize the observableCollection i recieve an exception, i was unable to find anything similar to my problem. I am using mvvm architecture.

I keep getting error “Items collection must be empty before using itemSource”

        ChessBoardViewModel vm = new();
        public ChessBoardView()
        {
            InitializeComponent();
            DataContext = vm;
            vm.SquareSize = 500/8;
            drawImage();
        }

                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <UniformGrid x:Name="GameBoard" Rows="8" Columns="8" AllowDrop="true" Height="500" Width="500"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <DataTemplate>
                    <Border Background="{Binding}"/>
                </DataTemplate>
                
            </ItemsControl>    

i was trying to initialize colorCells attribute in the constructor but it does not work either

private ObservableCollection<Brush> colorCells;
public ObservableCollection<Brush> ColorCells
{
    get { return colorCells;}
    set { colorCells = value;}
}
public ChessBoardViewModel()
{
    colorCells = new ObservableCollection<Brush>();
    board.defaultStart();
}

I was trying to create a checkerboard pattern with the code but i was unable to initialize the observableCollection and the program did not run