This article demonstrates how to apply a full rectangular border to the .NET MAUI ComboBox on all platforms. By default, the ComboBox has a full rectangular border on Mac and iOS platforms. However, on Windows and Android, it only has a bottom border. To achieve a consistent rectangular border across all platforms, you can set the ShowBorder property to False to remove the default border and then wrap the ComboBox inside a Border control. This approach allows you to fully customize the border’s color, thickness, and shape to achieve the desired appearance. Here’s how: XAML <Border Stroke="Red" StrokeShape="RoundRectangle 5"> <editors:SfComboBox ShowBorder="False" Placeholder="Select Here" > <editors:SfComboBox.ItemsSource> <x:Array Type="{x:Type x:String}"> <x:String>Uganda</x:String> <x:String>Ukraine</x:String> <x:String>United States</x:String> <x:String>United Kingdom</x:String> <x:String>Uzbekistan</x:String> </x:Array> </editors:SfComboBox.ItemsSource> </editors:SfComboBox> </Border> In this example, the Border control surrounding the SfComboBox enables full control over the border color, width, and shape. Here, we use a red rounded rectangle border with a radius of 5, creating a visually distinct ComboBox border. Output: Download the complete sample from the GitHub. Conclusion We hope you enjoyed learning how to apply full rectangular border to the .NET MAUI ComboBox. For more information, refer to our .NET MAUI ComboBox’s feature tour page for additional capabilities. You can also explore our .NET MAUI ComboBox documentation for further details. If you’re a Syncfusion customer, access our .NET MAUI components on the License and Downloads page. New to Syncfusion? Try our 30-day free trial to experience the .NET MAUI ComboBox (SfComboBox) and other powerful .NET MAUI components. Feel free to reach out in the comments below with any questions or for further clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We’re here to help!
This article explains how to customize the space between the stroke and image or avatar in .NET MAUI Avatar View. This can be achieved by adjusting the WidthRequest, HeightRequest, and CornerRadius properties of the Border control that wraps the Avatar View. Below is an example of how to implement this in your application. XAML <StackLayout Spacing="5"> <Label Text="Circle Shape Avatar:" HorizontalOptions="Center"/> <Border x:Name="circleBorder" WidthRequest="80" HeightRequest="80" Stroke="Black" StrokeThickness="2"> <Border.StrokeShape> <RoundRectangle x:Name="circleRadius" CornerRadius="40"/> </Border.StrokeShape> <core:SfAvatarView ContentType="AvatarCharacter" AvatarShape="Circle"/> </Border> ... </StackLayout> By modifying the WidthRequest, HeightRequest, and CornerRadius values, you can effectively control the spacing between the stroke and the avatar image to achieve the desired visual effect. Output Download the complete sample from GitHub Conclusion I hope you enjoyed learning how to customize space between stroke and image in MAUI Avatar View. You can refer to our .NET MAUI Avatar View’s 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!
In this article, you can learn about how to set the rounded corners to the Flutter DataGrid. Initialize the SfDataGrid widget with all the required properties and wrap the DataGrid as a child of the Container widget. Set the required BoxDecoration with the borders borderRadius to the Container.decoration property and set the Containers clipBehavior as antiAlias. List<employee> employees = <employee>[]; late EmployeeDataSource employeeDataSource; @override void initState() { super.initState(); employees = getEmployeeData(); employeeDataSource = EmployeeDataSource(employeeData: employees); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Syncfusion Flutter DataGrid'), ), body: Center( child: Container( clipBehavior: Clip.antiAlias, height: 400, width: 700, decoration: BoxDecoration( border: Border.all(color: Colors.red, width: 2), borderRadius: BorderRadius.circular(20), color: Colors.white, ), child: SfDataGrid( source: employeeDataSource, gridLinesVisibility: GridLinesVisibility.both, headerGridLinesVisibility: GridLinesVisibility.both, columnWidthMode: ColumnWidthMode.fill, columns: <gridcolumn>[ GridColumn( columnName: 'id', label: Container( padding: const EdgeInsets.all(16.0), alignment: Alignment.center, child: const Text( 'ID', ))), GridColumn( columnName: 'name', label: Container( padding: const EdgeInsets.all(8.0), alignment: Alignment.center, child: const Text('Name'))), GridColumn( columnName: 'designation', label: Container( padding: const EdgeInsets.all(8.0), alignment: Alignment.center, child: const Text( 'Designation', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'salary', label: Container( padding: const EdgeInsets.all(8.0), alignment: Alignment.center, child: const Text('Salary'))), ], ), ), ), ); }
You can set the rounded corner for the .NET MAUI DataGrid(SfDataGrid) by loading the DataGrid in the Border. XAMLDefine the StrokeShape as RoundRectangle with CornerRadius as 10 for the border to apply rounded corners to the DataGrid. <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:DataGridMAUI" xmlns:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid" x:Class="DataGridMAUI.MainPage"> <ContentPage.BindingContext> <local:ViewModel x:Name="ViewModel"></local:ViewModel> </ContentPage.BindingContext><Border Stroke="LightGray" StrokeThickness="2" StrokeShape="RoundRectangle 10,10,10,10" VerticalOptions="Start" HorizontalOptions="Center"> <syncfusion:SfDataGrid x:Name="dataGrid" AutoGenerateColumnsMode="None" GridLinesVisibility="Both" HeaderGridLinesVisibility="Both" WidthRequest="300" HeightRequest="520" ItemsSource="{Binding OrderInfoCollection}" > <syncfusion:SfDataGrid.Columns> <syncfusion:DataGridNumericColumn MappingName="OrderID" Format="D"> </syncfusion:DataGridNumericColumn> <syncfusion:DataGridTextColumn MappingName="Customer" HeaderText="Name"></syncfusion:DataGridTextColumn> <syncfusion:DataGridTextColumn MappingName="Country"></syncfusion:DataGridTextColumn> </syncfusion:SfDataGrid.Columns> </syncfusion:SfDataGrid> </Border></ContentPage> View Sample on Github Take a moment to pursue this documentation, where you will 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 perform CRUD operations 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!
You can set the rounded corner for the Xamarin.Forms DataGrid (SfDataGrid) by loading the DataGrid in the SfBorder. XAML Define the CornerRadius for the border to apply rounded corners to the DataGrid. <border:SfBorder CornerRadius="10" Margin="10" BorderThickness="2" BorderColor="Gray"> <sfgrid:SfDataGrid x:Name="sfGrid" ColumnSizer="Star" ItemsSource="{Binding OrdersInfo}" /> </border:SfBorder> View sample in GitHub Take a moment to peruse the documentation to learn more about SfBorder with code examples.
The Syncfusion Flutter Data Table widget provides support to set the border i.e grid lines by using following properties, SfDataGrid.gridLinesVisibility: To set the grid lines for the cells other than header and stacked header cells. SfDataGrid.headerGridLinesVisibility: To set the grid lines of header and stacked header cells. Set grid lines for data cells By default, DataGrid shows horizontal grid lines. The following example shows how to set vertical and horizontal grid lines. @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Syncfusion Flutter DataGrid'), ), body: SfDataGrid( source: employeeDataSource, gridLinesVisibility: GridLinesVisibility.both, headerGridLinesVisibility: GridLinesVisibility.both, columnWidthMode: ColumnWidthMode.fill, columns: <GridColumn>[ GridColumn( columnName: 'id', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.center, child: Text( 'ID', ))), GridColumn( columnName: 'name', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.center, child: Text('Name'))), GridColumn( columnName: 'designation', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.center, child: Text( 'Designation', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'salary', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.center, child: Text('Salary'))), ], ), ); } Set grid lines for header cells By default, DataGrid shows horizontal grid lines. The following example shows how to set vertical and horizontal grid lines to header cells. @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Syncfusion Flutter DataGrid'), ), body: SfDataGrid( source: employeeDataSource, gridLinesVisibility: GridLinesVisibility.both, headerGridLinesVisibility: GridLinesVisibility.both, columnWidthMode: ColumnWidthMode.fill, columns: <GridColumn>[ GridColumn( columnName: 'id', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.center, child: Text( 'ID', ))), GridColumn( columnName: 'name', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.center, child: Text('Name'))), GridColumn( columnName: 'designation', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.center, child: Text( 'Designation', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'salary', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.center, child: Text('Salary'))), ], ), ); } Set outer border for DataGrid By default, the bottom border for datagrid will be shown. To show another border i.e. top,left and right, you can wrap the SfDataGrid inside the Container and set the required borders for container. @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Syncfusion Flutter DataGrid'), ), body: Container( decoration: BoxDecoration( border: Border( right: BorderSide(width: 1, color: Color.fromRGBO(0, 0, 0, 0.26)), top: BorderSide(width: 1, color: Color.fromRGBO(0, 0, 0, 0.26)), bottom: BorderSide(width: 1, color: Color.fromRGBO(0, 0, 0, 0.26)), left: BorderSide( width: 1, color: Color.fromRGBO(0, 0, 0, 0.26)))), child: SfDataGrid( source: employeeDataSource, columnWidthMode: ColumnWidthMode.fill, columns: <GridColumn>[ GridColumn( columnName: 'id', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.center, child: Text( 'ID', ))), GridColumn( columnName: 'name', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.center, child: Text('Name'))), GridColumn( columnName: 'designation', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.center, child: Text( 'Designation', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'salary', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.center, child: Text('Salary'))), ], ), ), ); } You can download this example in GitHub.ConclusionI hope you enjoyed learning about how to set border for Flutter Data Table.You can refer to our Flutter Data Table 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 Flutter Data Table 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 KB article explains how to create a Syncfusion SfNumericTextBox without having its border as shown in the following image. It has been achieved by using the custom renderer of Xamarin.Forms SfNumericTextBox with the platform-specific as shown in the following code changes. Create a CustomNumericTextBox class, which is inherited from the SfNumericTextBox. [C#] public class CustomNumericTextBox: SfNumericTextBox { } Control initialization with the custom numericTextBox class. [XAML] <borderless_textbox:CustomNumericTextBox Value="123" HorizontalOptions="Center" VerticalOptions="Center" /> Android It has been achieved by setting the null to the background native numeric control as shown in the following code sample. [C#] protected override void OnElementChanged(ElementChangedEventArgs<SfNumericTextBox> e) { base.OnElementChanged(e); if (Control != null) { Control.Background = null; } } iOS To achieve the same in the iOS, set ‘0’ as a border width of the native control. [C#] protected override void OnElementChanged(ElementChangedEventArgs<SfNumericTextBox> e) { base.OnElementChanged(e); if (Control != null) { Control.BorderStyle = UIKit.UITextBorderStyle.None; Control.Layer.CornerRadius = 0f; Control.Layer.BorderColor = Color.Transparent.ToCGColor(); Control.Layer.BorderWidth = 0; } } UWP Set ‘0’ as a border thickness as shown in the following code sample. [C#] protected override void OnElementChanged(ElementChangedEventArgs<SfNumericTextBox> e) { base.OnElementChanged(e); if (Control != null) { Control.BorderThickness = new Windows.UI.Xaml.Thickness(0); } } View the sample in GitHub. See alsoHow to set the text color, Background color, watermark color, border color in Xamarin Numeric Entry (SfNumericTextBox) How to set the maximum number of Decimal Digits in Xamarin Numeric Entry (SfNumericTextBox) How to set the range support in Xamarin Numeric Entry (SfNumericTextBox) How to provide selection support in Xamarin Numeric Entry (SfNumericTextBox) How to provide Return Type in Xamarin Numeric Entry (SfNumericTextBox)
By default, SfDataGrid having gird lines for each row and column. But we can remove the grid lines for the default row by write style for BorderThickness property of GridCell and remove the grid lines for Header row by write style for BorderThickness property of GridHeaderCellControl and GridHeaderIndentCell. <Page.Resources> <Style TargetType="syncfusion:GridCell"> <Setter Property="BorderThickness" Value="0,0,0,0" /> </Style> <Style TargetType="syncfusion:GridHeaderCellControl"> <Setter Property="BorderThickness" Value="0,0,0,0" /> </Style> <Style TargetType="syncfusion:GridHeaderIndentCell"> <Setter Property="BorderThickness" Value="0,0,0,0" /> </Style> </Page.Resources> The following screenshot shows columns border removed in SfDataGrid, View Sample in GitHub
This article explains how to create a Syncfusion Xamarin NumericUpDown without having their border as shown in the following image. It has been achieved by using the custom renderer of Xamarin.Forms SfNumericUpDown with platform specific as shown in the following code changes. [XAML] Control initialization with custom numericUpDown class. <local:CustomNumericUpDown x:Name="sfNumericUpDown" HeightRequest="100" Value="100" AllowNull="false" FormatString="n"/> Create a CustomNumericUpDown class, which is inherited from SfNumericUpDown. public class CustomNumericUpDown : SfNumericUpDown { } Android It has been achieved by setting the null to the EditText background, which is a child of native numeric control as shown in the following code sample. protected override void OnElementChanged(ElementChangedEventArgs<Syncfusion.SfNumericUpDown.XForms.SfNumericUpDown> e) { base.OnElementChanged(e); if (Control != null) { for (int i = 0; i < Control.ChildCount; i++) { var child = Control.GetChildAt(i); if (child is EditText) { var control = child as EditText; control.Background = null; } } } } iOS To achieve the same in iOS, set the 0 as border width of the native control. protected override void OnElementChanged(ElementChangedEventArgs<Syncfusion.SfNumericUpDown.XForms.SfNumericUpDown> e) { base.OnElementChanged(e); if (this.Control != null) { /// For Achieving Borderwidth customization. this.Control.Layer.BorderWidth = 0f; } } UWP By setting the 0 as border thickness as shown in the following code sample. protected override void OnElementChanged(ElementChangedEventArgs<SfNumericUpDown> e) { base.OnElementChanged(e); if (Control != null) { Control.BorderThickness = new Windows.UI.Xaml.Thickness(0); } } View the sample in GitHub. See alsoHow to change border thickness of numeric controlSpin Button Customization in Xamarin NumericUpDown (SfNumericUpDown)How to customize the color appearance of numeric controls in Xamarin.FormsHow to customize the spin button of the NumericUpDownAuto Reverse in Xamarin NumericUpDown (SfNumericUpDown) ConclusionI hope you enjoyed learning how to create a borderless Xamarin.Forms numeric control (SfNumericUpDown).You can refer to our Xamarin .Forms NumericUpDown feature tour page to know about its other groundbreaking feature representations 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 show the frame around each group and group items with the help of converter by changing the border thickness of the GroupHeaderItem and ListViewItem in Xamarin.Forms SfListView. XAML ItemTemplate and GroupHeaderTemplate are defined with the converter that defines the border thickness. <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.Resources> <local:ThicknessConverter x:Key="converter"/> </ContentPage.Resources> <ContentPage.Behaviors> <local:Behavior/> </ContentPage.Behaviors> <ContentPage.Content> <syncfusion:SfListView x:Name="listView" GroupHeaderSize="50" ItemSize="60" Margin="10" ItemsSource="{Binding contactsinfo}"> <syncfusion:SfListView.ItemTemplate> <DataTemplate> <Grid BackgroundColor="Gray"> <Grid Padding="5,0,0,0" BackgroundColor="White" x:Name="grid" Margin="{Binding Converter={StaticResource converter}, ConverterParameter={x:Reference listView}}" > <Grid.ColumnDefinitions> <ColumnDefinition Width="50" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50"/> <Grid Grid.Column="1" Padding="10,0,0,0" VerticalOptions="Center"> <Label LineBreakMode="WordWrap" TextColor="#474747" Text="{Binding ContactName}"/> <Label Grid.Row="1" Grid.Column="0" TextColor="#474747" Text="{Binding ContactNumber}"/> </Grid> </Grid> </Grid> </DataTemplate> </syncfusion:SfListView.ItemTemplate> <syncfusion:SfListView.GroupHeaderTemplate> <DataTemplate> <Grid BackgroundColor="Gray" Margin="0,10,0,0"> <Grid BackgroundColor="White" Margin="{Binding Converter={StaticResource converter}, ConverterParameter={x:Reference listView}}"> <Grid Margin="5"> <Frame Padding="5,0,0,0" HasShadow="False" OutlineColor="LightGray" BackgroundColor="AliceBlue"> <Label x:Name="label" Text="{Binding Key}" FontSize="20" FontAttributes="Bold" VerticalOptions="Center" HorizontalOptions="Start"/> </Frame> </Grid> </Grid> </Grid> </DataTemplate> </syncfusion:SfListView.GroupHeaderTemplate> </syncfusion:SfListView> </ContentPage.Content> </ContentPage> C# Thickness returned based on the ListView item, GroupHeader item and the last item of the group. namespace ListViewXamarin { public class ThicknessConverter : IValueConverter { Thickness groupBorderThickness; Thickness lastItemThickness; Thickness defaultThickness; public ThicknessConverter() { groupBorderThickness = new Thickness(1, 1, 1, 0); defaultThickness = new Thickness(1, 0, 1, 0); lastItemThickness = new Thickness(1, 0, 1, 1); } public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { var listView = parameter as SfListView; var itemData = value as Contacts; object key = null; GroupResult actualGroup = null; var descriptor = listView.DataSource.GroupDescriptors[0]; if (value == null) return defaultThickness; if (itemData == null) return groupBorderThickness; else { key = descriptor.KeySelector(itemData); for (int i = 0; i < listView.DataSource.Groups.Count; i++) { var group = listView.DataSource.Groups[i]; if ((group.Key != null && group.Key.Equals(key)) || group.Key == key) { actualGroup = group; break; } } var lastItem = actualGroup.GetGroupLastItem(); if (lastItem == itemData) return lastItemThickness; return defaultThickness; } } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { return value; } } } Output View sample in GitHub
In WPF GridControl, You can show border around the selection by setting ExcelLikeSelectionFrame property to true. You can change the border color excel-like selection frame by setting HighlightedSelectionBorder property. C# grid.Model.Options.AllowSelection = Syncfusion.Windows.Controls.Grid.GridSelectionFlags.Cell; grid.Model.Options.ExcelLikeSelectionFrame = true; grid.Model.Options.HighlightSelectionBorder = Brushes.Green; 1. AllowSelection property set to `Cell`. 2. AllowSelection property set to `Row`. 3. AllowSelection property set to `Column` Sample: View sample in GitHub
You can highlight each selected cell with special border when it is selected using grid.Model.QueryCellInfo event and SelectionChanged event. Refer the below code for your reference where selected cells border changed in QueryCellInfo event and previous selection get cleared by invalidating the entire grid in SelectionChanged event. C# grid.Model.SelectionChanged += Model_SelectionChanged; grid.Model.QueryCellInfo += Model_QueryCellInfo; private void Model_QueryCellInfo(object sender, GridQueryCellInfoEventArgs e) { if (e.Cell.RowIndex > 0 && e.Cell.ColumnIndex > 0) { if (grid.Model.SelectedRanges.AnyRangeContains(GridRangeInfo.Cell(e.Cell.RowIndex, e.Cell.ColumnIndex))) { e.Style.Borders.All = new Pen(Brushes. DarkGreen, 2); } } } private void Model_SelectionChanged(object sender, GridSelectionChangedEventArgs e) { if(e.Reason==GridSelectionReason.MouseDown || e.Reason==GridSelectionReason.MouseUp) { grid.InvalidateCells(); } } Sample: View sample in GitHub
To change the border style of GridControl, add grid control inside the Border element and change the border style like CornerRadius, BorderThickness, etc. To customize the appearance of scrollbar thumb and scrollbar buttons, create the custom control templates for vertical and horizontal scrollbar and modify the Template property value with custom control templates. Please refer the sample demo. Code snippet <!--Code for ScrollBar resource--> <Grid> <Border BorderBrush="Black" CornerRadius="5" BorderThickness="1"> <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True"> <syncfusion:GridControl x:Name="grid"/> </ScrollViewer> </Border> </Grid> Download Demo from
In addition to the available public properties in SfTextInputLayout, you can deeply customize the SfTextInputLayout using the DynamicResource keys also. The following code sample demonstrates how to style the border and labels used in SfTextInputLayout using the following DynamicResource keys: SfTextInputLayoutFloatedHintUnfocusedColor SfTextInputLayoutLineColor SfTextInputLayoutHelperTextColor SfTextInputLayoutCounterLabelColor Similarly, you can customize the appearance of the SfTextInputLayout by overriding the corresponding keys. You can check the keys and the UI elements to which they are mapped in this documentation. Code snippets [Xaml]: <ContentPage.Resources> <syncTheme:SyncfusionThemeDictionary> <syncTheme:SyncfusionThemeDictionary.MergedDictionaries> <ResourceDictionary> <x:String x:Key="SfTextInputLayoutTheme">CustomTheme</x:String> <Color x:Key="SfTextInputLayoutFloatedHintUnfocusedColor">Blue</Color> <Color x:Key="SfTextInputLayoutLineColor">Red</Color> <Color x:Key="SfTextInputLayoutHelperTextColor">Green</Color> <Color x:Key="SfTextInputLayoutCounterLabelColor">Violet</Color> </ResourceDictionary> </syncTheme:SyncfusionThemeDictionary.MergedDictionaries> </syncTheme:SyncfusionThemeDictionary> </ContentPage.Resources> <StackLayout> <inputLayout:SfTextInputLayout ContainerType="Outlined" EnablePasswordVisibilityToggle="true" HelperText="Enter password" Hint="Password" ShowCharCount="True"> <Entry Text="John" /> </inputLayout:SfTextInputLayout> </StackLayout> Output:
Syncfusion Excel (XlsIO) library is a .NET Excel library used to create, read, and edit Excel documents. Also, converts Excel documents to PDF files. Using this library, you can remove the border line for an Excel text box. Steps to remove the border line of text box, programmatically: Step 1: Create a new C# console application project. Create a new C# console application project Step 2: Install the Syncfusion.XlsIO.WinForms NuGet package as reference to your .NET Framework application from NuGet.org. Install NuGet package to the project Step 3: The border line for an Excel text box can be removed by disabling the Visible property available under IShapeLineFormat interface. C# //Remove the border line for text box chart.TextBoxes[0].Line.Visible = false; VB.NET 'Remove the border line for text box chart.TextBoxes(0).Line.Visible = False Step 4: Add an Excel file to you project and make it an embedded resource using the following steps. In Visual Studio, click the Project menu and select Add Existing Item. Find and select the Excel file you want to add to your project. In the Solution Explorer window, right-click on the Excel file you just added to your project and select Properties from the popup menu. The Properties tool window appears. In the Properties window, change the Build Action property to Embedded Resource. Build the project. The Excel file will be compiled into your project’s assembly. Step 5: Include the following namespaces in Program.cs file. C# using Syncfusion.XlsIO; using System.IO; using System.Reflection; VB.NET Imports Syncfusion.XlsIO Imports System.IO Imports System.Reflection Step 6: Include the following code snippet in main method of Program.cs file to remove the border line of an Excel text box. C# using (ExcelEngine excelEngine = new ExcelEngine()) { //Initialize the Excel application object IApplication application = excelEngine.Excel; //Load an existing Excel document into IWorkbook Assembly assembly = typeof(Program).GetTypeInfo().Assembly; Stream inputStream = assembly.GetManifestResourceStream("RemoveBorder.Sample.xlsx"); IWorkbook workbook = application.Workbooks.Open(inputStream); //Get the first worksheet in the workbook into IWorksheet IWorksheet worksheet = workbook.Worksheets[0]; //Get the chart in worksheet into IChartShape IChartShape chart = workbook.Worksheets[0].Charts[0]; //Add text box in the chart chart.TextBoxes.AddTextBox(1, 1, 100, 200); //Set the position for text box chart.TextBoxes[0].Top = 850; chart.TextBoxes[0].Left = 765; //Add text for the text box chart.TextBoxes[0].Text = "Yearly Profit"; //Remove the border line for text box chart.TextBoxes[0].Line.Visible = false; //Save the Excel document workbook.SaveAs("Output.xlsx"); } VB.NET Using excelEngine As ExcelEngine = New ExcelEngine() 'Initialize the Excel application object Dim application As IApplication = excelEngine.Excel 'Load an existing Excel document into IWorkbook Dim assembly As Assembly = GetType(Module1).GetTypeInfo.Assembly Dim inputStream As Stream = assembly.GetManifestResourceStream("RemoveBorder.Sample.xlsx") Dim workbook As IWorkbook = application.Workbooks.Open(inputStream) 'Get the first worksheet in the workbook into IWorksheet Dim worksheet As IWorksheet = workbook.Worksheets(0) 'Get the chart in worksheet into IChartShape Dim chart As IChartShape = workbook.Worksheets(0).Charts(0) 'Add text box in the chart chart.TextBoxes.AddTextBox(1, 1, 100, 200) 'Set the position for text box chart.TextBoxes(0).Top = 850 chart.TextBoxes(0).Left = 765 'Add text for the text box chart.TextBoxes(0).Text = "Yearly Profit" 'Remove the border line for text box chart.TextBoxes(0).Line.Visible = False 'Save the Excel document workbook.SaveAs("Output.xlsx") End Using A complete working sample of how to remove the border line for an Excel text box can be downloaded from RemoveBorder.zip. By executing the program, you will get the output Excel file as follows. Output Excel document Take a moment to peruse the documentation, where you will find other options like form controls, comments, auto shapes, group shapes, and OLE objects will code samples. Click here to explore the rich set of Syncfusion Excel (XlsIO) library features. Note:Starting with v16.2.0.x, if you reference Syncfusion assemblies from trial setup or from the NuGet feed, include a license key in your projects. Refer the link to learn about generating and registering Syncfusion license key in your application to use the components without trail message.
You can change the border around each stacked header column by writing style for GridStackedHeaderCellControl in WPF DataGrid (SfDataGrid). For applying the same border thickness over the complete grid, write style for GridHeaderCellControl and GridCell. Refer to the example code example to write style for GridStackedHeaderCellControl. public class StackedHeaderConverter : IValueConverter { int previousChildColumnIndex = -1; public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { var stackedColumn = value as StackedColumn; var dataGrid = Application.Current.MainWindow.FindName("sfdatagrid") as SfDataGrid; string[] childcolumns = stackedColumn.ChildColumns.Split(','); string firstChildColumn = childcolumns.FirstOrDefault(); var column = dataGrid.Columns[firstChildColumn]; var colindex = dataGrid.Columns.IndexOf(column); //If style is applied for previous stackedheader cell, no need to apply left border for currentcell. if (colindex != 0 && previousChildColumnIndex == colindex - 1) return new Thickness(0, 0, 3, 1); var previousLastColumn = childcolumns.LastOrDefault(); previousChildColumnIndex = dataGrid.Columns.IndexOf(dataGrid.Columns[previousLastColumn]); return new Thickness(3, 0, 3, 1); } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } } Refer to the following code example to write style for GridHeaderCellControl. public class HeaderConverter : IValueConverter { //To find whether style is applied for previous HeaderCell. bool isStyleApplied = false; public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { var gridColumn = value as GridColumn; var dataGrid = Application.Current.MainWindow.FindName("sfdatagrid") as SfDataGrid; if (gridColumn == dataGrid.Columns.FirstOrDefault()) isStyleApplied = false; foreach (var row in dataGrid.StackedHeaderRows) { var stackedColumns = row.StackedColumns; foreach (var column in stackedColumns) { string[] childcolumns = column.ChildColumns.Split(','); //If there is only one child column, need to apply border for both left and right unless right border for previous cell is not applied. if (gridColumn != null && childcolumns.Count() == 1 && gridColumn.MappingName == childcolumns.FirstOrDefault() && !isStyleApplied) { isStyleApplied = true; return new Thickness(3, 0, 3, 1); } else if (gridColumn != null && gridColumn.MappingName == childcolumns.LastOrDefault()) { isStyleApplied = true; return new Thickness(0, 0, 3, 1); } //if the cell if first child column, need to check right border of previous cell's right border. else if (gridColumn != null && gridColumn.MappingName == childcolumns.FirstOrDefault() && !isStyleApplied) { isStyleApplied = true; return new Thickness(3, 0, 1, 1); } } } isStyleApplied = false; return new Thickness(0, 0, 1, 1); } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } } Refer to the following code example to apply style for GridCell. public class CustomStyleSelector : StyleSelector { //To find whether style is applied for previous GridCell. bool isStyleApplied = false; public override Style SelectStyle(object item, DependencyObject container) { var data = item as Model; if (data == null) return base.SelectStyle(item, container); var gridCell = container as GridCell; var gridColumn = gridCell.ColumnBase.GridColumn; var dataGrid = Application.Current.MainWindow.FindName("sfdatagrid") as SfDataGrid; //Need to set isStyleApplied false for the new row if (gridColumn == dataGrid.Columns.FirstOrDefault()) isStyleApplied = false; foreach (var row in dataGrid.StackedHeaderRows) { var stackedColumns = row.StackedColumns; foreach (var column in stackedColumns) { string[] childcolumns = column.ChildColumns.Split(','); //If there is only one child column, need to apply border for both left and right unless right border for previous cell is not applied. if (data != null && childcolumns.Count() == 1 && gridColumn.MappingName == childcolumns.FirstOrDefault() && !isStyleApplied) { isStyleApplied = true; return Application.Current.Resources["gridCellStyle3"] as Style; } else if (data != null && gridColumn.MappingName == childcolumns.LastOrDefault()) { isStyleApplied = true; return Application.Current.Resources["gridCellStyle2"] as Style; } //if the cell if first child column, need to check right border of previous cell's right border. else if (data != null && gridColumn.MappingName == childcolumns.FirstOrDefault() && !isStyleApplied) { isStyleApplied = true; return Application.Current.Resources["gridCellStyle1"] as Style; } } } isStyleApplied = false; return base.SelectStyle(item, container); } } XAML: <Window.Resources> <local:StackedHeaderConverter x:Key="stackedHeaderConverter"/> <local:HeaderConverter x:Key="headerConverter"/> <local:CustomStyleSelector x:Key="cellStyleSelector"/> <Style TargetType="Syncfusion:GridStackedHeaderCellControl"> <Setter Property="BorderThickness" Value="{Binding Converter={StaticResource stackedHeaderConverter}}"/> </Style> <Style TargetType="Syncfusion:GridHeaderCellControl"> <Setter Property="BorderThickness" Value="{Binding Converter={StaticResource headerConverter}}"/> </Style> </Window.Resources> <Syncfusion:SfDataGrid Name="sfdatagrid" AllowEditing="True" AllowFiltering="True" CellStyleSelector="{StaticResource cellStyleSelector}" ItemsSource="{Binding EmployeeDetails}"/> View WPF DataGrid Stacked Headers Demo in GitHub
By default, if the header cell type is set to TextBox, the cell borders of those cells will be disappeared. To draw the borders for the header cells, use the e.Style.Borders property of QueryCellInfo event. Code Snippet C# //Event Triggering. this.gridControl1.QueryCellInfo += gridControl1_QueryCellInfo; //Event Handling. void gridControl1_QueryCellInfo(object sender, GridQueryCellInfoEventArgs e) { if (e.ColIndex == 0) { e.Style.CellType = GridCellTypeName.TextBox; e.Style.Borders.Bottom = e.Style.Borders.Right = new GridBorder(GridBorderStyle.Solid, Color.FromArgb(100, 100, 100), GridBorderWeight.Thin); e.Style.Borders.Top = e.Style.Borders.Left = new GridBorder(GridBorderStyle.Solid, Color.White, GridBorderWeight.Thin); } } VB 'Event Triggering. AddHandler Me.gridControl1.QueryCellInfo, AddressOf gridControl1_QueryCellInfo 'Event Handling. Private Sub gridControl1_QueryCellInfo(ByVal sender As Object, ByVal e As GridQueryCellInfoEventArgs) If e.ColIndex = 0 Then e.Style.CellType = GridCellTypeName.TextBox e.Style.Borders.Right = New GridBorder(GridBorderStyle.Solid, Color.FromArgb(100, 100, 100), GridBorderWeight.Thin) e.Style.Borders.Bottom = e.Style.Borders.Right e.Style.Borders.Left = New GridBorder(GridBorderStyle.Solid, Color.White, GridBorderWeight.Thin) e.Style.Borders.Top = e.Style.Borders.Left End If End Sub Sample Links: C#: Cell border for TextBox celltype_CS VB: Cell border for TextBox celltype_VB
User can hide the border of SfAccordionItems. It can be achieved by setting the BorderThickness property value in ItemContainerStyle of the SfAccordion. The following code demonstrates the same. Code Example: [Xaml] <layout:SfAccordion x:Name="accordion" Grid.Row="1" Width="300" Height="250" > <layout:SfAccordion.ItemContainerStyle> <Style TargetType="layout:SfAccordionItem"> <!-- Set Border Thickness --> <Setter Property="BorderThickness" Value="0"/> </Style> </layout:SfAccordion.ItemContainerStyle> <layout:SfAccordionItem Header="WPF"/> <layout:SfAccordionItem Header="Silverlight"/> <layout:SfAccordionItem Header="WinRT"/> <layout:SfAccordionItem Header="Windows Phone"/> <layout:SfAccordionItem Header="Universal"/> </layout:SfAccordion> Screenshot Sample: SfAccordionBorderSample
