C#•9mo ago

[Avalonia] Beginner attempting a spreadsheet application. Having issues displaying rows.

I'm really hoping that someone with some experience may have some time to assist me. This is my first time creating a UI of any kind as well as utilizing the MVVM development pattern, so I'm very out of my element. I am having issues with displaying rows of a DataGrid. If you are available, please reach out with a time/place and my desperate self will be there! Thank you!

15 Replies

lycian•9mo ago

What issue are you hitting specifically? Asking specific questions or sharing code would be helpful $code

MODiX•9mo ago

To post C# code type the following: ```cs // code here ``` Get an example by typing $codegif in chat For longer snippets, use: https://paste.mod.gg/

JonahJOP•9mo ago

The issue is more so that I really am not sure what I am looking for to be wrong. I am using a somewhat substantial amount of prewritten code as this is for a school assignment, but I cannot seem to figure out how to make it work properly. I apologize for the delayed responce

leowest•9mo ago

U dont need to apologize but if u dont provide the code there is not much we can do to help u, that is what he meant with the above.

JonahJOP•9mo ago

https://paste.mod.gg/iebbaafbnjja/2

BlazeBin - iebbaafbnjja

A tool for sharing your source code with the world!

JonahJOP•9mo ago

Took a bit to figure it out lol Currently, when run, it displays only the row of column headers

JonahJOP•9mo ago

JonahJOP•9mo ago

It is pretty messy and imcomplete at the moment. Have been attemping to see if the commented function InitializeSpreadsheet in MainWindowViewModel might help as it was another provided function, but it dosen't correlate with the code I have currently quite yet

leowest•9mo ago

well I dont know about reactiveui so not sure I will be able to help you but I will take a look Avalonia have reactiveui and communitytoolkit and I normally use the later

JonahJOP•9mo ago

I'm not all to familiar with the uses of Observers and Event handling quite yet, would you say it might be more documented or beginner friendly? Or just same thing different platform?

leowest•9mo ago

well those are mainly boiletplate of code that enable the code behind and the UI to syncronize and update on changes for example in community toolkit

[ObservableProperty]
private string _title;

[ObservableProperty]
private string _title;

Really is

private string _title;
public string Title
{
    get => _title;
    set => SetProperty(ref _title, value);
}

private string _title;
public string Title
{
    get => _title;
    set => SetProperty(ref _title, value);
}

Where the viewmodel class usually inherits from INotifyPropertyChanged so there is a bit more code then just that behind the scenes that connects things up @JonahJ ok so I will try to go thru the basics for now, you're using ReactiveUI with Avalonia, so you do not need to do things like this in your code

, INotifyPropertyChanged

, INotifyPropertyChanged

and

protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
    this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
    this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

and

this.OnPropertyChanged(nameof(this.Rows));

this.OnPropertyChanged(nameof(this.Rows));

and

protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
    this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
    this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

and

public event PropertyChangedEventHandler PropertyChanged;

public event PropertyChangedEventHandler PropertyChanged;

since you're using ReactiveUI you by default already have these kind of things all done for u and all u really need to do is for example

public Cell[][] Rows
{
    get => _rows;
    set => this.RaiseAndSetIfChanged(ref _rows, value);
}

public Cell[][] Rows
{
    get => _rows;
    set => this.RaiseAndSetIfChanged(ref _rows, value);
}

AvaloniaUI also requires u to setup an additional entry in order for the DataGrid to show up in your App.axaml file you need to add inside of <Application.Styles>

<StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Fluent.xaml"/>

<StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Fluent.xaml"/>

not sure if u did that

JonahJOP•9mo ago

I do have that included within my App.axaml

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="Spreadsheet_Jonah_Jellison.App"
             xmlns:local="using:Spreadsheet_Jonah_Jellison"
             RequestedThemeVariant="Default">
             <!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. -->

    <Application.DataTemplates>
        <local:ViewLocator/>
    </Application.DataTemplates>
  
             
    <Application.Styles>
        <FluentTheme />
        <StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Fluent.xaml" />
    </Application.Styles>
</Application>

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="Spreadsheet_Jonah_Jellison.App"
             xmlns:local="using:Spreadsheet_Jonah_Jellison"
             RequestedThemeVariant="Default">
             <!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. -->

    <Application.DataTemplates>
        <local:ViewLocator/>
    </Application.DataTemplates>
  
             
    <Application.Styles>
        <FluentTheme />
        <StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Fluent.xaml" />
    </Application.Styles>
</Application>

leowest•9mo ago

then I would suggest you to start simpler so you get to understand how the DataGrid works first, meaning u can delete the Spreadsheet.cs, Cell.cs and restore your file MainWindowViewModel to

namespace Spreadsheet_Jonah_Jellison.ViewModels;

using System.Runtime.CompilerServices;
using Spreadsheet_Jonah_Jellison.Models;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Templates;
using Avalonia.Data;
using Avalonia.Layout;
using Avalonia.Media;
using Avalonia.ReactiveUI;
using ReactiveUI;

public class MainWindowViewModel : ViewModelBase, INotifyPropertyChanged
{
    public MainWindowViewModel()
    {
    }
}

namespace Spreadsheet_Jonah_Jellison.ViewModels;

using System.Runtime.CompilerServices;
using Spreadsheet_Jonah_Jellison.Models;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Templates;
using Avalonia.Data;
using Avalonia.Layout;
using Avalonia.Media;
using Avalonia.ReactiveUI;
using ReactiveUI;

public class MainWindowViewModel : ViewModelBase, INotifyPropertyChanged
{
    public MainWindowViewModel()
    {
    }
}

so an example of binding data to your DataGrid would be So imagine we have a model like such

public class Spreadsheet
{
    public string Name {get;set;}
    public string Description {get;set;}
}

public class Spreadsheet
{
    public string Name {get;set;}
    public string Description {get;set;}
}

In your MainWindowViewModel you would then create the following collection

public ObservableCollection<Spreadsheet> Spreadsheet { get; }

public ObservableCollection<Spreadsheet> Spreadsheet { get; }

In your axaml you would bind

ItemsSource="{Binding Spreadsheet}"

ItemsSource="{Binding Spreadsheet}"

and inside of your constructor MainWindowViewModel we can fill in some data as test

public MainWindowViewModel()
{
    Spreadsheet =
    [
        new Spreadsheet { Name = "Josh", Description = "Ran a full marathon..." },
        new Spreadsheet { Name = "Roger", Description = "Jumped off of a plane..." },
        new Spreadsheet { Name = "Mathias", Description = "Climb up a mountain..." }
    ];
}

public MainWindowViewModel()
{
    Spreadsheet =
    [
        new Spreadsheet { Name = "Josh", Description = "Ran a full marathon..." },
        new Spreadsheet { Name = "Roger", Description = "Jumped off of a plane..." },
        new Spreadsheet { Name = "Mathias", Description = "Climb up a mountain..." }
    ];
}

leowest•9mo ago

assuming its all good and you run your app u should see something similar to this

leowest•9mo ago

Let me know if u have any questions up to this point

Gaming

Programming

[Avalonia] Beginner attempting a spreadsheet application. Having issues displaying rows.