datagrid control

[tchtang]

Describe the bug

I create new project, run in desktop can open window with message 'Welcome to Avalonia'
Want to add datagrid, but cannot do so

To Reproduce

1. from https://docs.avaloniaui.net/docs/reference/controls/datagrid/

2. dotnet add package Avalonia.Controls.DataGrid

3. get compile error
   
   

4. Update patch
   

become

5. Press F5, cannot run
   

6. Have not add datagrid control yet
   

Expected behavior

No response

Avalonia version

11.1.0-beta2

OS

Windows

Additional context

No response

[rabbitism]

You need to upgrade to 11.0.10 instead of 11.1beta

[tchtang]

version was 11.0.2
after done step 2, has compile error

cannot find version 11.0.1
installed from https://marketplace.visualstudio.com/items?itemName=AvaloniaTeam.AvaloniaVS

nuget also no 11.0.1

[rabbitism]

11.0.10

[tchtang]

link please?

[tchtang]

1. can see welcome message from 11.0.2
   

2. from https://www.nuget.org/packages/Avalonia/11.0.10
   dotnet add package Avalonia --version 11.0.10
   

3. compile no error, but F5
   
   whole window only can see title bar

[tchtang]

installed version 11.5 become 11.0.2

[rabbitism]

nuget version has nothing to do with extension. just open your csproj file and edit every version related to Avalonia to 11.0.10.

[rabbitism]

And using nuget manager you can choose the version here

[tchtang]

thank you your help but still cannot upgrade to 11.0.10
kindly provide link to upgrade all version to 11.0.10

[timunie]

Please don't open bug reports for questions. Use discussions instead. Will convert this one later when I have time to.

[rabbitism]

When I say every, I mean every. Your desktop, android, ios and browser project is still 11.0.2

[thevortexcloud]

Also the VS package manager is a real pain to use with a large dependency chain like Avalonia (it often complains about transient conflicts which forces you to upgrade things in a specific order). It's easier to just manually upgrade everything by editing your project file. You should be able to upgrade all packages fairly easily though by checking the box on the updates tab.

[tchtang]

@rabbitism do you see below error?

[tchtang]

@thevortexcloud may i know how to edit project file

[thevortexcloud]

If you are using a project using the new SDK format (which you likely are if you have made a new project), you can double click the project in the solution explorer. If you are using the old format, you need to unload the project and then right click it, and press edit. Or you can just open it directly with an external text editor.

[thevortexcloud]

I suggest reading the official .NET docs and watching/reading a few tutorials. Most of this has nothing directly to do with Avalonia.

https://learn.microsoft.com/en-us/dotnet/core/project-sdk/overview
https://learn.microsoft.com/en-us/dotnet/standard/frameworks

Anyway, you should not have android/iOS package references in a project that does not target the correct TFM.

[workgroupengineering]

You have mixed Desktop, iOS and Android package. Single project is experimetal feature.

You should use following comnand to create new Cross platform project from template

dotnet new avalonia.xplat  -n MyApp

or select Cross Platform Application template.

After creation. You have more project, each for plat (MyApp.Android.cspoj, ...).

The Cross plat xaml and code should put into MyApp.csproj

Add DataGrid package to MyApp.csproj

Rebuild the solution

Edit app.axaml and add DataGrid Style

[tchtang]

1. where to install latest version?
   Previously installed from https://marketplace.visualstudio.com/items?itemName=AvaloniaTeam.AvaloniaVS

2. Create new project, no more 3 platform (windows + android + ios), just android only, still error
   

I just want use datagrid control..

[MikeCodesDotNET]

I've thrown together a sample.

Example.zip

[tchtang]

@MikeCodesDotNET

thank you your help
I can add datagrid control, only can run in desktop, but in android display blank

where I need to set

sample code

<Grid>
	<Grid.RowDefinitions>
		<RowDefinition Height="Auto" />
		<RowDefinition Height="Auto" />
		<RowDefinition Height="Auto" />
	</Grid.RowDefinitions>
	<TextBlock Grid.Row="0" Text="Start" />
	<DataGrid Grid.Row="1" Margin="20" ItemsSource="{Binding People}"
      AutoGenerateColumns="True" IsReadOnly="True"
      GridLinesVisibility="All"
      BorderThickness="1" BorderBrush="Gray">
	</DataGrid>
	<TextBlock Grid.Row="2" Text="End" />
</Grid>

[timunie]

DataGrid requires a given size. So RowSize Auto doesn't work here. Better to change it to * which means eat up remaining space.

<Grid>
	<Grid.RowDefinitions>
		<RowDefinition Height="Auto" />
!		<RowDefinition Height="*" />
		<RowDefinition Height="Auto" />
	</Grid.RowDefinitions>
	<TextBlock Grid.Row="0" Text="Start" />
	<DataGrid Grid.Row="1" Margin="20" ItemsSource="{Binding People}"
      AutoGenerateColumns="True" IsReadOnly="True"
      GridLinesVisibility="All"
      BorderThickness="1" BorderBrush="Gray">
	</DataGrid>
	<TextBlock Grid.Row="2" Text="End" />
</Grid>

[tchtang]

above is control in <Window>

this one is control in <UserControl>

[tchtang]

<Window> desktop mode

<Window> android mode

<UserControl> desktop mode

<UserControl> android mode

[MikeCodesDotNET]

It's working perfectly here, so I've no idea at this point what you're doing wrong.

[tchtang]

@MikeCodesDotNET, kindly please upload your source code

[timunie]

@tchtang the other way around. You file your code here. A minimal sample, not all of it.

[tchtang]

due to file size upload has limit, i delete some folder, please rebuild
please find attached code
test3.zip

[timunie]

Check your App.axaml.cs file. It is a Linux DRM Application which seems to break Androind

[timunie]

Also missing StyleInclude in App.axaml:

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

See: https://docs.avaloniaui.net/docs/reference/controls/datagrid/#include-datagrid-styles

[tchtang]

thank you, both desktop and android can see datagrid

[tchtang]

1. would like to know, which source code I do wrong

2. have another question. understand when mentioned Window, first thought is Microsoft, as Android or iOS is non Microsoft. but I thought <Window> should not just restrict to Microsoft. <Window> should be as 'Application Form'. create new project with Android platform only, I cannot put control in <Window> as in previous post coz F5 just show blank. If a person write a small program, then need create 2 XML, <Window> and <UserControl> in order can run Android / iOS

[timunie]

2 => A window is a concept that desktops have (Windows, mac os, Linux). Android doesn't have such a concept.

[tchtang]

okay, thanks

[tchtang]

have compile error, please help, thank you very much

1. App.axaml
   a) how to set global font size
   copy from Best way to set application-wide FontSize? #7539
   
   

b) how to set style refer another style

c) DataGrid isnt will render slow if has large data?
coz need to know whether set

but above all four has compile error

2. MainView.axaml
   a) how to set control style refer to App.axaml
   
   

b)

c)

3. would like to know isnt visual studio problem coz during typing source code, no more appear any suggestion
   example during typing <DataGrid ....... no appear any datagrid properties if i press space key
   example key in < only, no suggestion
   just no pop up at all during typing
   

this happen during i have compile error, if i clear all compile error, then have auto pop up / suggestion during typing. isnt visual studio problem?

compile error also get go to wrong place example

if double the compile error, display

instead

[tchtang]

<ControlTheme x:Key="DataGridStyle2" TargetType="DataGrid" BaseOn="{StaticResource {x:Type DataGrid}}">

has compile error

[tchtang]

DataGridColumn and derivated does not support Name property because it non implemented INamed

how to set column name at code behind

[workgroupengineering]

<ControlTheme x:Key="DataGridStyle2" TargetType="DataGrid" BaseOn="{StaticResource {x:Type DataGrid}}">

has compile error

My fault it is BasedOn

[workgroupengineering]

DataGridColumn and derivated does not support Name property because it non implemented INamed

how to set column name at code behind

The question is: why do you need it?

You can do like

<DataGrid x:Name="MyGrid" ...>
...

in code behind

 var dgc =  MyGrid.Columns[indexOfColumnYouWant];

[tchtang]

the application need run for multilanguage based on application setting. i need set the column name based on language.
still cannot set column name

<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"
             xmlns:vm="clr-namespace:AvaloniaApplication1.ViewModels"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="AvaloniaApplication1.Views.MainView"
             x:DataType="vm:MainViewModel"
			 Initialized="MainView_Initialized">
			 

<DataGrid x:Name="datagrid1" Grid.Row="2" BorderBrush="Purple" BorderThickness="3" ItemsSource="{Binding People}">

<DataGrid.Columns>
	<DataGridTemplateColumn Width="Auto" CellStyleClasses="column1">
		<DataGridTemplateColumn.CellTemplate>
			<DataTemplate>
				<TextBlock Foreground="Red" Text="{CompiledBinding Name}" TextWrapping="Wrap" />
			</DataTemplate>
		</DataGridTemplateColumn.CellTemplate>
		<DataGridTemplateColumn.HeaderTemplate>
			<DataTemplate>
				<TextBlock Foreground="Green" Text="column1" />
			</DataTemplate>
		</DataGridTemplateColumn.HeaderTemplate>
	</DataGridTemplateColumn>
	
	
    public partial class MainView : UserControl
    {
        public MainView()
        {
            InitializeComponent();
        }

        private void MainView_Initialized(object sender, EventArgs e)
        {
            datagrid1.Columns[0].Header = "column 11";
        }
    }  
    

[bearyung]

I think your initial question "Cannot add datagrid control" has been answered by @MikeCodesDotNET 5 days ago, it's better to mark this Q&A as "Answered" and open new question on the usage of the datagrid. :)

[tchtang]

current latest version is 11.0.10, mike recommend use version 11.0.6, may i know can i use 11.0.10

[tchtang]

may i know how to set textblock foreground in App.axaml

	<Application.Resources>
		<x:Double x:Key="ControlContentThemeFontSize">34</x:Double>


<ControlTheme x:Key="DataGridStyle2" TargetType="DataGrid" BasedOn="{StaticResource {x:Type DataGrid}}">
	<Setter Property="Background" Value="LightGray" />
	<Setter Property="Foreground" Value="Black" />
</ControlTheme>
<ControlTheme x:Key="TextBlockStyle" TargetType="{x:Type TextBlock}">
	<Setter Property="FontSize" Value="24" />
	<Setter Property="Foreground" Value="Yellow" />
</ControlTheme>
<ControlTheme x:Key="TextBlockStyle2" BasedOn="{StaticResource TextBlockStyle}" TargetType="{x:Type TextBlock}" />

in wpf is

<Style x:Key="TextBlockStyle" TargetType="{x:Type TextBlock}">
	<Setter Property="FontSize" Value="24" />
	<Style.Triggers>
		<Trigger Property="IsEnabled" Value="False">
			<Setter Property="Foreground" Value="LightGray" />
		</Trigger>
		<Trigger Property="IsEnabled" Value="True">
			<Setter Property="Foreground" Value="White" />
		</Trigger>
	</Style.Triggers>
</Style>
<Style BasedOn="{StaticResource TextBlockStyle}" TargetType="{x:Type TextBlock}" />

due to application is background black, foreground white

another is global font size is 34, if textblock need set 24 also cannot. the welcome message and start, end still is 34

[tchtang]

Avalonia does not have triggers using Conditonal Classes or Behaviors. I like first.

thank you, found link

isnt can make the selected become the color itself instead overlap color

<ControlTheme x:Key="DataGridStyle2" TargetType="DataGrid" BasedOn="{StaticResource {x:Type DataGrid}}">
	<Setter Property="Background" Value="LightBlue" />
	<Setter Property="Foreground" Value="Black" />
</ControlTheme>

<DataGrid x:Name="datagrid1" Grid.Row="2" BorderBrush="Purple" BorderThickness="3" ItemsSource="{Binding People}"
		  Theme="{StaticResource DataGridStyle2}">
	<DataGrid.Styles>
		<Style Selector="DataGridCell.column1">
			<Setter Property="BorderBrush" Value="Blue" />
			<Setter Property="BorderThickness" Value="2" />
		</Style>
		<Style Selector="DataGridCell.column2">
			<Setter Property="BorderBrush" Value="Green" />
			<Setter Property="BorderThickness" Value="2" />
		</Style>
		<Style Selector="DataGridRow:selected">
			<Setter Property="Background" Value="Yellow" />
		</Style>
	</DataGrid.Styles>

[tchtang]

sorry i still dont know how to convert trigger, please help, thank you

wpf:

<DataGrid AlternationCount="2">
<DataGrid.Resources>
	<Style TargetType="{x:Type DataGridRow}">
		<Setter Property="BorderThickness" Value="0" />
		<Style.Triggers>
			<Trigger Property="ItemsControl.AlternationIndex" Value="0">
				<!-- dark gray -->
				<Setter Property="Background" Value="#FF2D2D2D" />
			</Trigger>
			<Trigger Property="ItemsControl.AlternationIndex" Value="1">
				<!-- black -->
				<Setter Property="Background" Value="#FF252525" />
			</Trigger>

[tchtang]

datagrid popup no display all properties

example last week i remember got see CellStyleClasses, but now cannot see

[tchtang]

how to hide the border for the column header

<ControlTheme x:Key="DataGridStyle2" TargetType="DataGrid" BasedOn="{StaticResource {x:Type DataGrid}}">
	<Setter Property="Background" Value="LightBlue" />
	<Setter Property="Foreground" Value="Black" />
	<Setter Property="GridLinesVisibility" Value="None" />
</ControlTheme>

<DataGrid x:Name="datagrid1" Grid.Row="2" BorderBrush="Purple" BorderThickness="3" ItemsSource="{Binding People}"
		  Theme="{StaticResource DataGridStyle2}">
	<DataGrid.Styles>
		<Style Selector="DataGridCell.column1">
			<Setter Property="BorderBrush" Value="Blue" />
			<Setter Property="BorderThickness" Value="2" />
		</Style>
		<Style Selector="DataGridCell.column2">
			<Setter Property="BorderBrush" Value="Green" />
			<Setter Property="BorderThickness" Value="2" />
		</Style>
		<Style Selector="DataGridRow:selected">
			<Setter Property="Background" Value="Yellow" />
		</Style>
	</DataGrid.Styles>
	<DataGrid.Columns>
		<!-- column 1 -->
		<DataGridTemplateColumn Width="Auto" CellStyleClasses="column1">
			<DataGridTemplateColumn.CellTemplate>
				<DataTemplate>
					<TextBlock Foreground="Red" Text="{CompiledBinding Name}" TextWrapping="Wrap" />
				</DataTemplate>
			</DataGridTemplateColumn.CellTemplate>
			<DataGridTemplateColumn.HeaderTemplate>
				<DataTemplate>
					<TextBlock Foreground="Green" Text="column1" />
				</DataTemplate>
			</DataGridTemplateColumn.HeaderTemplate>
		</DataGridTemplateColumn>
		<!-- column 2 -->
		<DataGridTemplateColumn Width="5*">
			<DataGridTemplateColumn.CellTemplate>
				<DataTemplate>
					<TextBlock Foreground="Red" Text="{CompiledBinding Description}" TextWrapping="Wrap" />
				</DataTemplate>
			</DataGridTemplateColumn.CellTemplate>
			<DataGridTemplateColumn.HeaderTemplate>
				<DataTemplate>
					<TextBlock Foreground="Green" Text="column2" />
				</DataTemplate>
			</DataGridTemplateColumn.HeaderTemplate>
		</DataGridTemplateColumn>
		<!-- column 3 -->
		<DataGridTemplateColumn Width="5*">
			<DataGridTemplateColumn.CellTemplate>
				<DataTemplate>
					<ComboBox x:Name="comboBox1" Foreground="Blue" ItemsSource="{CompiledBinding ListData1}">
						<ComboBox.ItemTemplate>
							<DataTemplate>
								<TextBlock Foreground="Black" Text="{Binding Data1}" />
							</DataTemplate>
						</ComboBox.ItemTemplate>
					</ComboBox>
				</DataTemplate>
			</DataGridTemplateColumn.CellTemplate>
			<DataGridTemplateColumn.HeaderTemplate>
				<DataTemplate>
					<TextBlock Foreground="Green" Text="column3" />
				</DataTemplate>
			</DataGridTemplateColumn.HeaderTemplate>
		</DataGridTemplateColumn>
	</DataGrid.Columns>
</DataGrid>

Recording.2024-05-20.103445.mp4

[tchtang]

how to hide the border for the datagridcell if click the row

<DataGrid x:Name="datagrid1" Grid.Row="2" BorderBrush="Purple" BorderThickness="3" ItemsSource="{Binding People}"
				  Theme="{StaticResource DataGridStyle2}">
	<DataGrid.Styles>
		<Style Selector="DataGridCell.column1">
			<Setter Property="BorderThickness" Value="0" />
		</Style>
		<Style Selector="DataGridCell.column2">
			<Setter Property="BorderBrush" Value="Green" />
			<Setter Property="BorderThickness" Value="2" />
		</Style>
		<Style Selector="DataGridRow:selected">
			<Setter Property="Background" Value="Yellow" />
			<Setter Property="BorderBrush" Value="Black" />
			<Setter Property="BorderThickness" Value="2" />
		</Style>
	</DataGrid.Styles>
	<DataGrid.Columns>
		<!-- column 1 -->
		<DataGridTemplateColumn Width="Auto" CellStyleClasses="column1">
			<DataGridTemplateColumn.CellTemplate>
				<DataTemplate>
					<TextBlock Foreground="Red" Text="{CompiledBinding Name}" TextWrapping="Wrap" />
				</DataTemplate>
			</DataGridTemplateColumn.CellTemplate>
			<DataGridTemplateColumn.HeaderTemplate>
				<DataTemplate>
					<TextBlock Foreground="Green" Text="column1" />
				</DataTemplate>
			</DataGridTemplateColumn.HeaderTemplate>
		</DataGridTemplateColumn>
		<!-- column 2 -->
		<DataGridTemplateColumn Width="5*" CellStyleClasses="column1">
			<DataGridTemplateColumn.CellTemplate>
				<DataTemplate>
					<TextBlock Foreground="Red" Text="{CompiledBinding Description}" TextWrapping="Wrap" />
				</DataTemplate>
			</DataGridTemplateColumn.CellTemplate>
			<DataGridTemplateColumn.HeaderTemplate>
				<DataTemplate>
					<TextBlock Foreground="Green" Text="column2" />
				</DataTemplate>
			</DataGridTemplateColumn.HeaderTemplate>
		</DataGridTemplateColumn>
		<!-- column 3 -->
		<DataGridTemplateColumn Width="5*" CellStyleClasses="column1">
			<DataGridTemplateColumn.CellTemplate>
				<DataTemplate>
					<ComboBox x:Name="comboBox1" Foreground="Blue" ItemsSource="{CompiledBinding ListData1}">
						<ComboBox.ItemTemplate>
							<DataTemplate>
								<TextBlock Foreground="Black" Text="{Binding Data1}" />
							</DataTemplate>
						</ComboBox.ItemTemplate>
					</ComboBox>
				</DataTemplate>
			</DataGridTemplateColumn.CellTemplate>
			<DataGridTemplateColumn.HeaderTemplate>
				<DataTemplate>
					<TextBlock Foreground="Green" Text="column3" />
				</DataTemplate>
			</DataGridTemplateColumn.HeaderTemplate>
		</DataGridTemplateColumn>
	</DataGrid.Columns>
</DataGrid>

Recording.2024-05-20.114809.mp4

[MikeCodesDotNET]

Please open new discussions rather than adding here. Given the questions are rather simple, I suggest joining the Telegram chat.