C#•9mo ago

✅ Avalonia not showing rows in datagrid

There are no rows in my datagrid in Avalonia, the headers are visible. I've checked if my list is empty, but it isn't. There are also no errors, even when I change the bindings to bindings that don't exist. I did include the Datagrid package and reference in App.AXAML. It is the same issue as in https://discord.com/channels/143867839282020352/1113257710595616819. Help would be appreciated.

Discord

Discord - A New Way to Chat with Friends & Communities

Discord is the easiest way to communicate over voice, video, and text. Chat, hang out, and stay close with your friends and communities.

108 Replies

Jimmacle•9mo ago

do you have the source code and screenshots of the issue?

randomriderOP•9mo ago

ObservableCollection<BEURTINFO> BeurtenGRID {get;} = new ObservableCollection<BEURTINFO>();//in top of code
//in function
for (int i = 0; i < jsonObj.Length; i++)//jsonObj is the parsed JSON string from server
{
BeurtenGRID.Add(new BEURTINFO( jsonObj[i].username, formatTime(Convert.ToInt32(jsonObj[i].time)).ToString(), jsonObj[i].devices.ToString()));
}
//bottom of code
public class BEURTINFO
{
 public string Username { get; set; }
 public string Time { get; set; }
 public string Devices { get; set; }
 public BEURTINFO(string username, string time, string devices) { 
  Username = username;
  Time = time; 
  Devices = devices; 
 }
}

ObservableCollection<BEURTINFO> BeurtenGRID {get;} = new ObservableCollection<BEURTINFO>();//in top of code
//in function
for (int i = 0; i < jsonObj.Length; i++)//jsonObj is the parsed JSON string from server
{
BeurtenGRID.Add(new BEURTINFO( jsonObj[i].username, formatTime(Convert.ToInt32(jsonObj[i].time)).ToString(), jsonObj[i].devices.ToString()));
}
//bottom of code
public class BEURTINFO
{
 public string Username { get; set; }
 public string Time { get; set; }
 public string Devices { get; set; }
 public BEURTINFO(string username, string time, string devices) { 
  Username = username;
  Time = time; 
  Devices = devices; 
 }
}

randomriderOP•9mo ago

<Design.DataContext>
<vm:MainViewModel></vm:MainViewModel>
</Design.DataContext>
<DataGrid Loaded="DataGrid_Loaded"
      ItemsSource="{Binding BeurtenGRID}"
      x:Name="beurtenGrid"
      Margin="20"
      IsReadOnly="False"
      CanUserReorderColumns="False"
      CanUserResizeColumns="False"
      CanUserSortColumns="True"
      GridLinesVisibility="All"
      BorderThickness="1" BorderBrush="Gray">
        <DataGrid.Columns>
            <DataGridTextColumn Header="Gebruikersnaam"  Binding="{Binding Username}" Width="300" />
                        <DataGridTextColumn Header="Duratief/Data" Binding="{Binding Time}" Width="200"/>
                        <DataGridTextColumn Header="Aantal apparaten" Binding="{Binding Devices}" Width="200">
                </DataGrid.Columns>
</DataGrid>

<Design.DataContext>
<vm:MainViewModel></vm:MainViewModel>
</Design.DataContext>
<DataGrid Loaded="DataGrid_Loaded"
      ItemsSource="{Binding BeurtenGRID}"
      x:Name="beurtenGrid"
      Margin="20"
      IsReadOnly="False"
      CanUserReorderColumns="False"
      CanUserResizeColumns="False"
      CanUserSortColumns="True"
      GridLinesVisibility="All"
      BorderThickness="1" BorderBrush="Gray">
        <DataGrid.Columns>
            <DataGridTextColumn Header="Gebruikersnaam"  Binding="{Binding Username}" Width="300" />
                        <DataGridTextColumn Header="Duratief/Data" Binding="{Binding Time}" Width="200"/>
                        <DataGridTextColumn Header="Aantal apparaten" Binding="{Binding Devices}" Width="200">
                </DataGrid.Columns>
</DataGrid>

Jimmacle•9mo ago

what is the height of the data grid (using the debug tools)? are you sure it actually has room to display the table? or try specifying a fixed height to see if that makes a difference

randomriderOP•9mo ago

I changed the height and still nothing

leowest•9mo ago

did u add the styles in the resources?

randomriderOP•9mo ago

yes i did in app.axaml

leowest•9mo ago

App.axaml needs to have

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

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

randomriderOP•9mo ago

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

    <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="GIP_av.App"
             RequestedThemeVariant="Light">
             <!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. -->

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

leowest•9mo ago

mmm could it be a color issue? can u set the background to say black or the columns text color to black I've had that issue on my example

randomriderOP•9mo ago

in the documentation it says that it uses MVVM for biding, could it be that?

leowest•9mo ago

I mean it depends on your code I would need to see more of your project to tell if you're using MVVM or not but the fact your using ObservableCollection assuming that is a ViewModel or in the DataContext it should load can you show me an image of your solution explorer so I can see what u have in there preferable with the folders collapsed

leowest•9mo ago

if u have something like this

leowest•9mo ago

changes are u already have the MVVM hooked and just didnt know

randomriderOP•9mo ago

leowest•9mo ago

ok so you only have MVVM set for 1 view

leowest•9mo ago

can u show me the code for these 2 files

leowest•9mo ago

and

leowest•9mo ago

please use the site below to $paste it

MODiX•9mo ago

If your code is too long, you can post to https://paste.mod.gg/ and copy the link into chat for others to see your shared code!

randomriderOP•9mo ago

<Window 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="GIP_av.BeurtenBekijken"
        xmlns:vm="using:GIP_av.ViewModels"
        Title="BeurtenBekijken"
        ExtendClientAreaToDecorationsHint="True"
        ExtendClientAreaChromeHints="NoChrome"
        ExtendClientAreaTitleBarHeightHint="-1"
        WindowState="Maximized"
        SystemDecorations="BorderOnly">
    <StackPanel>
        <Design.DataContext>
            <vm:MainViewModel></vm:MainViewModel>
        </Design.DataContext>
        <DataGrid Loaded="DataGrid_Loaded"
      ItemsSource="{Binding BeurtenGRID}"
      x:Name="beurtenGrid"
      Margin="20"
      IsReadOnly="False"
      CanUserReorderColumns="False"
      CanUserResizeColumns="False"
      CanUserSortColumns="True"
      GridLinesVisibility="All"
      BorderThickness="1" BorderBrush="Gray"
                  Height="300">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Gebruikersnaam"  Binding="{Binding Username}"
                                    Width="300" Foreground="Black" />
                <DataGridTextColumn Header="Duratief/Data" Binding="{Binding Time}" 
                                    Width="200"/>
                <DataGridTextColumn Header="Aantal apparaten" Binding="{Binding Devices}" 
                                    Width="200"/>
            </DataGrid.Columns>
        </DataGrid>
        <Button
    Click="Sluiten_Click"
    FontSize="18"
    HorizontalAlignment="Center"
    VerticalAlignment="Bottom"
            >Sluiten</Button>
    </StackPanel>
</Window>

<Window 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="GIP_av.BeurtenBekijken"
        xmlns:vm="using:GIP_av.ViewModels"
        Title="BeurtenBekijken"
        ExtendClientAreaToDecorationsHint="True"
        ExtendClientAreaChromeHints="NoChrome"
        ExtendClientAreaTitleBarHeightHint="-1"
        WindowState="Maximized"
        SystemDecorations="BorderOnly">
    <StackPanel>
        <Design.DataContext>
            <vm:MainViewModel></vm:MainViewModel>
        </Design.DataContext>
        <DataGrid Loaded="DataGrid_Loaded"
      ItemsSource="{Binding BeurtenGRID}"
      x:Name="beurtenGrid"
      Margin="20"
      IsReadOnly="False"
      CanUserReorderColumns="False"
      CanUserResizeColumns="False"
      CanUserSortColumns="True"
      GridLinesVisibility="All"
      BorderThickness="1" BorderBrush="Gray"
                  Height="300">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Gebruikersnaam"  Binding="{Binding Username}"
                                    Width="300" Foreground="Black" />
                <DataGridTextColumn Header="Duratief/Data" Binding="{Binding Time}" 
                                    Width="200"/>
                <DataGridTextColumn Header="Aantal apparaten" Binding="{Binding Devices}" 
                                    Width="200"/>
            </DataGrid.Columns>
        </DataGrid>
        <Button
    Click="Sluiten_Click"
    FontSize="18"
    HorizontalAlignment="Center"
    VerticalAlignment="Bottom"
            >Sluiten</Button>
    </StackPanel>
</Window>

leowest•9mo ago

post it to the link pls easier to read since its multiple files

randomriderOP•9mo ago

leowest•9mo ago

or if u have github u can push and i can check your github too either way works

randomriderOP•9mo ago

i pasted it in the link

leowest•9mo ago

u click save then u copy and paste the url

randomriderOP•9mo ago

https://paste.mod.gg/rndklfgizixx/0

BlazeBin - rndklfgizixx

A tool for sharing your source code with the world!

leowest•9mo ago

where is the rest? its 6 files

randomriderOP•9mo ago

oh sorry only read the first messege

leowest•9mo ago

but yeah you're not using MVVM you're using code behind at least for the file u sent in

randomriderOP•9mo ago

how do i use mvvm then?

leowest•9mo ago

I will check the other files and then I will try to explain I am trying to figure out how are u managing the views for now

randomriderOP•9mo ago

https://paste.mod.gg/zuoxcpvvjbwm/4 here are the files

BlazeBin - zuoxcpvvjbwm

A tool for sharing your source code with the world!

leowest•9mo ago

did u change in the

randomriderOP•9mo ago

i just use the name property like 'x:Name'

leowest•9mo ago

ok so did u change in the App.axaml.cs the window it was loading? because otherwise when u run you app it would open MainWindow and not BeurtenBekijken

randomriderOP•9mo ago

no because the mainwindow is meant to be opened first and from that window you can open other windows

randomriderOP•9mo ago

https://github.com/JerkoLannoo/GIP_avalonia here is the entire source code

GitHub

GitHub - JerkoLannoo/GIP_avalonia: GIP terminal Avalonia

GIP terminal Avalonia. Contribute to JerkoLannoo/GIP_avalonia development by creating an account on GitHub.

leowest•9mo ago

am I blind I dont see where u open it ok thx let me check AH ok found it

randomriderOP•9mo ago

it opens from 'dashboard.axaml'

leowest•9mo ago

ok yeah so you're writing this as if it was winform that is not normally how u work with xaml

randomriderOP•9mo ago

yes

leowest•9mo ago

this is normally how it goes down MainWindow -- this is just a shell |-- MainView -- this is the main page that open inside the shell MainWindow So you would have a navigation on either your MainWindow or MainView where u would open the new pages u dont normally open completely new windows like u do in winforms with WPF/Avalonia that's why I was a bit confused but that aside as for MVVM, you have your View, then you Have the ViewModel, and then you bind the 2 together via the DataContext so usually u dont write code in the axaml.cs just in some scenarios so in your case in the file BeurtenBekijken you could do

public BeurtenBekijken()
{
    DataContext = this;
    InitializeComponent();
}

public BeurtenBekijken()
{
    DataContext = this;
    InitializeComponent();
}

and your binding should work its not the best approach but given how u've gone so far its way too much for me help u fix to go back to right MVVM and how to write xaml

randomriderOP•9mo ago

thanks! this worked for me! i write my code this way because i am used to winforms and i just need something that runs fast on a raspberry pi

leowest•9mo ago

I strongly suggest u tried writing another simpler project following MVVM u will see how much easier it is and how it improves your code 10 fold yeah I understood that, but its a shame at the same time because you're losing a lot doing so in that manner $close

MODiX•9mo ago

Use the /close command to mark a forum thread as answered

randomriderOP•9mo ago

so you can just access the axaml elements directly from c# then?

leowest•9mo ago

yes but then u break MVVM completly by naming the controls i.e.: like U said earlier... x:Name="Something" MVVM is really not that hard, but if you're coming from winform its not simple to digest

randomriderOP•9mo ago

ok, but i'll first try to finish to program this way, and than try to use mvvm, since most of the UI is static

leowest•9mo ago

that's fair reason why I showed how to apply the DataContext with what u had 😉

randomriderOP•9mo ago

ok, thank again for the help! Maybe I should use the MVVM method, because now it can't compile because it can't find tje bindings.

leowest•9mo ago

what is the error message

randomriderOP•9mo ago

Avalonia error AVLN:0004: Unab le to resolve suitable regular or attached property ItemsSource on type Avalonia.Controls.DataGrid:Avalonia.Controls.Da taGrid Line 15, position 4.

leowest•9mo ago

did u update your github iwth the latest changes? that is on the datagrid file right?

randomriderOP•9mo ago

yes

leowest•9mo ago

are u sure it s up to date?

randomriderOP•9mo ago

i've just updated it in github

leowest•9mo ago

ok try cleaning and rebuilding your solution

randomriderOP•9mo ago

i get the same error it does build fine though

leowest•9mo ago

it builds without error and fails when u run?

randomriderOP•9mo ago

no, it builds and runs fine but when i compile for arm64 linuc in cmd it throws that error

leowest•9mo ago

TIP: next time when its working, commit, then keep working. Do small git commits so u can evaluate changes that could have broken things dont write 2k lines of code to commit commit in small chunks did A, its working, commit ah ok that is a different problem you have libraries that are specific to windows u have to change that

randomriderOP•9mo ago

but when i don't include the binding it compiles just fine it is this line: "ItemsSource="{Binding BeurtenGRID}""

leowest•9mo ago

https://www.nuget.org/packages/QrCode.Net

QrCode.Net 0.4.0

.Net QrCode Encoder

leowest•9mo ago

bad if that was the case it would not work on windows either

leowest•9mo ago

https://www.nuget.org/packages/Zen.Barcode.Rendering.Framework

Zen.Barcode.Rendering.Framework 3.1.10729.1

Barcode Rendering Framework Release.3.1.10729 from http://barcoderender.codeplex.com/ 30th June 2014 The bar-code rendering framework quite simply encapsulates the native rendering of barcode symbologies without requiring third-party fonts. The framework makes it easy to define new symbologies and use the resultant images from web or forms appl...

leowest•9mo ago

you have a few libraries that do not run on linux so start by removing those and elimitate the possibilities

randomriderOP•9mo ago

leowest•9mo ago

also remove this to avoid confusion as well x:Name="beurtenGrid" since you're not using it

randomriderOP•9mo ago

leowest•9mo ago

check your Error List for any other warnings about libraries that work on windows only I think it will be NU.... error

leowest•9mo ago

it will show like that so basically anything that specifically targets .net framework relies on api's exclusive to windows and will not run on linux or mac etc

randomriderOP•9mo ago

github is updated

leowest•9mo ago

ok did u remvoe all the libraries that had the issue mentioned in the image above? think there was 3 or 4

randomriderOP•9mo ago

yes, no nuget errors anymore

leowest•9mo ago

ok and u still get that binding error on linux?

randomriderOP•9mo ago

yes

leowest•9mo ago

are u publishing? what options did u select

randomriderOP•9mo ago

this is the command:

dotnet build "./GIP_av.Desktop.csproj" -c Release -r linux-arm64 -v q /clp:ErrorsOnly

dotnet build "./GIP_av.Desktop.csproj" -c Release -r linux-arm64 -v q /clp:ErrorsOnly

leowest•9mo ago

then u zipped the linux-arm64 folder and unzipped the whole thing on your linux?

randomriderOP•9mo ago

no, i build for linux on my windows pc and move it to linux and than run it on linux

leowest•9mo ago

yes but you move the whole fodler with all the files inside of it not tjust theg exe or dll right

leowest•9mo ago

u need all the files inside

randomriderOP•9mo ago

yes i do that, but i get an error when compiling it for linux on my windows pc

leowest•9mo ago

mmm

randomriderOP•9mo ago

so the linux-arm folder doesnt update

leowest•9mo ago

ok let me check ah I think I see the issue moment ok open your Desktop csproj and remove this line

      <PackageReference Include="Avalonia.Controls.DataGrid" Version="11.0.2" />

      <PackageReference Include="Avalonia.Controls.DataGrid" Version="11.0.2" />

it will only leave 1 line inside the itemsgroup then rigth click your GIP_av project and open nuget and install the datagrid there then clean/rebuild then u should be able to build to arm64

leowest•9mo ago

randomriderOP•9mo ago

yes it worked

leowest•9mo ago

👍 so basically it was nothing to do with the binding but the library being on the wrong project causing it to not recognize the control properties

randomriderOP•9mo ago

but how did it manage to run on windows then?

leowest•9mo ago

¯\_(ツ)_/¯ magic maybe because you were running on debug mode and for whatever reason in debug it just works on windows either way u dont want to add anything to Desktop project UNLESS is code specifically to run from it anything else should be on the library project as its what gets run on everything out of curiosity does it run on your raspberry?

randomriderOP•9mo ago

yes, and pretty fast

leowest•9mo ago

nice to know I have one myself but never ran avalonia on it so its all working now?

randomriderOP•9mo ago

yes, but there is one visual bug. It shows one row, and then when you scroll it shows the rest and makes the table bigger

randomriderOP•9mo ago

leowest•9mo ago

make sure u commit the last changes u did since building its working now 😉 well u dont define a height maybe if u do it might render differently Ah I see because its StackPanel change that to a Grid and see if it changes

randomriderOP•9mo ago

yes but then the margin top is too big, so i'll just use stackpanel width datagrid on fixed height

leowest•9mo ago

well u will have rendering issues then its not a visual bug but how stackpanel works to render things with grid all u have to do is split into 2 rows give the first * and the second however much space u want to give your button add Grid.Row="1" to your button and that's it

randomriderOP•9mo ago

yes that worked

leowest•9mo ago

👍

randomriderOP•9mo ago

thanks for your help (again)!

leowest•9mo ago

no worries just a reminder you should really start a fresh project later and learn MVVM with AValonia and Community Toolkit u will much easier all of waht u did turns into and how much cleaner the codes turns as well

randomriderOP•9mo ago

ok, i will definitely look into that

Gaming

Programming

✅ Avalonia not showing rows in datagrid