Grid and borders

DataGridSample/DataGridSample/Views/MainPage.xaml

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8" ?>
+<?xml version="1.0" encoding="utf-8" ?>
 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="DataGridSample.MainPage"
@@ -10,9 +10,10 @@
 
 
         <dg:DataGrid ItemsSource="{Binding Teams}" SelectionEnabled="True" SelectedItem="{Binding SelectedTeam}"
-                 RowHeight="70" HeaderHeight="50" BorderColor="#CCCCCC" HeaderBackground="#E0E6F8"
+                 RowHeight="70" HeaderHeight="50" BorderColor="#CCCCCC" HeaderLabelStyle="{StaticResource HeaderStyle}"
                  PullToRefreshCommand="{Binding RefreshCommand}" IsRefreshing="{Binding IsRefreshing}"
-                 ActiveRowColor="#8899AA">
+                 ActiveRowColor="#8899AA" ColumnSeparatorWidth="2.5" RowSeparatorHeight="1.5" 
+				 BorderThickness="4" CellPadding="8" HeaderBordersVisible="true">
             <dg:DataGrid.HeaderFontSize>
                 <OnIdiom  x:TypeArguments="x:Double">
                     <OnIdiom.Tablet>15</OnIdiom.Tablet>
@@ -52,6 +53,11 @@
             <dg:DataGrid.Resources>
                 <ResourceDictionary>
                     <conv:StreakToColorConverter x:Key="StreakToColorConverter"/>
+					<Style x:Key="HeaderStyle" TargetType="Label" BaseResourceKey="HeaderDefaultStyle">
+						<Setter Property="FontFamily" Value="Helvetica Neue"/>
+						<Setter Property="FontSize" Value="11"/>
+						<Setter Property="BackgroundColor" Value="#E0E6F8"/>
+					</Style>
                 </ResourceDictionary>
             </dg:DataGrid.Resources>
         </dg:DataGrid>

Xamarin.Forms.DataGrid/DataGrid.xaml

@@ -4,8 +4,9 @@
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:Xamarin.Forms.DataGrid;assembly=Xamarin.Forms.DataGrid"
       x:Class="Xamarin.Forms.DataGrid.DataGrid"
-      Padding="0"
-      RowSpacing="0">
+      RowSpacing="0"
+	  BackgroundColor="{Binding BorderColor, Source={x:Reference self}}"
+	>
 
 	<Grid.RowDefinitions>
 		<RowDefinition Height="Auto"/>
@@ -19,14 +20,11 @@
 				<Style x:Key="HeaderDefaultStyle" TargetType="Label">
 					<Setter Property="FontSize" Value="{Binding HeaderFontSize, Source={x:Reference self}}"/>
 					<Setter Property="FontAttributes" Value="Bold"/>
-					<Setter Property="HorizontalOptions" Value="Center"/>
+					<Setter Property="HorizontalOptions" Value="{Binding HorizontalContentAlignment}"/>
 					<Setter Property="VerticalOptions" Value="Center"/>
 					<Setter Property="TextColor" Value="{Binding HeaderTextColor,Source={x:Reference self}}"/>
 					<Setter Property="LineBreakMode" Value="WordWrap"/>
 				</Style>
-				<Style TargetType="Grid">
-					<Setter Property="BackgroundColor" Value="{Binding HeaderBackground,Source={x:Reference self}}"/>
-				</Style>
 				<Style x:Key="ImageStyleBase" TargetType="Image">
 					<Setter Property="Aspect" Value="AspectFill"/>
 					<Setter Property="VerticalOptions" Value="Center"/>
@@ -47,8 +45,7 @@
 
 	<ListView x:Name="_listView" Grid.Row="1"
             CachingStrategy="RecycleElement"
-            SeparatorVisibility="Default"
-						SeparatorColor="{Binding BorderColor, Source={x:Reference self}}"
+            SeparatorVisibility="None"
             RowHeight="{Binding RowHeight, Source={x:Reference self}}">
 		<ListView.ItemTemplate>
 			<local:DataGridRowTemplateSelector/>

Xamarin.Forms.DataGrid/DataGrid.xaml.cs

@@ -6,6 +6,7 @@
 using System.Windows.Input;
 using System.Collections.Specialized;
 using Xamarin.Forms.DataGrid.Utils;
+using System.Globalization;
 
 namespace Xamarin.Forms.DataGrid
 {
@@ -19,27 +20,11 @@ public partial class DataGrid : Grid
 		public static readonly BindableProperty ActiveRowColorProperty =
 			BindableProperty.Create(nameof(ActiveRowColor), typeof(Color), typeof(DataGrid), Color.FromRgb(128, 144, 160));
 
-		public static readonly BindableProperty HeaderBackgroundProperty =
-			BindableProperty.Create(nameof(HeaderBackground), typeof(Color), typeof(DataGrid), Color.White,
-				propertyChanged: (b, o, n) =>
-				{
-					if ((b as DataGrid)._headerView == null)
-						return;
-					if (!(b as DataGrid).HeaderBordersVisible)
-						(b as DataGrid)._headerView.BackgroundColor = (Color)n;
-				});
-
 		public static readonly BindableProperty HeaderTextColorProperty =
 			BindableProperty.Create(nameof(HeaderTextColor), typeof(Color), typeof(DataGrid), Color.Black);
 
 		public static readonly BindableProperty BorderColorProperty =
-			BindableProperty.Create(nameof(BorderColor), typeof(Color), typeof(DataGrid), Color.Black,
-				propertyChanged: (b, o, n) =>
-				{
-					//TODO reload ListView
-					if ((b as DataGrid).HeaderBordersVisible)
-						(b as DataGrid)._headerView.BackgroundColor = (Color)n;
-				});
+			BindableProperty.Create(nameof(BorderColor), typeof(Color), typeof(DataGrid), Color.Black);
 
 		public static readonly BindableProperty RowsBackgroundColorPaletteProperty =
 			BindableProperty.Create(nameof(RowsBackgroundColorPalette), typeof(PaletteCollection), typeof(DataGrid), new PaletteCollection { Color.White });
@@ -71,15 +56,15 @@ public partial class DataGrid : Grid
 
 						self.InternalItems = new List<object>(((IEnumerable)n).Cast<object>());
 					}
-         
-					if (self.NoDataView != null) 
-          {
-            if (self.ItemsSource == null || self.InternalItems.Count() == 0)
-						  self._noDataView.IsVisible = true;
-					  else if (self._noDataView.IsVisible)
-				      self._noDataView.IsVisible = false;
-          }
-          
+
+					if (self.NoDataView != null)
+					{
+						if (self.ItemsSource == null || self.InternalItems.Count() == 0)
+							self._noDataView.IsVisible = true;
+						else if (self._noDataView.IsVisible)
+							self._noDataView.IsVisible = false;
+					}
+
 				});
 
 		void HandleItemsSourceCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
@@ -140,15 +125,7 @@ void HandleItemsSourceCollectionChanged(object sender, NotifyCollectionChangedEv
 
 		public static readonly BindableProperty BorderThicknessProperty =
 			BindableProperty.Create(nameof(BorderThickness), typeof(Thickness), typeof(DataGrid), new Thickness(1),
-				propertyChanged: (b, o, n) =>
-				{
-					(b as DataGrid)._headerView.ColumnSpacing = ((Thickness)n).HorizontalThickness / 2;
-					(b as DataGrid)._headerView.Padding = ((Thickness)n).HorizontalThickness / 2;
-				});
-
-		public static readonly BindableProperty HeaderBordersVisibleProperty =
-			BindableProperty.Create(nameof(HeaderBordersVisible), typeof(bool), typeof(DataGrid), true,
-				propertyChanged: (b, o, n) => (b as DataGrid)._headerView.BackgroundColor = (bool)n ? (b as DataGrid).BorderColor : (b as DataGrid).HeaderBackground);
+				propertyChanged: (b, n, o) => (b as DataGrid).UpdateBorders());
 
 		public static readonly BindableProperty SortedColumnIndexProperty =
 			BindableProperty.Create(nameof(SortedColumnIndex), typeof(int), typeof(DataGrid), -1, BindingMode.TwoWay,
@@ -180,6 +157,25 @@ void HandleItemsSourceCollectionChanged(object sender, NotifyCollectionChangedEv
 					if (o != n)
 						(b as DataGrid)._noDataView.Content = n as View;
 				});
+
+		public static readonly BindableProperty ColumnSeparatorWidthProperty =
+			BindableProperty.Create(nameof(ColumnSeparatorWidth), typeof(double), typeof(DataGrid), 1.0,
+				propertyChanged: (b, n, o) => (b as DataGrid).UpdateBorders());
+
+		public static readonly BindableProperty RowSeparatorHeightProperty =
+			BindableProperty.Create(nameof(RowSeparatorHeight), typeof(double), typeof(DataGrid), 1.0,
+				propertyChanged: (b, n, o) => (b as DataGrid).UpdateBorders());
+
+		public static readonly BindableProperty CellPaddingProperty =
+			BindableProperty.Create(nameof(CellPadding), typeof(Thickness), typeof(DataGrid), new Thickness(2));
+
+		public static readonly BindableProperty HeaderBordersVisibleProperty =
+			BindableProperty.Create(nameof(HeaderBordersVisible), typeof(bool), typeof(DataGrid), true,
+				propertyChanged: (b, o, n) => (b as DataGrid).UpdateBorders());
+
+		public static readonly BindableProperty HeaderBackgroundProperty =
+			BindableProperty.Create(nameof(HeaderBackground), typeof(Color), typeof(DataGrid), Color.White);
+
 		#endregion
 
 		#region properties
@@ -189,12 +185,6 @@ public Color ActiveRowColor
 			set { SetValue(ActiveRowColorProperty, value); }
 		}
 
-		public Color HeaderBackground
-		{
-			get { return (Color)GetValue(HeaderBackgroundProperty); }
-			set { SetValue(HeaderBackgroundProperty, value); }
-		}
-
 		[Obsolete("Please use HeaderLabelStyle")]
 		public Color HeaderTextColor
 		{
@@ -315,12 +305,6 @@ public Thickness BorderThickness
 			set { SetValue(BorderThicknessProperty, value); }
 		}
 
-		public bool HeaderBordersVisible
-		{
-			get { return (bool)GetValue(HeaderBordersVisibleProperty); }
-			set { SetValue(HeaderBordersVisibleProperty, value); }
-		}
-
 		public int SortedColumnIndex
 		{
 			get { return (int)GetValue(SortedColumnIndexProperty); }
@@ -362,6 +346,36 @@ public View NoDataView
 			get { return (View)GetValue(NoDataViewProperty); }
 			set { SetValue(NoDataViewProperty, value); }
 		}
+
+		public double ColumnSeparatorWidth
+		{
+			get { return (double)GetValue(ColumnSeparatorWidthProperty); }
+			set { SetValue(ColumnSeparatorWidthProperty, value); }
+		}
+
+		public double RowSeparatorHeight
+		{
+			get { return (double)GetValue(RowSeparatorHeightProperty); }
+			set { SetValue(RowSeparatorHeightProperty, value); }
+		}
+
+		public Thickness CellPadding
+		{
+			get { return (Thickness)GetValue(CellPaddingProperty); }
+			set { SetValue(CellPaddingProperty, value); }
+		}
+
+		public bool HeaderBordersVisible
+		{
+			get { return (bool)GetValue(HeaderBordersVisibleProperty); }
+			set { SetValue(HeaderBordersVisibleProperty, value); }
+		}
+
+		public Color HeaderBackground
+		{
+			get { return (Color)GetValue(HeaderBackgroundProperty); }
+			set { SetValue(HeaderBackgroundProperty, value); }
+		}
 		#endregion
 
 		#region fields
@@ -414,9 +428,27 @@ private View GetHeaderViewForColumn(DataGridColumn column)
 
 			Grid grid = new Grid
 			{
+				BindingContext = column,
 				ColumnSpacing = 0,
 			};
 
+			grid.SetBinding(PaddingProperty,
+					new Binding(CellPaddingProperty.PropertyName, BindingMode.OneWay, source: this));
+
+			grid.SetBinding(BackgroundColorProperty,
+					new Binding(BackgroundColorProperty.PropertyName, BindingMode.OneWay, source: column.HeaderLabel));
+
+			grid.Triggers.Add(new DataTrigger(typeof(Grid))
+			{
+				Binding = new Binding(BackgroundColorProperty.PropertyName, BindingMode.OneWay, source: column.HeaderLabel),
+				Value = Color.Transparent,
+				Setters = { new Setter() {
+						Property = BackgroundColorProperty,
+						Value = HeaderBackground
+					}}
+			});
+
+
 			grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
 			grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Auto) });
 
@@ -453,8 +485,10 @@ private void InitHeaderView()
 			_headerView.ColumnDefinitions.Clear();
 			_sortingOrders.Clear();
 
-			_headerView.Padding = new Thickness(BorderThickness.Left, BorderThickness.Top, BorderThickness.Right, 0);
-			_headerView.ColumnSpacing = BorderThickness.HorizontalThickness / 2;
+			_headerView.SetBinding(BackgroundColorProperty,
+						   new Binding(BorderColorProperty.PropertyName, BindingMode.OneWay, source: this));
+
+			UpdateBorders();
 
 			foreach (var col in Columns)
 			{
@@ -468,9 +502,27 @@ private void InitHeaderView()
 				_sortingOrders.Add(Columns.IndexOf(col), SortingOrder.None);
 			}
 		}
+		#endregion
 
+		#region Border methods
+		private void UpdateBorders()
+		{
+			if (HeaderBordersVisible)
+			{
+				_headerView.ColumnSpacing = ColumnSeparatorWidth;
+				_headerView.Margin = new Thickness(BorderThickness.Left, BorderThickness.Top, BorderThickness.Right, RowSeparatorHeight);
+			}
+			else
+			{
+				_headerView.ColumnSpacing = 0;
+				_headerView.Margin = new Thickness(0, 0, 0, RowSeparatorHeight);
+			}
+
+			_listView.Margin = new Thickness(BorderThickness.Left, 0, BorderThickness.Right, BorderThickness.Bottom);
+		}
 		#endregion
 
+
 		#region Sorting methods
 		private void SortItems(int propertyIndex, bool changeOrder = true)
 		{
@@ -532,4 +584,19 @@ private void SortItems(int propertyIndex, bool changeOrder = true)
 		}
 		#endregion
 	}
+
+	internal sealed class RowSeparatorHeightToPaddingConverter : IValueConverter
+	{
+		internal static readonly RowSeparatorHeightToPaddingConverter Instance = new RowSeparatorHeightToPaddingConverter();
+
+		public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+		{
+			return new Thickness(0, 0, 0, (double)value);
+		}
+
+		public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+		{
+			throw new NotImplementedException();
+		}
+	}
 }

Xamarin.Forms.DataGrid/DataGridRowTemplateSelector.cs

@@ -20,7 +20,7 @@ protected override DataTemplate OnSelectTemplate(object item, BindableObject con
 			var items = dataGrid.InternalItems;
 
 			_dataGridRowTemplate.SetValue(DataGridViewCell.DataGridProperty, dataGrid);
-      _dataGridRowTemplate.SetValue(DataGridViewCell.RowContextProperty, item);
+			_dataGridRowTemplate.SetValue(DataGridViewCell.RowContextProperty, item);
 
 			if (items != null)
 				_dataGridRowTemplate.SetValue(DataGridViewCell.IndexProperty, items.IndexOf(item));