Skip to content

Commit d6fde5b

Browse files
VidyalakshmiManiVidyalakshmiMani
committed
Merge branch 'development' of https://github.com/syncfusion-content/maui-docs into SchedulerVolume3Features
2 parents f94c987 + b58210e commit d6fde5b

File tree

121 files changed

+2200
-8626
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

121 files changed

+2200
-8626
lines changed

‎MAUI/DataGrid/Column-types.md‎

Lines changed: 178 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,13 @@ The following table describes the types of columns and their usage:
6565
<td>{{'[DataGridComboBoxColumn](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridComboBoxColumn.html)'| markdownify }}</td>
6666
<td>{{'[DataGridComboBoxRenderer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridComboBoxRenderer.html)'| markdownify }}</td>
6767
<td>ComboBox</td>
68-
<td>To display the date and time value.</td>
68+
<td>To display a ComboBox within each cell</td>
69+
</tr>
70+
<tr>
71+
<td>{{`DataGridPickerColumn`| markdownify }}</td>
72+
<td>{{'[DataGridPickerCellRenderer]'| markdownify }}</td>
73+
<td>Picker</td>
74+
<td>To display a Picker within each cell</td>
6975
</tr>
7076
<tr>
7177
<td>{{'[DataGridUnboundColumn](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridUnboundColumn.html)'| markdownify }}</td>
@@ -1012,6 +1018,177 @@ The [DataGridComboBoxColumn.CanFilterSuggestions](https://help.syncfusion.com/cr
10121018
{% endhighlight %}
10131019
{% endtabs %}
10141020

1021+
## DataGridPickerColumn
1022+
1023+
The `DataGridPickerColumn` inherits all the properties of the [SfDataGrid.DataGridColumn](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridColumn.html). It displays a list of items in the form of a [SfPicker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.SfPicker.html) as the content of a column. To enable or disable editing for a particular column, set the [DataGridColumn.AllowEditing](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridColumn.html#Syncfusion_Maui_DataGrid_DataGridColumn_AllowEditing) property to true or false. When in editing mode, it displays a `SfPicker` element. The data source for the `SfPicker` can be set using the `DataGridPickerColumn.ItemsSource` property. The picker column can be populated with data in the following ways:
1024+
1025+
* Collection of primitive types
1026+
* Collection of user-defined types (custom objects)
1027+
1028+
![DataGrid with editing in picker column](Images\column-types\maui-datagrid-picker-column.png)
1029+
1030+
### Collection of primitive types
1031+
1032+
To display the collection of items in the Picker drop-down, create a `DataGridPickerColumn` and set its `ItemsSource` property to a simple collection.
1033+
1034+
To load the `DataGridPickerColumn` with a simple string collection, you can refer to the code example below:
1035+
1036+
{% tabs %}
1037+
{% highlight xaml %}
1038+
<ContentPage.BindingContext>
1039+
<local:ViewModel x:Name="viewModel" />
1040+
</ContentPage.BindingContext>
1041+
1042+
<sfGrid:SfDataGrid x:Name="dataGrid"
1043+
ItemsSource="{Binding DealerInformation}"
1044+
AllowEditing="True">
1045+
<sfGrid:SfDataGrid.Columns>
1046+
<sfgrid:DataGridPickerColumn HeaderText="Ship Country"
1047+
MappingName="ShipCountry"
1048+
ItemsSource="{Binding Countries}"/>
1049+
</sfGrid:SfDataGrid.Columns>
1050+
</sfGrid:SfDataGrid>
1051+
{% endhighlight %}
1052+
1053+
{% highlight c# %}
1054+
SfDataGrid dataGrid = new SfDataGrid();
1055+
dataGrid.ItemsSource = viewModel.DealerInformation;
1056+
dataGrid.AllowEditing = true;
1057+
DataGridPickerColumn pickerColumn = new DataGridPickerColumn()
1058+
{
1059+
MappingName = "ShipCountry",
1060+
HeaderText = "Ship Country",
1061+
ItemsSource = viewModel.Countries
1062+
};
1063+
dataGrid.Columns.Add(pickerColumn);
1064+
{% endhighlight %}
1065+
{% endtabs %}
1066+
1067+
{% tabs %}
1068+
{% highlight c# %}
1069+
1070+
public class ViewModel
1071+
{
1072+
public ObservableCollection<DealerInfo> DealerInformation { get; set; }
1073+
public ObservableCollection<string> Countries { get; set; }
1074+
1075+
public ViewModel()
1076+
{
1077+
this.Countries = this.shipCountry.ToObservableCollection();
1078+
}
1079+
1080+
private string[] shipCountry = new string[]
1081+
{
1082+
"Argentina",
1083+
"Austria",
1084+
"Belgium",
1085+
"Brazil",
1086+
"Canada",
1087+
"Denmark",
1088+
"Finland",
1089+
"France",
1090+
"Germany",
1091+
"Ireland",
1092+
"Italy",
1093+
"Mexico",
1094+
"Norway",
1095+
"Poland",
1096+
"Portugal",
1097+
"Spain",
1098+
"Sweden",
1099+
"UK",
1100+
"USA",
1101+
};
1102+
}
1103+
{% endhighlight %}
1104+
{% endtabs %}
1105+
1106+
### Collection of user-defined types
1107+
1108+
To display a list of user-defined items in the picker, create a `DataGridPickerColumn` and set its `ItemsSource` property to a user-defined collection. By default, if the `DisplayMemberPath` is not set, the picker column will display the values from the `MappingName` property of the column.
1109+
1110+
#### Display member path
1111+
1112+
Displays a value by comparing values of the properties set as `DataGridColumn.MappingName` and `ValueMemberPath` in their respective underlying collections. If the values of `ValueMemberPath` property contains the current value of `MappingName` property, its corresponding value of `DisplayMemberPath` property is displayed in the `DataGridCell`. Or else the `DataGridCell` appears blank. However, in edit mode the values of the `DisplayMemberPath` property are displayed as picker items.
1113+
1114+
#### Value member path
1115+
1116+
Once editing completed, the column having the `MappingName` equal to the `ValueMemberPath` has its data changed to the corresponding `ValueMemberPath` value for the selected `DisplayMemberPath` value in the picker.
1117+
1118+
### Loading different ItemSource for each row of DataGridPickerColumn
1119+
1120+
To load different ItemSources for each row of a DataGridPickerColumn, you can utilize the `DataGridPickerColumn.ItemsSourceSelector` property.
1121+
1122+
### Implementing IItemsSourceSelector
1123+
1124+
`DataGridPickerColumn.ItemsSourceSelector` needs to implement the IItemsSourceSelector interface, which requires you to implement the GetItemsSource method. This method receives the following parameters:
1125+
1126+
* Record: This is the data object associated with the row.
1127+
* Data Context: This is the binding context of the data grid.
1128+
1129+
In the provided code, the ItemsSource for the ShipCity column is returned based on the value of the ShipCountry column. This is done by using the record and the binding context of the data grid, which are passed to the GetItemsSource method.
1130+
1131+
{% tabs %}
1132+
{% highlight xaml %}
1133+
<ContentPage.Resources>
1134+
<ResourceDictionary>
1135+
<local:ItemSourceSelector x:Key="converter" />
1136+
</ResourceDictionary>
1137+
</ContentPage.Resources>
1138+
1139+
<sfgrid:SfDataGrid x:Name="dataGrid"
1140+
ItemsSource="{Binding DealerInformation}"
1141+
AllowEditing="True"
1142+
AutoGenerateColumnsMode="None"
1143+
NavigationMode="Cell"
1144+
EditTapAction="OnDoubleTap"
1145+
SelectionMode="Single">
1146+
<sfgrid:SfDataGrid.Columns>
1147+
<sfgrid:DataGridPickerColumn BindingContext="{x:Reference viewModel}"
1148+
ItemsSource="{Binding CountryList}"
1149+
MappingName="ShipCountry"
1150+
LoadUIView="True">
1151+
</sfgrid:DataGridPickerColumn>
1152+
1153+
<sfgrid:DataGridPickerColumn ItemsSourceSelector="{StaticResource converter}"
1154+
MappingName="ShipCity"
1155+
LoadUIView="True">
1156+
</sfgrid:DataGridPickerColumn>
1157+
</sfgrid:SfDataGrid.Columns>
1158+
</sfgrid:SfDataGrid>
1159+
{% endhighlight %}
1160+
1161+
{% highlight c# %}
1162+
public class ItemSourceSelector : IItemsSourceSelector
1163+
{
1164+
public IEnumerable GetItemsSource(object record, object dataContext)
1165+
{
1166+
if (record == null)
1167+
{
1168+
return null;
1169+
}
1170+
1171+
var orderinfo = record as DealerInfo;
1172+
var countryName = orderinfo.ShipCountry;
1173+
var viewModel = dataContext as EditingViewModel;
1174+
1175+
// Returns ShipCity collection based on ShipCountry.
1176+
if (viewModel.ShipCities.ContainsKey(countryName))
1177+
{
1178+
string[] shipcities = null;
1179+
viewModel.ShipCities.TryGetValue(countryName, out shipcities);
1180+
return shipcities.ToList();
1181+
}
1182+
1183+
return null;
1184+
}
1185+
}
1186+
{% endhighlight %}
1187+
{% endtabs %}
1188+
1189+
![DataGrid with ItemSourceSelector picker column](Images\column-types\maui-datagrid-picker-column-itemsourceselector.png)
1190+
![DataGrid with ItemSourceSelector picker column](Images\column-types\maui-datagrid-picker-column-itemsourceselector2.png)
1191+
10151192
## DataGridNumericColumn
10161193

10171194
The `DataGridNumericColumn` inherits all the properties of the `DataGridColumn`. It is used to display numeric data. To create a `DataGridNumericColumn`, the property corresponding to the column in the underlying collection must be a numeric type (int, double, float, etc.).

‎MAUI/DataGrid/Images/column-types/maui-datagrid-picker-column-itemsourceselector.png‎

45.7 KB
Loading

‎MAUI/DataGrid/Images/column-types/maui-datagrid-picker-column-itemsourceselector2.png‎

50 KB
Loading

‎MAUI/DataGrid/Images/column-types/maui-datagrid-picker-column.png‎

44.8 KB
Loading

‎MAUI/DataGrid/grid-events.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -348,7 +348,7 @@ private static void ListenExitedCommand(object obj)
348348

349349
## CellValueChanged event
350350

351-
The [SfDataGrid.CellValueChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.SfDataGrid.html) event will be triggered whenever the current cell's value has been changed in the DataGridTextColumn, DataGridNumericColumn, DataGridDateColumn, DataGridComboBoxColumn or DataGridCheckBoxColumn. This event handler contains the parameter of type [DataGridCellValueChangedEventArgs](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridCellValueChangedEventArgs.html) that contains the following properties.
351+
The [SfDataGrid.CellValueChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.SfDataGrid.html) event will be triggered whenever the current cell's value has been changed in the DataGridTextColumn, DataGridNumericColumn, DataGridDateColumn, DataGridComboBoxColumn, DataGridPickerColumn or DataGridCheckBoxColumn. This event handler contains the parameter of type [DataGridCellValueChangedEventArgs](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridCellValueChangedEventArgs.html) that contains the following properties.
352352

353353
* [Column](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridCellValueChangedEventArgs.html#Syncfusion_Maui_DataGrid_DataGridCellValueChangedEventArgs_Column) : Gets the current `DataGridColumn` that contains the grid cell for which value is edited or changed.
354354
* [NewValue](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridCellValueChangedEventArgs.html#Syncfusion_Maui_DataGrid_DataGridCellValueChangedEventArgs_NewValue) : The newly edited value to be committed.

‎MAUI/DataGrid/overview.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ The .NET MAUI DataGrid control is used to display and manipulate data in a tabul
1818

1919
* **Data Binding** - Bind different types of data sources, including DataTable.
2020

21-
* **Column Types** - Show different data types in different types of columns. The following column types are supported: numeric, text, date, checkbox, image, combobox and template. The template column is used to load any control in a column.
21+
* **Column Types** - Show different data types in different types of columns. The following column types are supported: numeric, text, date, checkbox, image, combobox, picker and template. The template column is used to load any control in a column.
2222

2323
* **Column Resizing** - Interactive support to adjust the width of columns.
2424

‎MAUI/ListView/viewappearance.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,22 @@ public class MainPage : ContentPage
101101

102102
![MAUI ListView Data Template Selector](Images/appearance/maui-listview-applying-the-data-template-selector.jpg)
103103

104+
## Setting DisplayMemberPath
105+
106+
The `DisplayMemberPath` property in the SfListView provides a simple and efficient way to display a specific property from business objects without creating custom item template. This feature is especially useful for simple lists where you want to display a single property without defining a custom template.
107+
108+
{% tabs %}
109+
{% highlight xaml tabtitle="MainPage.xaml" %}
110+
<syncfusion:SfListView x:Name="listView"
111+
DisplayMemberPath="BookName" />
112+
{% endhighlight %}
113+
{% highlight c# tabtitle="MainPage.xaml.cs" %}
114+
listView.DisplayMemberPath = "BookName";
115+
{% endhighlight %}
116+
{% endtabs %}
117+
118+
N> The `ItemTemplate` property takes precedence over `DisplayMemberPath`. If both are set, `ItemTemplate` will be used.
119+
104120
## Horizontal ListView
105121

106122
The SfListView allows you to layout every item in the [SfListView.ItemsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.SfListView.html#Syncfusion_Maui_ListView_SfListView_ItemsSource) property either in `Vertical` or `Horizontal` orientation by setting the [SfListView.Orientation](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.SfListView.html#Syncfusion_Maui_ListView_SfListView_Orientation). The default orientation is `Vertical`.

‎MAUI/MarkdownViewer/Appearance.md‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
---
2+
layout: post
3+
title: Customize Appearance in .NET MAUI MarkdownViewer | Syncfusion
4+
description: Learn how to style and customize the appearance of Markdown content using the MarkdownStyleSettings class in the Syncfusion .NET MAUI MarkdownViewer control.
5+
platform: MAUI
6+
control: SfMarkdownViewer
7+
documentation: ug
8+
---
9+
10+
# Customize Appearance in .NET MAUI SfMarkdownViewer
11+
12+
The [SfMarkdownViewer]() control in .NET MAUI provides a powerful styling system through the `MarkdownStyleSettings` class. This allows developers to customize the visual presentation of Markdown content with precision and flexibility.
13+
14+
## Key Features
15+
16+
- **Granular Styling**: Customize font sizes and colors for headings, body text, and tables.
17+
- **Custom CSS Support**: Apply advanced styling using raw CSS rules.
18+
- **Two-Layer Styling System**: Merge base styles with custom CSS for full control.
19+
- **Reset Functionality**: Revert all styles to default with a single method call.
20+
21+
## Use Cases
22+
23+
- Match Markdown content appearance with your app’s theme.
24+
- Improve readability with tailored font sizes and spacing.
25+
- Highlight specific Markdown elements like tables or code blocks.
26+
- Apply branding styles using custom CSS.
27+
28+
## Customization with MarkdownStyleSettings
29+
30+
The appearance of headings and body content in SfMarkdownViewer can be customized using the MarkdownStyleSettings class.
31+
32+
[H1FontSize](), [H2FontSize](), [H3FontSize]() – Gets or sets the font size for H1, H2, and H3 heading elements respectively.
33+
34+
[H1Color](), [H2Color](), [H3Color]() – Gets or sets the text color for H1, H2, and H3 heading elements respectively.
35+
36+
[BodyFontSize]() – Gets or sets the font size for regular paragraph text.
37+
38+
[BodyTextColor]() – Gets or sets the text color for body content.
39+
40+
[TableHeaderFontSize](), [TableDataFontSize]() – Gets or sets the font size for table headers and table content respectively.
41+
42+
[TableHeaderTextColor](), [TableDataTextColor]() – Gets or sets the text color for table headers and table content respectively.
43+
44+
[TableBackground]() – Gets or sets the background color for the entire table area.
45+
46+
[CssStyleRules]() – Gets or sets raw CSS styles to override or extend default Markdown rendering behavior.
47+
48+
{% tabs %}
49+
{% highlight xaml %}
50+
51+
<ContentPage>
52+
. . .
53+
<markdown:SfMarkdownViewer Source={Binding MarkdownContent}>
54+
<markdown:SfMarkdownViewer.Settings>
55+
<markdown:MarkdownStyleSettings H1FontSize = "32px"
56+
H1Color = "#8352FB"
57+
H2Color = "#9971FB"
58+
H3Color = "#A98AF7"
59+
BodyFontSize = "16px"
60+
BodyTextColor = "#2C3E50"
61+
TableBackground = "#FFE2ED"
62+
TableHeaderTextColor = "HotPink">
63+
</markdown:MarkdownStyleSettings>
64+
</markdown:SfMarkdownViewer.Settings>
65+
</markdown:SfMarkdownViewer>
66+
. . .
67+
</ContentPage>
68+
69+
{% endhighlight %}
70+
71+
{% highlight C# %}
72+
73+
public partial class MainPage : ContentPage
74+
{
75+
. . .
76+
77+
public MainPage()
78+
{
79+
InitializeComponent();
80+
81+
SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
82+
markdownViewer.Source = MarkdownContent;
83+
MarkdownViewer.Settings = new MarkdownStyleSettings()
84+
{
85+
H1FontSize = "32px",
86+
H1Color = "#8352FB",
87+
H2Color = "#9971FB",
88+
H3Color = "#A98AF7",
89+
BodyFontSize = "16px",
90+
BodyTextColor = "#2C3E50",
91+
TableBackground = "#FFE2ED",
92+
TableHeaderTextColor = "HotPink"
93+
};
94+
95+
Content = markdownViewer;
96+
}
97+
}
98+
99+
{% endhighlight %}
100+
{% endtabs %}
101+
102+
![Sample markdown content appearance customization](images/maui-markdown-viewer-appearance.png)
103+
104+
With [MarkdownStyleSettings](), you gain full control over how Markdown content looks in your .NET MAUI app—whether you're building a documentation viewer, a note-taking app, or a styled content portal.

0 commit comments

Comments
 (0)