Net 교차 플랫폼 UI 프레임워크 Avalonia 항목 - DataGrid 사용

Avalonia에서 DataGrid 사용

DataGrid 클라이언트 UI에서 데이터 테이블은 매우 중요한 컨트롤입니다 Avalonia.Controls.DataGrid.

DataGrid 패키지 설치

Nuget에 설치해야 함

여기에 이미지 설명 삽입

Avalonia 프레임워크 버전과 일치하는 버전 선택

Avalonia.Controls.DataGrid설치할 때 패키지 버전이 Avalonia 프레임워크 버전과 일치해야 한다는 점에 주의해야 합니다 . 그렇지 않으면 설치가 성공하지 못할 수 있습니다.

Avalonia 프레임워크 버전은 일반적으로 프로젝트 생성을 위해 선택된 "Avalonia 버전" 또는 0.10.18( 11.0.0-preview42023년 5월 22일 22:31:23)

여기에 이미지 설명 삽입

Avalonia 프레임워크 버전은 "Dependencies → Packages"에서도 볼 수 있습니다.

여기에 이미지 설명 삽입
여기에 이미지 설명 삽입

미리보기 버전을 사용하시는 경우, nuget 패키지 관리자에서 검색창 우측의 "시험판 버전 포함"을 체크하셔야 미리보기 버전을 보실 수 있습니다.

여기에 이미지 설명 삽입

DataGrid 사용

스타일 참조

App.axaml의 DataGrid 스타일 파일 참조(또는 사용된 다른 인터페이스에서 참조)

스타일 파일을 참조해야 합니다. 그렇지 않으면 DataGrid가 표시되지 않습니다.

<!--下面样式文件二选一-->
<StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Fluent.xaml"/>
<StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Simple.xaml"/>

여기에 이미지 설명 삽입

Fluent.xaml의 효과:

스타일 효과는 비교적 완전합니다
여기에 이미지 설명 삽입

Simple.xaml의 효과:

쉽게
여기에 이미지 설명 삽입

DataGrid 사용

DataGrid.ColumnsDataGrid의 사용은 열을 쓰는 WPF와 동일합니다.

WPF와의 차이점:

  1. 바인딩 속성은Items
  2. 그리고 많은 속성은 자체 값을 할당하여 초기화해야 합니다.
    1. 예를 들어 너비를 조정하기 위해 열 머리글을 드래그해야 하는 경우CanUserResizeColumns="True"
    2. 열 머리글을 드래그 앤 드롭하여 열 순서를 조정하고 직접 추가해야 합니다.CanUserReorderColumns="True"
 <DataGrid Name="MyDG" >
            <DataGrid.Columns>
                <DataGridTextColumn
                    Width="1*"
                    Binding="{Binding Id}"
                    Header="序号" />
                <DataGridTextColumn
                    Width="1*"
                    Binding="{Binding Name}"
                    Header="姓名" />
                <DataGridTextColumn
                    Width="1*"
                    Binding="{Binding Description}"
                    Header="姓名" />
            </DataGrid.Columns>
        </DataGrid>

씨#

  //后台绑定
  List<User> users = new List<User>();
  users.Add(new User() {
    
     Id=1,Name="张一",Description="1111111"});
  users.Add(new User() {
    
     Id=2,Name="张二",Description="2222222"});
  MyDG.Items = users;

디스플레이 효과:

여기에 이미지 설명 삽입

추천

출처blog.csdn.net/qq_39427511/article/details/130836629