In .NET MAUI, handling theming and styling is streamlined to enhance the visual appeal and user experience across different platforms. Here’s how theming is approached: Material Design 3 Support: .NET MAUI supports the modern Material 3 design, which provides a cohesive and aesthetically pleasing interface for all controls. This ensures consistency with current design trends and user expectations. Light and Dark Themes: The components in .NET MAUI come with both light and dark themes by default. These themes leverage the Material 3 color palettes, allowing for a seamless transition between different user preferences or system settings. Customization Options: While default themes provide a standard look and feel, they are fully customizable to align with specific branding needs. You can adjust colors, fonts, and other UI elements to ensure your application reflects your unique brand identity. Documentation and Resources: For detailed guidance and examples on implementing these themes, refer to the Syncfusion® MAUI themes documentation. By utilizing these theming capabilities, you ensure that your applications are not only functional but also visually engaging and aligned with your brand’s aesthetic.
The .NET MAUI ListView enables you to apply alternate coloring for each item in a grid layout using the SpanCount property. This is accomplished by finding the item index within the data collection using an IValueConverter. Create an SfListView with GridLayout settings in XAML and bind it to the data source. XAML: <ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"> <ContentPage.Resources> <ResourceDictionary> <local:IndexToColorConverter x:Key="IndexToColorConverter"/> </ResourceDictionary> </ContentPage.Resources> <ContentPage.BindingContext> <local:ContactsViewModel x:Name="viewModel"/> </ContentPage.BindingContext> <ContentPage.Content> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> </Grid.RowDefinitions> <syncfusion:SfListView x:Name="listView" SelectionMode="Multiple" ItemSpacing="1" ItemSize="150" ItemsSource="{Binding Items}"> <syncfusion:SfListView.ItemsLayout> <syncfusion:GridLayout x:Name="grid" SpanCount="4" /> </syncfusion:SfListView.ItemsLayout> <syncfusion:SfListView.ItemTemplate> <DataTemplate> <ViewCell> <ViewCell.View> <Grid x:Name="grid" RowSpacing="0" BackgroundColor="{Binding .,Converter={StaticResource IndexToColorConverter},ConverterParameter={x:Reference Name=listView}}"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="1" /> </Grid.RowDefinitions> <Grid RowSpacing="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Grid Grid.Column="1" RowSpacing="1" Padding="10,0,0,0" VerticalOptions="Center"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Label LineBreakMode="NoWrap" Text="{Binding ContactName}"/> <Label Grid.Row="1" Grid.Column="0" TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding ContactNumber}"> </Label> </Grid> </Grid> </Grid> </ViewCell.View> </ViewCell> </DataTemplate> </syncfusion:SfListView.ItemTemplate> </syncfusion:SfListView> </Grid> </ContentPage.Content> </ContentPage> C#: public class IndexToColorConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { var listview = parameter as SfListView; var index = listview.DataSource.DisplayItems.IndexOf(value); int spanCount = ((Syncfusion.Maui.ListView.GridLayout)listview.ItemsLayout).SpanCount; Color CornBlue = Colors.CornflowerBlue; Color Blue = Colors.LightBlue; if (spanCount % 2 == 1) { return index % 2 == 0 ? CornBlue : Blue; } else { int row = index / spanCount; if (row % 2 == 0) { return index % 2 == 0 ? CornBlue : Blue; } else { return index % 2 == 0 ? Blue : CornBlue; } } } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } } Output: Download the complete sample from GitHub. Conclusion I hope you enjoyed learning how to achieve alternate row styling on grid layout view based on span count in .NET MAUI ListView. You can refer to our .NET MAUI ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. Explore our .NET MAUI ListView example to understand how to create and manipulate data. You can check out our components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls. Please let us know in the comments section below if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The .NET MAUI DataGrid(SfDataGrid) allows you to set different background color for each column header by using the DataGridColumn.HeaderTemplate property. The below code illustrates how to set the different background color for each column header. XAML <syncfusion:SfDataGrid x:Name ="dataGrid" AutoGenerateColumnsMode="None" ItemsSource="{Binding Employees}"> <syncfusion:SfDataGrid.Columns> <syncfusion:DataGridTextColumn MappingName="EmployeeID"> <syncfusion:DataGridTextColumn.HeaderTemplate> <DataTemplate> <Label Text="Employee ID" FontAttributes="Bold" TextColor="Black" BackgroundColor="Gray" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/> </DataTemplate> </syncfusion:DataGridTextColumn.HeaderTemplate> </syncfusion:DataGridTextColumn> <syncfusion:DataGridTextColumn MappingName="Name"> <syncfusion:DataGridTextColumn.HeaderTemplate> <DataTemplate> <Label Text="Name" FontAttributes="Bold" TextColor="Black" BackgroundColor="Blue" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" /> </DataTemplate> </syncfusion:DataGridTextColumn.HeaderTemplate> </syncfusion:DataGridTextColumn> <syncfusion:DataGridTextColumn MappingName="IDNumber"> <syncfusion:DataGridTextColumn.HeaderTemplate> <DataTemplate> <Label Text="ID Number" FontAttributes="Bold" TextColor="Black" BackgroundColor="Aqua" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/> </DataTemplate> </syncfusion:DataGridTextColumn.HeaderTemplate> </syncfusion:DataGridTextColumn> <syncfusion:DataGridTextColumn MappingName="Title"> <syncfusion:DataGridTextColumn.HeaderTemplate> <DataTemplate> <Label Text="Title" FontAttributes="Bold" TextColor="Black" BackgroundColor="Maroon" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/> </DataTemplate> </syncfusion:DataGridTextColumn.HeaderTemplate> </syncfusion:DataGridTextColumn> </syncfusion:SfDataGrid.Columns> </syncfusion:SfDataGrid> View Sample of GitHub Take a moment to pursue this documentation, where you can find more about Syncfusion .NET MAUI DataGrid (SfDataGrid) with code examples. Please refer to this link to learn about the essential features of Syncfusion .NET MAUI DataGrid (SfDataGrid). Conclusion I hope you enjoyed learning about how to set different background color for each column header in MAUI DataGrid (SfDataGrid). You can refer to our .NET MAUI DataGrid’s feature tour page to know about its other groundbreaking feature representations. You can also explore our .NET MAUI DataGrid Documentation to understand how to present and manipulate data. For current customers, you can check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our .NET MAUI DataGrid and other .NET MAUI components. If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac or feedback portal. We are always happy to assist you!
This article explains how to customize the appearance of the axis labels in WPF Chart. WPF SfChart supports customizing the appearance of the axis labels using the LabelTemplate property of the ChartAxis as per the following code samples. [Xaml] <Grid> <Grid.DataContext> <local:ViewModel /> </Grid.DataContext> <chart:SfChart> <chart:SfChart.PrimaryAxis> <chart:CategoryAxis ShowGridLines="False"> <chart:CategoryAxis.LabelTemplate> <DataTemplate> <Border Padding="3" Background="LightGreen" CornerRadius="4" > <TextBlock Text="{Binding LabelContent}" FontWeight="Bold" Foreground="Black"/> </Border> </DataTemplate> </chart:CategoryAxis.LabelTemplate> </chart:CategoryAxis> </chart:SfChart.PrimaryAxis> <chart:SfChart.SecondaryAxis> <chart:NumericalAxis Maximum="2500"> <chart:NumericalAxis.LabelTemplate> <DataTemplate> <Border Padding="3" Background="LightGreen" CornerRadius="4" > <TextBlock Text="{Binding LabelContent}" FontWeight="Bold" Foreground="Black"/> </Border> </DataTemplate> </chart:NumericalAxis.LabelTemplate> </chart:NumericalAxis> </chart:SfChart.SecondaryAxis> <chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue" Palette="Metro"> <chart:ColumnSeries.AdornmentsInfo> <chart:ChartAdornmentInfo ShowLabel="True" /> </chart:ColumnSeries.AdornmentsInfo> </chart:ColumnSeries> </chart:SfChart> </Grid>Output: For more details, please refer to the project on GitHub.See Also,How to display the axis labels in a particular format of WPF Chart (SfChart)?How to display the axis labels for all datapoints in WPF Chart (SfChart)?How to set the custom labels with auto range for axis in WPF Chart (SfChart)?ConclusionI hope you enjoyed learning how to customize the appearance of axis labels in WPF Chart.You can refer to our WPF Chart feature tour page know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF Chart Examples to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
RTRIDIn SfDataGrid, you can apply the style for every cell in a particular column based on CellValues in WinRT You can customize the FontWeight of the cells in a particular column, based on its cell content in two ways. Customize Style using Converters. CellStyleSelector. Customize Style using Converters You can customize the FontWeight of GridCell based on its data, by customizing its Style and Writing Converter for FontWeight property that converts the FontWeight based on bound data. The customized style can be set to SfDataGrid.CellStyle or GridColumn.CellStyle property based on your requirement. XAML <!--Resources--> <Window.Resources> <local:ChangeFontWeight x:Key="changefontweight"/> <Style TargetType="syncfusion:GridCell" x:Key="cellstyle"> <Setter Property="FontWeight" Value="{Binding RelativeSource={RelativeSource Self},Converter = {StaticResource changefontweight}}" /> </Style> </Window.Resources> <!— SfDataGrid Definition --> <syncfusion:SfDataGrid x:Name="datagrid" CellStyle="{StaticResource cellstyle}" AllowEditing="True" LiveDataUpdateMode="AllowDataShaping" AutoGenerateColumns="True" ColumnSizer="Auto" ItemsSource="{Binding Stocks}"> The following code example demonstrates the ChangeFontWeight Converter Class that returns the FontWeight of the text based on cell value. C# public class ChangeFontWeight : IValueConverter { object IValueConverter.Convert(object value, Type targetType, object parameter, CultureInfo info) { var cell = value as GridCell; if (cell.ColumnBase.GridColumn.MappingName == "Change") { var data = (cell.DataContext as StockData).Change; if (data >= 0) return FontWeights.Bold; else return FontWeights.Normal; } return null; } object IValueConverter.ConvertBack(object value, Type targetType, object parameter, CultureInfo info) { throw new NotImplementedException(); } } Note:You can apply the style for a particular column by using GridColumn.CellStyle in SfDataGrid. CellStyleSelector You can customize the FontWeight of GridCell based on its data, by customizing its style and writing the StyleSelector for FontWeight property that converts the FontWeight based on bound data. The customized style can be set to SfDataGrid.CellStyleSelector or GridColumn.CellStyleSelector property based on your requirement. XAML <!--Resources--> <Window.Resources> <local:StockCellStyleSelector x:Key="stockCellStyleSelector" /> </Window.Resources> <!—Defining Resources in SfDataGrid --> <syncfusion:SfDataGrid x:Name="datagrid" Grid.Row="1" Margin="10,0,30,30" LiveDataUpdateMode="AllowDataShaping" ColumnSizer="Auto" CellStyleSelector="{StaticResource stockCellStyleSelector}" NavigationMode="Row" ItemsSource="{Binding Stocks}" ></syncfusion:SfDataGrid.Columns> The following code example demonstrates how to write the style for FontWeight property of GridCell in App.Xaml. XAML <Application.Resources> <Style x:Key="SymbolCellStyle" TargetType="syncfusion:GridCell"> <Setter Property="FontWeight" Value="Bold" /> </Style> <Style x:Key="NormalCellStyle" TargetType="syncfusion:GridCell"> <Setter Property="FontWeight" Value="Normal" /> </Style> </Application.Resources> The appropriate style is applied for a particular column depending on the row data in SelectStyle method of the StyleSelector Class. The following code example describes the StockCellStyleSelector class that returns the style based on cell value. C# public class StockCellStyleSelector : StyleSelector { public override Style SelectStyle(object item, DependencyObject container) { var gridcell = container as GridCell; if (gridcell.ColumnBase.GridColumn.MappingName == "Change") { var row = item as StockData; if (row != null) if (row.Change >= 0) return App.Current.Resources["SymbolCellStyle"] as Style; else return App.Current.Resources["NormalCellStyle"] as Style; } return base.SelectStyle(item, container); } } Note:You can apply the style for a particular column by using GridColumn.CellStyleSelector in SfDataGrid. The following screenshot shows changing FontWeight for a particular column based on CellValue. Figure SEQ Figure \* ARABIC 1: Changing FontWeight using CellValue Sample Links: WPF WRT SilverLight UWP
In SfDataGrid, you can apply the style for every cell in a particular column based on CellValues in UWP. You can customize the FontWeight of the cells in a particular column, based on its cell content in two ways. Customize Style using Converters. CellStyleSelector. Customize Style using Converters You can customize the FontWeight of GridCell based on its data, by customizing its Style and Writing Converter for FontWeight property that converts the FontWeight based on bound data. The customized style can be set to SfDataGrid.CellStyle or GridColumn.CellStyle property based on your requirement. XAML <!--Resources--> <Window.Resources> <local:ChangeFontWeight x:Key="changefontweight"/> <Style TargetType="syncfusion:GridCell" x:Key="cellstyle"> <Setter Property="FontWeight" Value="{Binding RelativeSource={RelativeSource Self},Converter = {StaticResource changefontweight}}" /> </Style> </Window.Resources> <!— SfDataGrid Definition --> <syncfusion:SfDataGrid x:Name="datagrid" CellStyle="{StaticResource cellstyle}" AllowEditing="True" LiveDataUpdateMode="AllowDataShaping" AutoGenerateColumns="True" ColumnSizer="Auto" ItemsSource="{Binding Stocks}"> The following code example demonstrates the ChangeFontWeight Converter Class that returns the FontWeight of the text based on cell value. C# public class ChangeFontWeight : IValueConverter { object IValueConverter.Convert(object value, Type targetType, object parameter, CultureInfo info) { var cell = value as GridCell; if (cell.ColumnBase.GridColumn.MappingName == "Change") { var data = (cell.DataContext as StockData).Change; if (data >= 0) return FontWeights.Bold; else return FontWeights.Normal; } return null; } object IValueConverter.ConvertBack(object value, Type targetType, object parameter, CultureInfo info) { throw new NotImplementedException(); } } Note:You can apply the style for a particular column by using GridColumn.CellStyle in SfDataGrid. CellStyleSelector You can customize the FontWeight of GridCell based on its data, by customizing its style and writing the StyleSelector for FontWeight property that converts the FontWeight based on bound data. The customized style can be set to SfDataGrid.CellStyleSelector or GridColumn.CellStyleSelector property based on your requirement. XAML <!--Resources--> <Window.Resources> <local:StockCellStyleSelector x:Key="stockCellStyleSelector" /> </Window.Resources> <!—Defining Resources in SfDataGrid --> <syncfusion:SfDataGrid x:Name="datagrid" Grid.Row="1" Margin="10,0,30,30" LiveDataUpdateMode="AllowDataShaping" ColumnSizer="Auto" CellStyleSelector="{StaticResource stockCellStyleSelector}" NavigationMode="Row" ItemsSource="{Binding Stocks}" ></syncfusion:SfDataGrid.Columns> The following code example demonstrates how to write the style for FontWeight property of GridCell in App.Xaml. XAML <Application.Resources> <Style x:Key="SymbolCellStyle" TargetType="syncfusion:GridCell"> <Setter Property="FontWeight" Value="Bold" /> </Style> <Style x:Key="NormalCellStyle" TargetType="syncfusion:GridCell"> <Setter Property="FontWeight" Value="Normal" /> </Style> </Application.Resources> The appropriate style is applied for a particular column depending on the row data in SelectStyle method of the StyleSelector Class. The following code example describes the StockCellStyleSelector class that returns the style based on cell value. C# public class StockCellStyleSelector : StyleSelector { public override Style SelectStyle(object item, DependencyObject container) { var gridcell = container as GridCell; if (gridcell.ColumnBase.GridColumn.MappingName == "Change") { var row = item as StockData; if (row != null) if (row.Change >= 0) return App.Current.Resources["SymbolCellStyle"] as Style; else return App.Current.Resources["NormalCellStyle"] as Style; } return base.SelectStyle(item, container); } } Note:You can apply the style for a particular column by using GridColumn.CellStyleSelector in SfDataGrid. The following screenshot shows changing FontWeight for a particular column based on CellValue. Figure SEQ Figure \* ARABIC 1: Changing FontWeight using CellValue Sample Links: WPF WRT SilverLight UWPConclusionI hope you enjoyed learning about how to alter the FontWeight for a certain column based on the value of a cell.You can refer to our WPF DataGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF DataGrid example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
In SfDataGrid, you can apply the style for every cell in a particular column based on CellValues in WPF DataGrid You can customize the FontWeight of the cells in a particular column, based on its cell content in two ways. Customize Style using Converters. CellStyleSelector. Customize Style using Converters You can customize the FontWeight of GridCell based on its data, by customizing its Style and Writing Converter for FontWeight property that converts the FontWeight based on bound data. The customized style can be set to SfDataGrid.CellStyle or GridColumn.CellStyle property based on your requirement. XAML <!--Resources--> <Window.Resources> <local:ChangeFontWeight x:Key="changefontweight"/> <Style TargetType="syncfusion:GridCell" x:Key="cellstyle"> <Setter Property="FontWeight" Value="{Binding RelativeSource={RelativeSource Self},Converter = {StaticResource changefontweight}}" /> </Style> </Window.Resources> <!— SfDataGrid Definition --> <syncfusion:SfDataGrid x:Name="datagrid" CellStyle="{StaticResource cellstyle}" AllowEditing="True" LiveDataUpdateMode="AllowDataShaping" AutoGenerateColumns="True" ColumnSizer="Auto" ItemsSource="{Binding Stocks}"> The following code example demonstrates the ChangeFontWeight Converter Class that returns the FontWeight of the text based on cell value. C# public class ChangeFontWeight : IValueConverter { object IValueConverter.Convert(object value, Type targetType, object parameter, CultureInfo info) { var cell = value as GridCell; if (cell.ColumnBase.GridColumn.MappingName == "Change") { var data = (cell.DataContext as StockData).Change; if (data >= 0) return FontWeights.Bold; else return FontWeights.Normal; } return null; } object IValueConverter.ConvertBack(object value, Type targetType, object parameter, CultureInfo info) { throw new NotImplementedException(); } } Note:You can apply the style for a particular column by using GridColumn.CellStyle in SfDataGrid. CellStyleSelector You can customize the FontWeight of GridCell based on its data, by customizing its style and writing the StyleSelector for FontWeight property that converts the FontWeight based on bound data. The customized style can be set to SfDataGrid.CellStyleSelector or GridColumn.CellStyleSelector property based on your requirement. XAML <!--Resources--> <Window.Resources> <local:StockCellStyleSelector x:Key="stockCellStyleSelector" /> </Window.Resources> <!—Defining Resources in SfDataGrid --> <syncfusion:SfDataGrid x:Name="datagrid" Grid.Row="1" Margin="10,0,30,30" LiveDataUpdateMode="AllowDataShaping" ColumnSizer="Auto" CellStyleSelector="{StaticResource stockCellStyleSelector}" NavigationMode="Row" ItemsSource="{Binding Stocks}" ></syncfusion:SfDataGrid.Columns> The following code example demonstrates how to write the style for FontWeight property of GridCell in App.Xaml. XAML <Application.Resources> <Style x:Key="SymbolCellStyle" TargetType="syncfusion:GridCell"> <Setter Property="FontWeight" Value="Bold" /> </Style> <Style x:Key="NormalCellStyle" TargetType="syncfusion:GridCell"> <Setter Property="FontWeight" Value="Normal" /> </Style> </Application.Resources> The appropriate style is applied for a particular column depending on the row data in SelectStyle method of the StyleSelector Class. The following code example describes the StockCellStyleSelector class that returns the style based on cell value. C# public class StockCellStyleSelector : StyleSelector { public override Style SelectStyle(object item, DependencyObject container) { var gridcell = container as GridCell; if (gridcell.ColumnBase.GridColumn.MappingName == "Change") { var row = item as StockData; if (row != null) if (row.Change >= 0) return App.Current.Resources["SymbolCellStyle"] as Style; else return App.Current.Resources["NormalCellStyle"] as Style; } return base.SelectStyle(item, container); } } Note:You can apply the style for a particular column by using GridColumn.CellStyleSelector in SfDataGrid. The following screenshot shows changing FontWeight for a particular column based on CellValue. Figure SEQ Figure \* ARABIC 1: Changing FontWeight using CellValue Sample Links: WPF WRT SilverLight UWP ConclusionI hope you enjoyed learning about how to alter the font weight for a certain column based on the value of a cell.You can refer to our WPF Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Grid example to understand how to create and manipulate data in the WPF Grid.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our WPF Grid and other WPF controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
In SfDataGrid, you can apply the style for every cell in a particular column based on CellValues in Silverlight You can customize the FontWeight of the cells in a particular column, based on its cell content in two ways. Customize Style using Converters. CellStyleSelector. Customize Style using Converters You can customize the FontWeight of GridCell based on its data, by customizing its Style and Writing Converter for FontWeight property that converts the FontWeight based on bound data. The customized style can be set to SfDataGrid.CellStyle or GridColumn.CellStyle property based on your requirement. XAML <!--Resources--> <Window.Resources> <local:ChangeFontWeight x:Key="changefontweight"/> <Style TargetType="syncfusion:GridCell" x:Key="cellstyle"> <Setter Property="FontWeight" Value="{Binding RelativeSource={RelativeSource Self},Converter = {StaticResource changefontweight}}" /> </Style> </Window.Resources> <!— SfDataGrid Definition --> <syncfusion:SfDataGrid x:Name="datagrid" CellStyle="{StaticResource cellstyle}" AllowEditing="True" LiveDataUpdateMode="AllowDataShaping" AutoGenerateColumns="True" ColumnSizer="Auto" ItemsSource="{Binding Stocks}"> The following code example demonstrates the ChangeFontWeight Converter Class that returns the FontWeight of the text based on cell value. C# public class ChangeFontWeight : IValueConverter { object IValueConverter.Convert(object value, Type targetType, object parameter, CultureInfo info) { var cell = value as GridCell; if (cell.ColumnBase.GridColumn.MappingName == "Change") { var data = (cell.DataContext as StockData).Change; if (data >= 0) return FontWeights.Bold; else return FontWeights.Normal; } return null; } object IValueConverter.ConvertBack(object value, Type targetType, object parameter, CultureInfo info) { throw new NotImplementedException(); } } Note:You can apply the style for a particular column by using GridColumn.CellStyle in SfDataGrid. CellStyleSelector You can customize the FontWeight of GridCell based on its data, by customizing its style and writing the StyleSelector for FontWeight property that converts the FontWeight based on bound data. The customized style can be set to SfDataGrid.CellStyleSelector or GridColumn.CellStyleSelector property based on your requirement. XAML <!--Resources--> <Window.Resources> <local:StockCellStyleSelector x:Key="stockCellStyleSelector" /> </Window.Resources> <!—Defining Resources in SfDataGrid --> <syncfusion:SfDataGrid x:Name="datagrid" Grid.Row="1" Margin="10,0,30,30" LiveDataUpdateMode="AllowDataShaping" ColumnSizer="Auto" CellStyleSelector="{StaticResource stockCellStyleSelector}" NavigationMode="Row" ItemsSource="{Binding Stocks}" ></syncfusion:SfDataGrid.Columns> The following code example demonstrates how to write the style for FontWeight property of GridCell in App.Xaml. XAML <Application.Resources> <Style x:Key="SymbolCellStyle" TargetType="syncfusion:GridCell"> <Setter Property="FontWeight" Value="Bold" /> </Style> <Style x:Key="NormalCellStyle" TargetType="syncfusion:GridCell"> <Setter Property="FontWeight" Value="Normal" /> </Style> </Application.Resources> The appropriate style is applied for a particular column depending on the row data in SelectStyle method of the StyleSelector Class. The following code example describes the StockCellStyleSelector class that returns the style based on cell value. C# public class StockCellStyleSelector : StyleSelector { public override Style SelectStyle(object item, DependencyObject container) { var gridcell = container as GridCell; if (gridcell.ColumnBase.GridColumn.MappingName == "Change") { var row = item as StockData; if (row != null) if (row.Change >= 0) return App.Current.Resources["SymbolCellStyle"] as Style; else return App.Current.Resources["NormalCellStyle"] as Style; } return base.SelectStyle(item, container); } } Note:You can apply the style for a particular column by using GridColumn.CellStyleSelector in SfDataGrid. The following screenshot shows changing FontWeight for a particular column based on CellValue. Figure SEQ Figure \* ARABIC 1: Changing FontWeight using CellValue
Set the background image to the Flutter DataTable by wrapping the DataGrid inside the Container, and set the color as transparent for rows and header. Then add the image to the image property of the decoration box in the Container. STEP 1: Create the folder inside the application, and add the image inside that folder. Also, add the image path in the pubspec.yaml file. assets: - image/BackgroundImage.png STEP 2: Create an EmployeeDataGridSource class that extends with the DataGridSource for mapping data to the SfDataGrid. Override the buildRow method, and return the DataGridRowAdapter. Set the row background color as transparent using the color property of the DataGridRowAdapter. class EmployeeDataGridSource extends DataGridSource { /// Creates the employee data source class with required details. EmployeeDataGridSource({required List<Employee> employeeData}) { _employeeData = employeeData .map<DataGridRow>((e) => DataGridRow(cells: [ DataGridCell<int>(columnName: 'id', value: e.id), DataGridCell<String>(columnName: 'name', value: e.name), DataGridCell<String>( columnName: 'designation', value: e.designation), DataGridCell<int>(columnName: 'salary', value: e.salary), ])) .toList(); } List<DataGridRow> _employeeData = []; @override List<DataGridRow> get rows => _employeeData; @override DataGridRowAdapter buildRow(DataGridRow row) { return DataGridRowAdapter( color: Colors.transparent, cells: row.getCells().map<Widget>((e) { return Container( alignment: Alignment.center, padding: EdgeInsets.all(8.0), child: Text(e.value.toString()), ); }).toList()); } } STEP 3: Initialize the SfDataGrid with all the required properties. Set the headerColor as transparent using the SfDataGridThemeData.headerColor property. Wrap the SfDataGridThemeData inside the container, and add the image to the BoxDecoration.image property. @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Syncfusion Flutter DataGrid'), ), body: Container( decoration: BoxDecoration( image: DecorationImage( image: AssetImage("image/Datagrid.png"), fit: BoxFit.cover)), child: SfDataGridTheme( data: SfDataGridThemeData(headerColor: Colors.transparent), child: SfDataGrid( source: employeeDataGridSource, columnWidthMode: ColumnWidthMode.fill, columns: <GridColumn>[ GridColumn( columnName: 'id', label: Container( padding: EdgeInsets.all(16.0), alignment: Alignment.center, child: Text( 'ID', ))), GridColumn( columnName: 'name', label: Container( padding: EdgeInsets.all(8.0), alignment: Alignment.center, child: Text('Name'))), GridColumn( columnName: 'designation', label: Container( padding: EdgeInsets.all(8.0), alignment: Alignment.center, child: Text( 'Designation', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'salary', label: Container( padding: EdgeInsets.all(8.0), alignment: Alignment.center, child: Text('Salary'))), ], ), ), ), ); } View the GitHub sample here.
WPF DataGrid (SfDataGrid) doesn’t have direct support to set style for the filter row dropdown. However, you can achieve this by creating custom GridFilterRowCell and RowGenerator. C# public MainWindow() { InitializeComponent(); this.dataGrid.RowGenerator = new CustomRowGenerator(this.dataGrid); } public class GridFilterRowCellExt : GridFilterRowCell { public GridFilterRowCellExt() : base() { } /// <summary> /// Opens the FilterOptionPopup with the FilterOptionList. /// </summary> public override void OpenFilterOptionPopup() { base.OpenFilterOptionPopup(); var styleListBox = new Style(typeof(ListBox)); styleListBox.Setters.Add(new Setter { Property = BackgroundProperty, Value = Brushes.Black }); styleListBox.Setters.Add(new Setter { Property = ForegroundProperty, Value = Brushes.White }); this.FilterOptionsList.Style = styleListBox; } } public class CustomRowGenerator : RowGenerator { public CustomRowGenerator(SfDataGrid dataGrid) : base(dataGrid) { } /// <summary> /// Return the Custom FilterRowCell /// </summary> /// <typeparam name="T"></typeparam> /// <returns>GridCell</returns> protected override GridCell GetGridCell<T>() { //If the Cell is FilterRowCell return custom FilterRowCell if (typeof(T) == typeof(GridFilterRowCell)) return new GridFilterRowCellExt(); return base.GetGridCell<GridCell>(); } } Take a moment to peruse the documentation, where you can find about filter row in SfDataGrid, with code examples. You can download the example from GitHub
Overview This article explains how to lazy load Syncfusion Angular Component style for performance improvement. Prerequisite Node Angular CLI Reason for Lazy loading styles There might be several components in an Angular application such as Home Component, Contact Component, Admin Component, etc... Loading styles of all these components initially will affect the performance. But, by loading the styles when the specific component is loaded, you can avoid dumping all CSS resources at once in initial loading. Creating Angular CLI Application You can create the angular application using the Angular CLI by referring the following documentation. Angular CLI Documentation: https://angular.io/cli Syncfusion Documentation: https://ej2.syncfusion.com/angular/documentation/ Application Structure We must create two components in the angular application using the “ng generate” command. Created two components in the sample application namely “first” and “second”. Configuration for Lazy Loading You must include the following style configuration under “styles” section of “angular.json” file in the root directory of the application. "styles": [ "src/styles.css", { "input": "src/app/first/first.css", "bundleName": "first", "inject": false }, { "input": "src/app/second/second.css", "bundleName": "second", "inject": false } ], Loading Component Style You can load the component style bundle in the initialization of the specific angular component as shown in the following code snippet. import { Component, OnInit, Inject } from '@angular/core'; import { DOCUMENT } from '@angular/common'; import { data } from './datasource'; import { PageSettingsModel } from '@syncfusion/ej2-angular-grids'; @Component({ selector: 'app-first', templateUrl: './first.component.html', styleUrls: ['./first.component.css'] }) export class FirstComponent implements OnInit { public data: object[]; public pageSettings: PageSettingsModel; constructor(@Inject(DOCUMENT) private document: Document) {} loadStyle(styleName: string) { const head = this.document.getElementsByTagName('head')[0]; let themeLink = this.document.getElementById( 'client-theme' ) as HTMLLinkElement; if (themeLink) { themeLink.href = `${styleName}.css`; } else { const style = this.document.createElement('link'); style.id = 'client-theme'; style.rel = 'stylesheet'; style.href = `${styleName}.css`; head.appendChild(style); } } ngOnInit(): void { this.loadStyle('first'); this.data = data; this.pageSettings = { pageSize: 6 }; } } Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Lazyloading1991432601 Conclusion The style resource of the component is loaded only when that specific component is loaded in the application.
WinForms DataGrid (SfDataGrid) does not provide the direct support to apply column header style based on StackedHeaderColumn style. You can apply column header based on StackedHeaderColumn style by customization the DrawCell event in WinForms DataGrid (SfDataGrid). //trigger the Draw cell event for DetailsView DataGrid childGrid.DrawCell += SfDataGrid1_DrawCell; private void SfDataGrid1_DrawCell(object sender, Syncfusion.WinForms.DataGrid.Events.DrawCellEventArgs e) { //Get the Stakced Header Row in Details View DataGrid if ((e.DataRow as DataRowBase).RowType == Syncfusion.WinForms.DataGrid.Enums.RowType.StackedHeaderRow) { int columnIndex = e.ColumnIndex; //get the Stakced Header Column if (e.CellValue == "Sales Details") { //Apply style to Stacked Header e.Style.BackColor = Color.Yellow; //check the index for avoid the Index Out range exception if (childGrid.StackedHeaderRows[e.RowIndex].StackedColumns.Count == e.ColumnIndex) columnIndex = e.ColumnIndex - 1; //get the Child Column of specific Stacked header column var childColumnName = childGrid.StackedHeaderRows[e.RowIndex].StackedColumns[columnIndex].ChildColumns.Split(',').ToList<string>(); foreach (var stackedColumnName in childColumnName.ToList()) { //apply the Column Header Style based on Stacked Header child Columns childGrid.Columns[stackedColumnName].HeaderStyle.BackColor = Color.Yellow; } } if (e.CellValue.ToString() == "Order Details") { //Apply style to Stacked Header e.Style.BackColor = Color.DarkCyan; e.Style.TextColor = Color.White; if (childGrid.StackedHeaderRows[e.RowIndex].StackedColumns.Count == e.ColumnIndex) columnIndex = e.ColumnIndex - 1; var childColumnName = childGrid.StackedHeaderRows[e.RowIndex].StackedColumns[columnIndex].ChildColumns.Split(',').ToList<string>(); foreach (var stackedColumnName in childColumnName.ToList()) { //apply the Column Header Style based on Stacked Header child Columns childGrid.Columns[stackedColumnName].HeaderStyle.BackColor = Color.DarkCyan; childGrid.Columns[stackedColumnName].HeaderStyle.TextColor = Color.White; } } if (e.CellValue == "Customer Details") { e.Style.BackColor = Color.LightCyan; if (childGrid.StackedHeaderRows[e.RowIndex].StackedColumns.Count == e.ColumnIndex) columnIndex = e.ColumnIndex - 1; var childColumnName = childGrid.StackedHeaderRows[e.RowIndex].StackedColumns[columnIndex].ChildColumns.Split(',').ToList<string>(); foreach (var stackedColumnName in childColumnName.ToList()) { //apply the Column Header Style based on Stacked Header child Columns childGrid.Columns[stackedColumnName].HeaderStyle.BackColor = Color.LightCyan; } } if (e.CellValue == "Product Details") { e.Style.BackColor = Color.DarkGray; e.Style.TextColor = Color.White; if (childGrid.StackedHeaderRows[e.RowIndex].StackedColumns.Count == e.ColumnIndex) columnIndex = e.ColumnIndex - 1; var childColumnName = childGrid.StackedHeaderRows[e.RowIndex].StackedColumns[columnIndex].ChildColumns.Split(',').ToList<string>(); foreach (var stackedColumnName in childColumnName.ToList()) { //apply the Column Header Style based on Stacked Header child Columns childGrid.Columns[stackedColumnName].HeaderStyle.BackColor = Color.DarkGray; childGrid.Columns[stackedColumnName].HeaderStyle.TextColor = Color.White; } } } } The following screenshot shows the column header style based on StackedHeaderColumn style,Take a moment to peruse the WinForms DataGrid – Stacked Headers documentation, where you can find about stacked headers with code examples. You can download the example from GitHubConclusionI hope you enjoyed learning about how to apply column header style based on stackedHeadercolumn style in WinForms Datagrid.You can refer to our WinForms DataGrid feature tour page to know about its other groundbreaking feature representations documentationand how to quickly get started for configuration specifications. You can also explore our WinForms DataGrid exampleto understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
WPF DataGrid (SfDataGrid) does not provide the support to apply alternate column style based on Enum value. You can apply alternative column style based on the Enum value can be used by customizing the converter to the GridCell background property in SfDataGrid. <Window.Resources> <local:DataGridCellContentToColorConverter x:Key="DataGridCellToColor"/> <Style x:Key="cellStyle" TargetType="syncfusion:GridCell"> <Style.Triggers> <DataTrigger Binding="{Binding Path=IsChecked, ElementName=StyleCheckBox,Mode=TwoWay}" Value="True"> <Setter Property="Background" > <Setter.Value> <MultiBinding Converter="{StaticResource DataGridCellToColor}"> <MultiBinding.Bindings> <Binding RelativeSource="{RelativeSource Mode=Self}"/> <Binding Path ="ColumnBase.ColumnIndex" RelativeSource="{RelativeSource Self}"/> <Binding Path ="ColumnBase.RowIndex" RelativeSource="{RelativeSource Self}"/> <Binding ElementName="syncgrid"/> </MultiBinding.Bindings> </MultiBinding> </Setter.Value> </Setter> </DataTrigger> </Style.Triggers> </Style> </Window.Resources> public class DataGridCellContentToColorConverter : IMultiValueConverter { public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) { //get the GridCell proeprty var cell = values[0] as GridCell; //get the columnIndex value var columnIndex = (int)values[1]; //get the rowIndex value var rowIndex = (int)values[2]; //get the SfDataGrid var dataGrid = values[3] as SfDataGrid; //Returns start column index of the VisibleColumn. var startIndex = dataGrid.ResolveToStartColumnIndex(); columnIndex = columnIndex - startIndex; // Get the resolved current record index var recordIndex = dataGrid.ResolveToRecordIndex(rowIndex); object data = null; if (values[0] != null && values[1] != null) { //check if datagrid grouped or not if (dataGrid.View.TopLevelGroup != null) { // Get the current row record while grouping var record = dataGrid.View.TopLevelGroup.DisplayElements[recordIndex]; if (!record.IsRecords) //skips caption summary, group summary rows return DependencyProperty.UnsetValue; var dataCell = (record as RecordEntry).Data; data = (dataCell as DataRowView).Row.ItemArray[columnIndex]; } else { data = (cell.DataContext as DataRowView).Row.ItemArray[columnIndex]; } //type case to get the comparison enum value var employeeComparison = (data as Employee).ComparisonState; if (employeeComparison == ComparisonStateEnum.DIFFERENT) { return new SolidColorBrush(Colors.Red); } else if (employeeComparison == ComparisonStateEnum.EQUAL) { return new SolidColorBrush(Colors.Blue); } else return DependencyProperty.UnsetValue; } return DependencyProperty.UnsetValue; } public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) { throw new NotImplementedException(); } } The following screenshot shows the applied alternate column style based on Enum value in SfDataGrid,The following screenshot shows the alternate column style applied while grouping in SfDataGrid, Take a moment to peruse the WPF DataGrid - Conditional Styling documentation, where you can find about Styling with code examples. Please refer this link to know about the essential features of WPF DataGrid. View WPF DataGrid Alternate Column Style Demo in GitHub.
By default, SfTreeGrid does not provide the direct support to change the color of drag line indicator. You can change the color of drag line indicator by overriding the TreeGridHeaderRowControl and TreeGridRowControl Template in WPF TreeGrid. <LinearGradientBrush x:Key="HeaderBackgroundBrush" StartPoint="0,0" EndPoint="1,1" > <GradientStop Color="Transparent" Offset="0" /> <GradientStop Color="Transparent" Offset="1" /> </LinearGradientBrush> <SolidColorBrush x:Key="HeaderBorderBrush" Color="Gray" /> <SolidColorBrush x:Key="ContentBorderBrush" Color="Gray" /> <Style TargetType="syncfusion:TreeGridHeaderRowControl"> <Setter Property="Background" Value="{StaticResource HeaderBackgroundBrush}" /> <Setter Property="BorderBrush" Value="{StaticResource HeaderBorderBrush}" /> <Setter Property="BorderThickness" Value="0" /> <Setter Property="IsTabStop" Value="False" /> <Setter Property="syncfusion:VisualContainer.WantsMouseInput" Value="True"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="syncfusion:TreeGridHeaderRowControl"> <Grid> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True"> <ContentPresenter /> </Border> <Border x:Name="PART_DragLineIndicator" BorderBrush="Red" Visibility="Collapsed" BorderThickness="0,0,0,2" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style TargetType="syncfusion:TreeGridRowControl"> <Setter Property="BorderBrush" Value="{StaticResource ContentBorderBrush}" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="syncfusion:TreeGridRowControl"> <Grid> <Border x:Name="PART_BackgroundBorder" Margin="{TemplateBinding IndentMargin}" Background="{TemplateBinding Background}" Visibility="Visible"> <Rectangle x:Name="PART_FocusRect" Margin="1,2,2,2" Fill="Transparent" Stroke="DarkGray" StrokeDashArray="2,2" StrokeThickness="1" Visibility="Collapsed" /> </Border> <Border x:Name="PART_SelectionBorder" Margin="{TemplateBinding IndentMargin}" Background="{TemplateBinding SelectionBackground}" Visibility="Collapsed" /> <ContentPresenter /> <Border x:Name="PART_DragLineIndicator" BorderBrush="Red" Visibility="Collapsed" BorderThickness="0,0,0,2" /> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="SelectionStates"> <VisualState x:Name="Unselected" /> <VisualState x:Name="Selected"> <Storyboard> <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PART_SelectionBorder" Storyboard.TargetProperty="(UIElement.Visibility)"> <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="SelectedPointerOver"> <Storyboard> <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PART_SelectionBorder" Storyboard.TargetProperty="(UIElement.Visibility)"> <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="SelectedPressed"> <Storyboard> <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PART_SelectionBorder" Storyboard.TargetProperty="(UIElement.Visibility)"> <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="UnselectedPointerOver" /> <VisualState x:Name="UnselectedPressed" /> <VisualState x:Name="Focused"> <Storyboard> <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PART_FocusRect" Storyboard.TargetProperty="(UIElement.Visibility)"> <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> The following screenshot shows the drag line indicator color changed, View Sample in GitHubConclusionI hope you enjoyed learning about how to change the color of drag line indicator in WPF TreeGrid (SfTreeGrid).You can refer to our WPF TreeGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
You can update the alternate row style for ListViewItems after reordering in Xamarin.Forms SfListView. C# You can get the items index from the DataSource.DisplayItems collection and return the BackgroundColor based on the item index. namespace ListViewXamarin { public class IndexToColorConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { var listview = parameter as SfListView; var index = listview.DataSource.DisplayItems.IndexOf(value); return index % 2 == 0 ? Color.FromHex("#ffdbf6") : Color.FromHex("#e2fcff"); } } } XAML Converter bound to the BackgroundColor property of the elements loaded inside the SfListView.ItemTemplate. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:ListViewXamarin" xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" x:Class="ListViewXamarin.MainPage"> <ContentPage.BindingContext> <local:ContactsViewModel/> </ContentPage.BindingContext> <ContentPage.Behaviors> <local:Behavior/> </ContentPage.Behaviors> <ContentPage.Resources> <ResourceDictionary> <local:IndexToColorConverter x:Key="IndexToColorConverter"/> </ResourceDictionary> </ContentPage.Resources> <ContentPage.Content> <StackLayout> <syncfusion:SfListView x:Name="listView" ItemsSource="{Binding ContactsInfo}" ItemSize="50" DragStartMode="OnHold"> <syncfusion:SfListView.ItemTemplate> <DataTemplate> <Grid Padding="10,0,0,0" BackgroundColor="{Binding ., Converter={StaticResource IndexToColorConverter}, ConverterParameter={x:Reference Name=listView}}"> <Label LineBreakMode="NoWrap" VerticalTextAlignment="End" Text="{Binding ContactName}"/> <Label Grid.Row="1" VerticalTextAlignment="Start" Text="{Binding ContactNumber}"/> </Grid> </DataTemplate> </syncfusion:SfListView.ItemTemplate> </syncfusion:SfListView> </StackLayout> </ContentPage.Content> </ContentPage> C# The SfListView.ItemDragging event is triggered to update the alternate row styling after reordering the item using the RefreshListViewItem method in the DropAction.Drop action. You need to set the UpdateSource property as true, to update the collection after reordering. namespace ListViewXamarin { public class Behavior : Behavior<ContentPage> { SfListView ListView; protected override void OnAttachedTo(ContentPage bindable) { ListView = bindable.FindByName<SfListView>("listView"); ListView.DragDropController.UpdateSource = true; ListView.ItemDragging += ListView_ItemDragging; base.OnAttachedTo(bindable); } private void ListView_ItemDragging(object sender, ItemDraggingEventArgs e) { if (e.Action == DragAction.Drop) { Device.BeginInvokeOnMainThread(() => { if (e.NewIndex < e.OldIndex) { ListView.RefreshListViewItem(-1, -1, true); } }); } } } } Output View sample in GitHubConclusionI hope you enjoyed learning about how to update alternate row styling on reordering in Xamarin.Forms ListView (SfListView).You can refer to our Xamarin.Forms ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
By default, SfDataGrid doesn’t have a support for display date time value in two format in GridDateTimeColumn. You can achieve this by overriding OnRender method in GridDateTimeCellRenderer. this.sfDataGrid.CellRenderers.Remove("DateTime"); this.sfDataGrid.CellRenderers.Add("DateTime", new GridDateTimeCellRendererExt()); public class GridDateTimeCellRendererExt : GridDateTimeCellRenderer { protected override void OnRender(Graphics paint, Rectangle cellRect, string cellValue, CellStyleInfo style, DataColumnBase column, RowColumnIndex rowColumnIndex) { string[] date = cellValue.Split(); SizeF size = paint.MeasureString(date[0], style.Font.GetFont()); float height = (cellRect.Height - size.Height) / 2; paint.DrawString(date[0], style.Font.GetFont(), new SolidBrush(style.TextColor), cellRect.X, cellRect.Y + height); paint.DrawString(date[1], new Font(style.Font.Facename, style.Font.Size, FontStyle.Bold), new SolidBrush(style.TextColor), cellRect.X + size.Width, cellRect.Y + height); } } View Sample in GitHub
In SfScheduler, you can customize the blacked out dates (trailing, leading and normal days) by using the style of WPF SfScheduler. XAML Styling the blackout dates in Trailing, Leading and Normal days of month view. <Window.Resources> <Style TargetType="syncfusion:MonthCell"> <Style.Triggers> <Trigger Property="DayType" Value="BlackOutDay, NormalDay"> <Setter Property="Foreground" Value="Black"/> <Setter Property="Background" Value="LawnGreen"/> </Trigger> <Trigger Property="DayType" Value="BlackoutDay,LeadingDay"> <Setter Property="Foreground" Value="DarkViolet"/> <Setter Property="Background" Value="Aqua"/> </Trigger> <Trigger Property="DayType" Value="BlackoutDay,TrailingDay"> <Setter Property="Foreground" Value="Red"/> <Setter Property="Background" Value="Yellow"/> </Trigger> </Style.Triggers> </Style> </Window.Resources> <Grid> <syncfusion:SfScheduler x:Name="Schedule" ViewType="Month" > <interactivity:Interaction.Behaviors> <local:SchedulerBehavior/> </interactivity:Interaction.Behaviors> </syncfusion:SfScheduler> </Grid> C# Disable the interaction for certain dates in the scheduler month view by adding those specific dates to the BlackoutDates collection property of MonthViewSettings in SfScheduler. public class SchedulerBehavior : Behavior<SfScheduler> { ObservableCollection<DateTime> blackOutDates = new ObservableCollection<DateTime>(); protected override void OnAttached() { this.AssociatedObject.ViewChanged += AssociatedObject_ViewChanged; } private void AssociatedObject_ViewChanged(object sender, ViewChangedEventArgs e) { blackOutDates.Clear(); for (int i = -2; i < 3; i++) { blackOutDates.Add(DateTime.Now.Date.AddMonths(i).AddDays(2)); blackOutDates.Add(DateTime.Now.Date.AddMonths(i).AddDays(3)); blackOutDates.Add(DateTime.Now.Date.AddMonths(i).AddDays(4)); blackOutDates.Add(DateTime.Now.Date.AddMonths(i).AddDays(5)); blackOutDates.Add(DateTime.Now.Date.AddMonths(i).AddDays(6)); blackOutDates.Add(DateTime.Now.Date.AddMonths(i).AddDays(7)); blackOutDates.Add(DateTime.Now.Date.AddMonths(i).AddDays(8)); blackOutDates.Add(DateTime.Now.Date.AddMonths(i).AddDays(9)); blackOutDates.Add(DateTime.Now.Date.AddMonths(i).AddDays(10)); blackOutDates.Add(DateTime.Now.Date.AddMonths(i).AddDays(11)); blackOutDates.Add(DateTime.Now.Date.AddMonths(i).AddDays(12)); blackOutDates.Add(DateTime.Now.Date.AddMonths(i).AddDays(13)); blackOutDates.Add(DateTime.Now.Date.AddMonths(i).AddDays(14)); blackOutDates.Add(DateTime.Now.Date.AddMonths(i).AddDays(15)); } this.AssociatedObject.MonthViewSettings.BlackoutDates = blackOutDates; } protected override void OnDetaching() { this.AssociatedObject.ViewChanged -= AssociatedObject_ViewChanged; if (blackOutDates != null) blackOutDates = null; } } View sample in GitHub
WPF DataGrid (SfDataGrid) does not provide direct support to change the background color of cell when editing. You can change the background color of the cell when editing in SfDataGrid by customized the editor control TextChanged event based on the corresponding column renderer. this.dataGrid.CellRenderers.Remove("Numeric"); this.dataGrid.CellRenderers.Add("Numeric", new GridCellNumericRendererExt());public class GridCellNumericRendererExt : GridCellNumericRenderer { public override void OnInitializeEditElement(DataColumnBase dataColumn, DoubleTextBox uiElement, object dataContext) { base.OnInitializeEditElement(dataColumn, uiElement, dataContext); uiElement.TextChanged += UiElement_TextChanged; } private void UiElement_TextChanged(object sender, TextChangedEventArgs e) { var doubleTextBox = (sender as DoubleTextBox); //while editing change the condition based on value if (doubleTextBox.Text != "0.00") doubleTextBox.Background = new SolidColorBrush(Colors.Green); else if (doubleTextBox.Text == "0.00") doubleTextBox.Background = new SolidColorBrush(Colors.Red); } } SfDataGrid provides support for various built-in column types. Each column has its own properties and renderer for more details please refer the below documentation link. Documentation Link: https://help.syncfusion.com/wpf/datagrid/column-types Note:The background color of cell when editing changed only editor control in SfDataGrid. You need to apply condition based background color for GridCell based on column type GridCell background is changed using converter, where converter returns the value based on Salary property of underlying record. <Window.Resources> <local:CustomValueConverter x:Key="customValueConverter"/> </Window.Resources><syncfusion:GridNumericColumn MappingName="Salary" > <syncfusion:GridNumericColumn.CellStyle> <Style TargetType="syncfusion:GridCell"> <Setter Property="Background" Value="{Binding Salary, Converter={StaticResource customValueConverter}}" /> </Style> </syncfusion:GridNumericColumn.CellStyle> </syncfusion:GridNumericColumn> public class CustomValueConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { //while change background color based on condition if (value == null || ((value != null) && double.Parse(value.ToString()) == 0)) return new SolidColorBrush(Colors.Red); return new SolidColorBrush(Colors.Green); } public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); } } View WPF DataGrid Change Background Color Demo in GitHub
By default, WinForms DataGrid shows the TableSummaryRow in Left Alignment. You can change TableSummaryRow alignment by customization the HorizontalAligment property of SfDataGrid.Style.TableSummaryRowStyle property. The TableSummaryRowStyle property contains all the settings that are needed for the table summary row appearance customization. // justify the values to be right in the summary rows this.sfDataGrid.Style.TableSummaryRowStyle.HorizontalAlignment = HorizontalAlignment.Right; this.sfDataGrid.Style.GroupSummaryRowStyle.HorizontalAlignment = HorizontalAlignment.Right; this.sfDataGrid.Style.CaptionSummaryRowStyle.HorizontalAlignment = HorizontalAlignment.Right; Note:GroupSummaryRowStyle and CaptionSummaryRowStyle horizontal alignment are customized like the horizontal alignment customization of TableSummaryRowStyle The following screenshot shows the right justify of Table, Group and Caption summary column in SfDataGrid,View Sample in GitHubConclusionI hope you enjoyed learning about how to right justify the summary column in WinForms DataGrid (SfDataGrid).You can refer to our WinForms DataGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WinForms DataGrid example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
By default, SfDataGrid GridProgressBarColumn have maximum value as 100, you can change the this by overriding the OnRender method in GridProgressBarColumnCellRenderer class. this.sfDataGrid.CellRenderers.Remove("ProgressBar"); this.sfDataGrid.CellRenderers.Add("ProgressBar", new GridProgressBarColumnExt(new ProgressBarAdv()));public class GridProgressBarColumnExt : GridProgressBarCellRenderer { ProgressBarAdv ProgressBar; public GridProgressBarColumnExt(ProgressBarAdv progressBar) : base(progressBar) { ProgressBar = progressBar; } protected override void OnRender(Graphics paint, Rectangle cellRect, string cellValue, CellStyleInfo style, DataColumnBase column, RowColumnIndex rowColumnIndex) { ProgressBar.CustomText = cellValue + "%"; ProgressBar.TextStyle = ProgressBarTextStyles.Custom; decimal decimalvalue = decimal.Parse(cellValue); var intvalue = decimal.ToInt32(decimalvalue); cellValue = intvalue.ToString(); base.OnRender(paint, cellRect, cellValue, style, column, rowColumnIndex); } } View Sample in GitHub.ConclusionI hope you enjoyed learning about how to customize the ProgressBarColumn text in WinForms DataGrid.You can refer to our WinForms DataGrid feature tour page to know about its other groundbreaking feature representations documentation and how to quickly get started for configuration specifications. You can also explore our WinForms DataGrid example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
WPF DataGrid (SfDataGrid) does not provide the direct support to change the color of drag line indicator. You can change the color of drag line indicator by overriding the HeaderRowControl and VirtualizingCellsControl Template in WPF DataGrid (SfDataGrid). <Window.Resources> <!-- Header Row Style --> <Style TargetType="syncfusion:HeaderRowControl"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="syncfusion:HeaderRowControl"> <Grid> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True"> <ContentPresenter /> </Border> <Border x:Name="PART_DragLineIndicator" BorderBrush="Red" Visibility="Collapsed" BorderThickness="0,0,0,2" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <!-- Row Style --> <Style TargetType="syncfusion:VirtualizingCellsControl"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="syncfusion:VirtualizingCellsControl"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="BorderStates"> <VisualState x:Name="NormalRow" /> <VisualState x:Name="FrozenRow"> <Storyboard BeginTime="0"> <ThicknessAnimationUsingKeyFrames BeginTime="0" Duration="1" Storyboard.TargetName="PART_RowBorder" Storyboard.TargetProperty="BorderThickness"> <EasingThicknessKeyFrame KeyTime="0" Value="0, 0, 0, 1" /> </ThicknessAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="FooterRow"> <Storyboard BeginTime="0"> <ThicknessAnimationUsingKeyFrames BeginTime="0" Duration="1" Storyboard.TargetName="PART_RowBorder" Storyboard.TargetProperty="BorderThickness"> <EasingThicknessKeyFrame KeyTime="0" Value="0, 1, 0, 0" /> </ThicknessAnimationUsingKeyFrames> <ThicknessAnimationUsingKeyFrames BeginTime="0" Duration="1" Storyboard.TargetName="PART_RowBorder" Storyboard.TargetProperty="Margin"> <EasingThicknessKeyFrame KeyTime="0" Value="0, -1, 0, 0" /> </ThicknessAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border x:Name="PART_RowBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" /> <Rectangle Clip="{TemplateBinding RowBackgroundClip}" Fill="{TemplateBinding Background}" /> <Border Background="{TemplateBinding RowSelectionBrush}" Clip="{TemplateBinding SelectionBorderClipRect}" Visibility="{TemplateBinding SelectionBorderVisiblity}" /> <Border Background="{TemplateBinding RowHoverBackgroundBrush}" BorderBrush="{TemplateBinding RowHoverBackgroundBrush}" BorderThickness="{TemplateBinding RowHighlightBorderThickness}" Clip="{TemplateBinding HighlightBorderClipRect}" SnapsToDevicePixels="True" Visibility="{TemplateBinding HighlightSelectionBorderVisiblity}" /> <Rectangle x:Name="PART_CurrentFocusRow" Margin="{TemplateBinding CurrentFocusBorderMargin}" Stroke="#666666" StrokeDashArray="2,2" StrokeThickness="1" Visibility="{TemplateBinding CurrentFocusRowVisibility}" /> <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <ContentPresenter /> </Border> <Border x:Name="PART_DragLineIndicator" BorderBrush="Red" Visibility="Collapsed" BorderThickness="0,0,0,2" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> The following screenshot shows the drag line indicator color changed, View Sample in GitHub
By default in SfDataGrid, the column and row header of the current cell will not be highlighted. You can highlight the column and row header by creating custom renderer for the column header and row header derived from GridHeaderCellRenderer and GridRowHeaderCellRenderer. public partial class Form1 : Form { /// <summary> /// Initializes the new instance for the Form. /// </summary> public Form1() { InitializeComponent(); sfDataGrid1.DataSource = new OrderInfoCollection().OrdersListDetails; sfDataGrid1.CellRenderers["Header"] = new CustomHeaderCellRenderer(this.sfDataGrid1); sfDataGrid1.CellRenderers["RowHeader"] = new CustomRowHeaderCellRenderer(this.sfDataGrid1); sfDataGrid1.CurrentCellActivated += SfDataGrid1_CurrentCellActivated; } private void SfDataGrid1_CurrentCellActivated(object sender, Syncfusion.WinForms.DataGrid.Events.CurrentCellActivatedEventArgs e) { sfDataGrid1.TableControl.Invalidate(sfDataGrid1.TableControl.GetRowRectangle(sfDataGrid1.TableControl.GetHeaderIndex(),false)); } } public class CustomHeaderCellRenderer : GridHeaderCellRenderer { SfDataGrid DataGrid { get; set; } public CustomHeaderCellRenderer(SfDataGrid DataGrid) { this.DataGrid = DataGrid; } protected override void OnRender(Graphics paint, Rectangle cellRect, string cellValue, CellStyleInfo style, DataColumnBase column, RowColumnIndex rowColumnIndex) { if (rowColumnIndex.ColumnIndex == DataGrid.CurrentCell.ColumnIndex) { style.BackColor = ColorTranslator.FromHtml("#0078d2"); style.TextColor = Color.White; } else { style.BackColor = DataGrid.Style.HeaderStyle.BackColor; style.TextColor = DataGrid.Style.HeaderStyle.TextColor; } base.OnRender(paint, cellRect, cellValue, style, column, rowColumnIndex); } } public class CustomRowHeaderCellRenderer : GridRowHeaderCellRenderer { SfDataGrid DataGrid { get; set; } public CustomRowHeaderCellRenderer(SfDataGrid DataGrid) { this.DataGrid = DataGrid; } protected override void OnRender(Graphics paint, Rectangle cellRect, string cellValue, CellStyleInfo style, DataColumnBase column, RowColumnIndex rowColumnIndex) { if (rowColumnIndex.RowIndex == DataGrid.CurrentCell.RowIndex) style.BackColor = ColorTranslator.FromHtml("#0078d2"); else style.BackColor = DataGrid.Style.RowHeaderStyle.BackColor; base.OnRender(paint, cellRect, cellValue, style, column, rowColumnIndex); } } View Sample in GitHub ConclusionI hope you enjoyed learning about how to highlight the row header and column header of current cell in WinForms DataGrid.You can refer to our WinForms DataGrid feature tour page to know about its other groundbreaking feature representations documentation and how to quickly get started for configuration specifications. You can also explore our WinForms DataGrid example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
This article describes how to customize the legend icon based on series appearance in WPF Chart by following the below steps: Step 1: You can display dotted lines in FastLineSeries by using the StrokeDashArray property. Step 2: The customized line style of FastLineSeries can be shown in the legend icon by applying the LegendIconTemplate as shown in the following code example. XAML: <Grid> <Grid.DataContext> <local:ViewModel/> </Grid.DataContext> <chart:SfChart Margin="10"> <chart:SfChart.Legend> <chart:ChartLegend/> </chart:SfChart.Legend> <chart:SfChart.PrimaryAxis> <chart:CategoryAxis LabelFormat="MMM/dd"/> </chart:SfChart.PrimaryAxis> <chart:SfChart.SecondaryAxis> <chart:NumericalAxis /> </chart:SfChart.SecondaryAxis> <chart:FastLineSeries Label="Series 1" StrokeDashArray="1,1" ItemsSource="{Binding DataCollection}" XBindingPath="Date" YBindingPath="Value"> <chart:FastLineSeries.LegendIconTemplate> <DataTemplate > <Polyline Points="0,8,25,8" Stroke="{Binding Interior}" StrokeThickness="{Binding StrokeThickness}" StrokeDashArray="1,1"/> </DataTemplate> </chart:FastLineSeries.LegendIconTemplate> </chart:FastLineSeries> </chart:SfChart> </Grid> C#: public class Data { public Data(DateTime date, double value) { Date = date; Value = value; } public DateTime Date { get; set; } public double Value { get; set; } } public class ViewModel { public int DataCount = 100; private Random randomNumber; public ObservableCollection<Data> DataCollection { get; set; } public ViewModel() { randomNumber = new Random(); DataCollection = GenerateData(); } public ObservableCollection<Data> GenerateData() { ObservableCollection<Data> datas = new ObservableCollection<Data>(); DateTime date = new DateTime(2000, 1, 1); double value = 100; for (int i = 0; i < this.DataCount; i++) { datas.Add(new Data(date, value)); date = date.Add(TimeSpan.FromDays(5)); if (randomNumber.NextDouble() > .5) { value += randomNumber.NextDouble(); } else { value -= randomNumber.NextDouble(); } } return datas; } } Output: For more details, please refer to the project on GitHub.See also How to modify the label of each legend How to achieve draggable legend in WPF Chart How to create custom legend items in WPF Chart How to wrap the text in WPF Chart Legend How to format the legend text in Chart WPFConclusionI hope you enjoyed learning how to customize the legend Icon based on series appearance in WPF Chart.You can refer to our WPF Chart feature tour page know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF Chart Examples to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
By default, the Tooltip for grid cells will be loaded with CellValue text. To add image in tooltip with existing text, the ToolTipOpening event can be used. In that event, the ToolTipInfo for the items can be updated with image. //Event subscription this.sfDataGrid1.ToolTipOpening += SfDataGrid1_ToolTipOpening; //Event customization private void SfDataGrid1_ToolTipOpening(object sender, ToolTipOpeningEventArgs e) { var record = e.Record as OrderInfo; e.ToolTipInfo.Items.AddRange(new ToolTipItem[] { toolTipItem1, toolTipItem2 }); var recordIndex = this.sfDataGrid1.TableControl.ResolveToRowIndex(record); if (e.RowIndex == recordIndex) { if (record.CustomerID == "FRANS") { e.ToolTipInfo.Items[1].Text = "FRANS"; e.ToolTipInfo.Items[0].Image = Image.FromFile(@"../../Images/FRANS.png"); } } } View sample in GitHub
The WPF DataGrid (SfDataGrid) does not provide the direct support to add an image in RowHeader cells. But you can add an image in the RowHeader cell by customizing the Syncfusion:GridRowHeaderCell. <Window.Resources> <local:RowHeaderConverter x:Key="rowHeaderConverter"/> <Style TargetType="syncfusion:GridRowHeaderCell"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="syncfusion:GridRowHeaderCell"> <Border x:Name="PART_RowHeaderCellBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <Grid> <Image Source="{Binding IsLocked, Converter={StaticResource rowHeaderConverter}}" /> </Grid> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> foreach(var record in datagrid.View.Records) { var data = (record as RecordEntry).Data as OrderInfo; if (data.OrderID % 3 == 0) { //To change the image at run time. data.IsLocked = true; } } View WPF DataGrid Row Header Demo in GitHubConclusion I hope you enjoyed learning about how to add icon on specific row header of WPF DataGrid (SfDataGrid).You can refer to our WPF Grid feature tour page to know about its other groundbreaking feature representations. You can also explore our WPF Grid documentation to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
