Skip to content

Commit 98468b2

Browse files
friedcucumberfriedcucumber
authored
Update Readme.md
1 parent cf64125 commit 98468b2

File tree

1 file changed

+16
-337
lines changed

1 file changed

+16
-337
lines changed

‎Readme.md‎

Lines changed: 16 additions & 337 deletions
Original file line numberDiff line numberDiff line change
@@ -42,340 +42,19 @@ The DevExpress Data Grid for .NET MAUI is a data-aware control designed to prese
4242

4343
This example allows you to get started with the DataGridView component - bind it to a data source and configure its columns.
4444

45-
### Files to Look At
46-
47-
<!-- default file list -->
48-
* [MauiProgram.cs](./CS/DataGridExample/MauiProgram.cs)
49-
* [MainPage.xaml](./CS/DataGridExample/MainPage.xaml)
50-
* [Model.cs](./CS/DataGridExample/Model.cs)
51-
* [ViewModel.cs](./CS/DataGridExample/ViewModel.cs)
52-
<!-- default file list end -->
53-
54-
## How to Run This Application
55-
56-
1. Install a [.NET MAUI development](https://docs.microsoft.com/en-gb/dotnet/maui/get-started/installation) environment and open the solution in Visual Studio 2022.
57-
2. Register [your personal NuGet package source](https://nuget.devexpress.com/) in Visual Studio.
58-
If you are an active DevExpress [Universal](https://www.devexpress.com/subscriptions/universal.xml) customer or have registered our [free Xamarin UI controls](https://www.devexpress.com/xamarin/), this MAUI preview will be available in your personal NuGet feed automatically.
59-
3. Restore NuGet packages.
60-
4. Run the application on an iOS or Android emulator.
61-
62-
## How to Reproduce This Application
63-
64-
The following step-by-step tutorial details how to reproduce this application.
65-
66-
### Create a New MAUI Application and Add a Data Grid
67-
68-
Create a new .NET MAUI solution in Visual Studio 22 Preview. Refer to the following Microsoft documentation for more information on how to get started with .NET MAUI: [.NET Multi-platform App UI](https://docs.microsoft.com/en-gb/dotnet/maui/).
69-
70-
Register [your personal NuGet feed](https://nuget.devexpress.com/) as a package source in Visual Studio, if you are not an active DevExpress [Universal](https://www.devexpress.com/subscriptions/universal.xml) customer or have not yet registered our [free Xamarin UI controls](https://www.devexpress.com/xamarin/).
71-
72-
Install the **DevExpress.Maui.DataGrid** package from your NuGet feed.
73-
74-
In the *MauiProgram.cs* file, call the **UseDevExpress** method to register handlers for all DevExpress controls:
75-
76-
```cs
77-
using Microsoft.Maui;
78-
using Microsoft.Maui.Controls.Hosting;
79-
using Microsoft.Maui.Hosting;
80-
using DevExpress.Maui;
81-
82-
namespace DataGridExample {
83-
public static class MauiProgram {
84-
public static MauiApp CreateMauiApp() {
85-
var builder = MauiApp.CreateBuilder();
86-
builder
87-
.UseMauiApp<App>()
88-
.UseDevExpress()
89-
.ConfigureFonts(fonts => {
90-
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
91-
});
92-
return builder.Build();
93-
}
94-
}
95-
}
96-
```
97-
98-
In the *MainPage.xaml* file, use the *dxg* prefix to declare the **DevExpress.Maui.DataGrid** namespace and add a [DataGridView](http://docs.devexpress.devx/MAUI/DevExpress.Maui.DataGrid.DataGridView) object to the ContentPage:
99-
100-
```xaml
101-
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
102-
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
103-
x:Class="DataGridExample.MainPage"
104-
xmlns:dxg="clr-namespace:DevExpress.Maui.DataGrid;assembly=DevExpress.Maui.DataGrid">
105-
<dxg:DataGridView>
106-
</dxg:DataGridView>
107-
</ContentPage>
108-
```
109-
110-
### Create a Data Source
111-
In this example, the grid is bound to a collection of *Employee* objects - *EmployeeData*. Create a *Model.cs* file with the following classes:
112-
113-
```cs
114-
using System.Collections.ObjectModel;
115-
using Microsoft.Maui.Controls;
116-
using System;
117-
118-
namespace DataGridExample {
119-
public enum AccessLevel {
120-
Admin,
121-
User
122-
}
123-
124-
public class Employee {
125-
string name;
126-
127-
public string Name {
128-
get { return name; }
129-
set {
130-
name = value;
131-
if (Photo == null && !String.IsNullOrEmpty(name))
132-
Photo = ImageSource.FromFile(name.ToLower().Replace(" ", "_") + ".jpg");
133-
}
134-
}
135-
136-
public Employee(string name) {
137-
this.Name = name;
138-
}
139-
public ImageSource Photo { get; set; }
140-
public DateTime BirthDate { get; set; }
141-
public DateTime HireDate { get; set; }
142-
public string Position { get; set; }
143-
public string Address { get; set; }
144-
public string Phone { get; set; }
145-
public AccessLevel Access { get; set; }
146-
public bool OnVacation { get; set; }
147-
}
148-
149-
public class EmployeeData {
150-
void GenerateEmployees() {
151-
ObservableCollection<Employee> result = new ObservableCollection<Employee>();
152-
result.Add(
153-
new Employee("Nancy Davolio") {
154-
BirthDate = new DateTime(1978, 12, 8),
155-
HireDate = new DateTime(2005, 5, 1),
156-
Position = "Sales Representative",
157-
Address = "98122, 507 - 20th Ave. E. Apt. 2A, Seattle WA, USA",
158-
Phone = "(206) 555-9857",
159-
Access = AccessLevel.User,
160-
OnVacation = false
161-
}
162-
);
163-
result.Add(
164-
new Employee("Andrew Fuller") {
165-
BirthDate = new DateTime(1965, 2, 19),
166-
HireDate = new DateTime(1992, 8, 14),
167-
Position = "Vice President, Sales",
168-
Address = "98401, 908 W. Capital Way, Tacoma WA, USA",
169-
Phone = "(206) 555-9482",
170-
Access = AccessLevel.Admin,
171-
OnVacation = false
172-
}
173-
);
174-
result.Add(
175-
new Employee("Janet Leverling") {
176-
BirthDate = new DateTime(1985, 8, 30),
177-
HireDate = new DateTime(2002, 4, 1),
178-
Position = "Sales Representative",
179-
Address = "98033, 722 Moss Bay Blvd., Kirkland WA, USA",
180-
Phone = "(206) 555-3412",
181-
Access = AccessLevel.User,
182-
OnVacation = false
183-
}
184-
);
185-
result.Add(
186-
new Employee("Margaret Peacock") {
187-
BirthDate = new DateTime(1973, 9, 19),
188-
HireDate = new DateTime(1993, 5, 3),
189-
Position = "Sales Representative",
190-
Address = "98052, 4110 Old Redmond Rd., Redmond WA, USA",
191-
Phone = "(206) 555-8122",
192-
Access = AccessLevel.User,
193-
OnVacation = false
194-
}
195-
);
196-
result.Add(
197-
new Employee("Steven Buchanan") {
198-
BirthDate = new DateTime(1955, 3, 4),
199-
HireDate = new DateTime(1993, 10, 17),
200-
Position = "Sales Manager",
201-
Address = "SW1 8JR, 14 Garrett Hill, London, UK",
202-
Phone = "(71) 555-4848",
203-
Access = AccessLevel.User,
204-
OnVacation = true
205-
}
206-
);
207-
result.Add(
208-
new Employee("Michael Suyama") {
209-
BirthDate = new DateTime(1981, 7, 2),
210-
HireDate = new DateTime(1999, 10, 17),
211-
Position = "Sales Representative",
212-
Address = "EC2 7JR, Coventry House Miner Rd., London, UK",
213-
Phone = "(71) 555-7773",
214-
Access = AccessLevel.User,
215-
OnVacation = false
216-
}
217-
);
218-
result.Add(
219-
new Employee("Robert King") {
220-
BirthDate = new DateTime(1960, 5, 29),
221-
HireDate = new DateTime(1994, 1, 2),
222-
Position = "Sales Representative",
223-
Address = "RG1 9SP, Edgeham Hollow Winchester Way, London, UK",
224-
Phone = "(71) 555-5598",
225-
Access = AccessLevel.User,
226-
OnVacation = false
227-
}
228-
);
229-
result.Add(
230-
new Employee("Laura Callahan") {
231-
BirthDate = new DateTime(1985, 1, 9),
232-
HireDate = new DateTime(2004, 3, 5),
233-
Position = "Inside Sales Coordinator",
234-
Address = "98105, 4726 - 11th Ave. N.E., Seattle WA, USA",
235-
Phone = "(206) 555-1189",
236-
Access = AccessLevel.User,
237-
OnVacation = true
238-
}
239-
);
240-
result.Add(
241-
new Employee("Anne Dodsworth") {
242-
BirthDate = new DateTime(1980, 1, 27),
243-
HireDate = new DateTime(2004, 11, 15),
244-
Position = "Sales Representative",
245-
Address = "WG2 7LT, 7 Houndstooth Rd., London, UK",
246-
Phone = "(71) 555-4444",
247-
Access = AccessLevel.User,
248-
OnVacation = false
249-
}
250-
);
251-
Employees = result;
252-
}
253-
254-
public ObservableCollection<Employee> Employees { get; private set; }
255-
256-
public EmployeeData() {
257-
GenerateEmployees();
258-
}
259-
}
260-
}
261-
```
262-
263-
Create a *ViewModel.cs* file and add a view model class:
264-
265-
```cs
266-
using System.Collections.Generic;
267-
using System.ComponentModel;
268-
269-
namespace DataGridExample {
270-
public class EmployeeDataViewModel : INotifyPropertyChanged {
271-
readonly EmployeeData data;
272-
273-
public event PropertyChangedEventHandler PropertyChanged;
274-
public IReadOnlyList<Employee> Employees { get => data.Employees; }
275-
276-
public EmployeeDataViewModel() {
277-
data = new EmployeeData();
278-
}
279-
280-
protected void RaisePropertyChanged(string name) {
281-
if (PropertyChanged != null)
282-
PropertyChanged(this, new PropertyChangedEventArgs(name));
283-
}
284-
}
285-
}
286-
```
287-
288-
### Bind the Grid to Data
289-
In the *MainPage.xaml* file:
290-
1. Assign an **EmployeeDataViewModel** object to the **ContentPage.BindingContext** property.
291-
2. Bind the [DataGridView.ItemsSource](http://docs.devexpress.com/MAUI/DevExpress.Maui.DataGrid.DataGridView.ItemsSource) property to the employee collection object that the **EmployeeDataViewModel.Employees** property returns.
292-
293-
```xaml
294-
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
295-
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
296-
x:Class="DataGridExample.MainPage"
297-
xmlns:dxg="clr-namespace:DevExpress.Maui.DataGrid;assembly=DevExpress.Maui.DataGrid"
298-
xmlns:local="clr-namespace:DataGridExample">
299-
<ContentPage.BindingContext>
300-
<local:EmployeeDataViewModel/>
301-
</ContentPage.BindingContext>
302-
<dxg:DataGridView ItemsSource="{Binding Employees}">
303-
</dxg:DataGridView>
304-
</ContentPage>
305-
```
306-
307-
### Specify Grid Columns
308-
309-
Do the following to specify a collection of grid columns:
310-
1. Create column objects and use the [FieldName](http://docs.devexpress.com/MAUI/DevExpress.Maui.DataGrid.GridColumn.FieldName) property to bind each column to a data source field.
311-
2. Add columns to the [DataGridView.Columns](http://docs.devexpress.com/MAUI/DevExpress.Maui.DataGrid.DataGridView.Columns) collection in the order you want them to be displayed in the grid.
312-
313-
In this example, the grid contains the following columns:
314-
315-
- **Photo** ([ImageColumn](http://docs.devexpress.com/MAUI/DevExpress.Maui.DataGrid.ImageColumn)) - displays photos of employees. Add images to a project as embedded resources.
316-
317-
- **Employee** ([TemplateColumn](http://docs.devexpress.com/MAUI/DevExpress.Maui.DataGrid.TemplateColumn)) - displays names, positions, and hire dates of employees.
318-
319-
Assign a template to the **TemplateColumn.DisplayTemplate** property to define the appearance of column cells. Each cell contains a *Microsoft.Maui.Controls.Grid* with three *Microsoft.Maui.Controls.Label* elements bound to the *Name*, *Position*, and *HireDate* properties of the *Employee* class.
320-
321-
The **CellData** object specifies a binding context for a cell template. Its **CellData.Value** property returns a value of a data field assigned to the column’s **FieldName** property. In this example, a column cell displays not only this field value but also the values of two more fields. Use the **CellData.Item** property to access the whole data row object (*Employee*) and bind its properties to properties of labels defined in the template.
322-
323-
- **Phone** and **Address** ([TextColumn](http://docs.devexpress.com/MAUI/DevExpress.Maui.DataGrid.TextColumn)) - display phones and addresses of employees. The keyboard for text input appears when a user activates a cell to edit an employee’s phone or address.
324-
325-
- **Birth Date** ([DateColumn](http://docs.devexpress.com/MAUI/DevExpress.Maui.DataGrid.DateColumn)) - displays birth days of employees and allows users to edit dates.
326-
327-
- **Access Level** ([ComboBoxColumn](http://docs.devexpress.com/MAUI/DevExpress.Maui.DataGrid.ComboBoxColumn)) - displays employee access level and allows a user to select between predefined values (*Admin* or *User*) to change a cell value.
328-
329-
- **On Vacation** ([CheckBoxColumn](http://docs.devexpress.com/MAUI/DevExpress.Maui.DataGrid.CheckBoxColumn)) - specifies whether an employee is on leave. This column displays checkboxes in cells to display and manage Boolean values.
330-
331-
Use the [DataGridView.EditorShowMode](http://docs.devexpress.com/MAUI/DevExpress.Maui.DataGrid.DataGridView.EditorShowMode) property to specify a gesture that invokes an in-place editor for a cell.
332-
The grid automatically defines an editor type depending on the type of a column to which a cell belongs (except for [TemplateColumn](http://docs.devexpress.com/MAUI/DevExpress.Maui.DataGrid.TemplateColumn)).
333-
334-
```xaml
335-
<dxg:DataGridView ItemsSource="{Binding Employees}"
336-
EditorShowMode="DoubleTap">
337-
<dxg:DataGridView.Columns>
338-
<dxg:TemplateColumn FieldName="Photo" Width="100">
339-
<dxg:TemplateColumn.DisplayTemplate>
340-
<DataTemplate>
341-
<Image Source="{Binding Item.Photo}" Margin="3"/>
342-
</DataTemplate>
343-
</dxg:TemplateColumn.DisplayTemplate>
344-
</dxg:TemplateColumn>
345-
<dxg:TemplateColumn FieldName="Name" Caption="Employee" MinWidth="200">
346-
<dxg:TemplateColumn.DisplayTemplate>
347-
<DataTemplate>
348-
<Grid VerticalOptions="Center" Padding="15, 0, 0, 0" RowDefinitions="Auto, Auto, Auto">
349-
<Label Text="{Binding Item.Name}" FontSize="18" FontAttributes="Bold"
350-
TextColor="{DynamicResource GridCellFontColor}" Grid.Row="0" />
351-
<Label Text="{Binding Item.Position, StringFormat = 'Job Title: {0}'}"
352-
FontSize="Small" TextColor="{DynamicResource GridCellFontColor}"
353-
Grid.Row="1"/>
354-
<Label Text="{Binding Item.HireDate, StringFormat = 'Hire Date: {0:d}'}"
355-
FontSize="Small" TextColor="{DynamicResource GridCellFontColor}"
356-
Grid.Row="2" />
357-
</Grid>
358-
</DataTemplate>
359-
</dxg:TemplateColumn.DisplayTemplate>
360-
</dxg:TemplateColumn>
361-
<dxg:TextColumn FieldName="Phone"
362-
MinWidth="130" VerticalContentAlignment="Center" />
363-
<dxg:TextColumn FieldName="Address"
364-
MinWidth="150" VerticalContentAlignment="Center" />
365-
<dxg:DateColumn FieldName="BirthDate"
366-
MinWidth="120" DisplayFormat="d" VerticalContentAlignment="Center"/>
367-
<dxg:ComboBoxColumn FieldName="Access" Caption="Access Level"
368-
MinWidth="140" VerticalContentAlignment="Center"/>
369-
<dxg:CheckBoxColumn FieldName="OnVacation"
370-
MinWidth="130" VerticalContentAlignment="Center"/>
371-
</dxg:DataGridView.Columns>
372-
</dxg:DataGridView>
373-
```
374-
375-
### Enable Drag-and-Drop
376-
The DataGridView supports drag-and-drop operations and allows users to reorder rows. Users should touch and hold a data row and then drag and drop the row to another position.
377-
378-
To enable drag-and-drop operations, set the [AllowDragDropRows](http://docs.devexpress.com/MAUI/DevExpress.Maui.DataGrid.DataGridView.AllowDragDropRows) property to **True**.
379-
```xaml
380-
<dxg:DataGridView ItemsSource="{Binding Employees}" EditorShowMode="DoubleTap" AllowDragDropRows="True"/>
381-
```
45+
### Sample Projects
46+
47+
* [AdvancedColumnLayout](/CS/AdvancedColumnLayout/)
48+
* [ColumnHeaderTemplate](/CS/ColumnHeaderTemplate/)
49+
* [Columns](/CS/Columns/)
50+
* [CustomAppearance](/CS/CustomAppearance/)
51+
* [DataGridExample](/CS/DataGridExample/)
52+
* [EditForm](/CS/EditForm/)
53+
* [EditFormTemplate](/CS/EditFormTemplate/)
54+
* [InPlaceEditors](/CS/InPlaceEditors/)
55+
* [LoadMore](/CS/LoadMore/)
56+
* [PullToRefresh](/CS/PullToRefresh/)
57+
* [Swipe](/CS/Swipe/)
58+
* [ValidateCellEvent](/CS/ValidateCellEvent/)
59+
* [ValidateFormEvent](/CS/ValidateFormEvent/)
60+
* [ValidateInPlaceEditors](/CS/ValidateInPlaceEditors/)

0 commit comments

Comments
 (0)