make the layout sensible

akgulebubekir · Aug 9, 2023 · 41de827 · 41de827
1 parent 56f09f7
commit 41de827
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 106 deletions.
diff --git a/Maui.DataGrid.Sample/MainPage.xaml b/Maui.DataGrid.Sample/MainPage.xaml
@@ -10,10 +10,6 @@
     <Grid RowDefinitions="Auto,*" BackgroundColor="White">
 
         <FlexLayout BackgroundColor="Black" Wrap="Wrap">
-            <HorizontalStackLayout HeightRequest="50" Margin="0,0,15,0">
-                <CheckBox IsChecked="{Binding HeaderBordersVisible}" />
-                <Label Text="Header Borders Visible?" TextColor="White" Margin="0,0,5,0" VerticalOptions="Center" />
-            </HorizontalStackLayout>
             <HorizontalStackLayout HeightRequest="50" Margin="0,0,15,0">
                 <CheckBox IsChecked="{Binding TeamColumnVisible}"  />
                 <Label Text="Team Column" TextColor="White" Margin="0,0,5,0" VerticalOptions="Center" />
@@ -33,17 +29,19 @@
             <Button x:Name="_addColumnButton1" Text="Add Column" />
         </FlexLayout>
 
-        <dg:DataGrid Grid.Row="1" ItemsSource="{Binding Teams}" SelectionEnabled="True" SelectedItem="{Binding SelectedTeam}"
-                     RowHeight="70" HeaderHeight="50" BorderColor="{StaticResource GridBorderColor}"
-                     HeaderBackground="{StaticResource GridHeaderBgColor}" HeaderBordersVisible="{Binding HeaderBordersVisible}"
-                     PullToRefreshCommand="{Binding RefreshCommand}" IsRefreshing="{Binding IsRefreshing}" PaginationEnabled="{Binding PaginationEnabled}" PageSize="5"
-                     ActiveRowColor="{StaticResource ActiveRowColor}" FooterBackground="{StaticResource GridFooterBgColor}" x:Name="_dataGrid1">
+        <dg:DataGrid Grid.Row="1" ItemsSource="{Binding Teams}" SelectedItem="{Binding SelectedTeam}"
+                     BorderColor="{StaticResource GridBorderColor}" BackgroundColor="{StaticResource GridBgColor}"
+                     HeaderBackground="{StaticResource GridHeaderBgColor}" FooterBackground="{StaticResource GridFooterBgColor}"
+                     PullToRefreshCommand="{Binding RefreshCommand}" IsRefreshing="{Binding IsRefreshing}"
+                     PaginationEnabled="{Binding PaginationEnabled}" PageSize="5"
+                     ActiveRowColor="{StaticResource ActiveRowColor}"
+                     RowHeight="70" HeaderHeight="50" x:Name="_dataGrid1">
             <dg:DataGrid.Columns>
                 <dg:DataGridColumn Title="Logo" PropertyName="Logo" SortingEnabled="False">
                     <dg:DataGridColumn.CellTemplate>
                         <DataTemplate>
                             <Image Source="{Binding}" HorizontalOptions="Center" VerticalOptions="Center"
-                                   Aspect="AspectFit" HeightRequest="60" />
+                                   Aspect="AspectFit" HeightRequest="60" WidthRequest="60" />
                         </DataTemplate>
                     </dg:DataGridColumn.CellTemplate>
                 </dg:DataGridColumn>

diff --git a/Maui.DataGrid.Sample/Maui.DataGrid.Sample.csproj b/Maui.DataGrid.Sample/Maui.DataGrid.Sample.csproj
@@ -1,7 +1,6 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
 	<PropertyGroup>
-		<TargetFrameworks>net7.0-android;net7.0-ios;net7.0-maccatalyst</TargetFrameworks>
 		<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net7.0-windows10.0.22621.0</TargetFrameworks>
 		<!-- Uncomment to also build the tizen app. You will need to install tizen by following this: https://github.com/Samsung/Tizen.NET -->
 		<!-- <TargetFrameworks>$(TargetFrameworks);net6.0-tizen</TargetFrameworks> -->

diff --git a/Maui.DataGrid.Sample/Resources/Styles/Colors.xaml b/Maui.DataGrid.Sample/Resources/Styles/Colors.xaml
@@ -45,4 +45,5 @@
     <Color x:Key="GridHeaderBgColor">#E0E6F8</Color>
     <Color x:Key="GridFooterBgColor">#E0E6F8</Color>
     <Color x:Key="GridBorderColor">#CCCCCC</Color>
+    <Color x:Key="GridBgColor">#CCCCCC</Color>
 </ResourceDictionary>
diff --git a/Maui.DataGrid.Sample/ViewModels/MainViewModel.cs b/Maui.DataGrid.Sample/ViewModels/MainViewModel.cs
@@ -13,7 +13,6 @@ public class MainViewModel : INotifyPropertyChanged
     private bool _isRefreshing;
     private bool _teamColumnVisible = true;
     private bool _wonColumnVisible = true;
-    private bool _headerBordersVisible = true;
     private bool _paginationEnabled = true;
     private ushort _teamColumnWidth = 70;
 
@@ -33,16 +32,6 @@ public List<Team> Teams
         }
     }
 
-    public bool HeaderBordersVisible
-    {
-        get => _headerBordersVisible;
-        set
-        {
-            _headerBordersVisible = value;
-            OnPropertyChanged(nameof(HeaderBordersVisible));
-        }
-    }
-
     public bool TeamColumnVisible
     {
         get => _teamColumnVisible;

diff --git a/Maui.DataGrid/DataGrid.xaml b/Maui.DataGrid/DataGrid.xaml
@@ -44,10 +44,10 @@
                 <!--  Set all platforms to use MeasureFirstItem when this bug is resolved https://github.com/dotnet/maui/issues/7562  -->
                 <CollectionView
                     x:Name="_collectionView"
-                    WidthRequest="{Binding WidthRequest, Source={Reference self}, Mode=TwoWay}"
-                    BackgroundColor="{Binding BorderColor, Source={Reference self}, Mode=TwoWay}"
+                    WidthRequest="{Binding WidthRequest, Source={Reference self}}"
+                    BackgroundColor="{Binding BackgroundColor, Source={Reference self}}"
                     SelectedItem="{Binding SelectedItem, Source={Reference self}, Mode=TwoWay}"
-                    ItemSizingStrategy="{Binding ItemSizingStrategy, Source={Reference self}, Mode=TwoWay}"
+                    ItemSizingStrategy="{Binding ItemSizingStrategy, Source={Reference self}}"
                     SelectionMode="{Binding SelectionEnabled, Source={Reference self}, Converter={StaticResource boolToSelectionMode}}">
                     <CollectionView.ItemTemplate>
                         <DataTemplate>

diff --git a/Maui.DataGrid/DataGrid.xaml.cs b/Maui.DataGrid/DataGrid.xaml.cs
@@ -231,7 +231,7 @@ private void SortAndPaginate(SortData? sortData = null)
             propertyChanged: (b, o, n) =>
             {
                 var self = (DataGrid)b;
-                if (o != n && self._headerView != null && !self.HeaderBordersVisible)
+                if (o != n && self._headerView != null)
                 {
                     foreach (var child in self._headerView.Children.OfType<View>())
                     {
@@ -245,18 +245,11 @@ private void SortAndPaginate(SortData? sortData = null)
 
     public static readonly BindableProperty BorderColorProperty =
         BindablePropertyExtensions.Create(Colors.Black,
-            propertyChanged: (b, _, n) =>
+            propertyChanged: (b, _, _) =>
             {
                 var self = (DataGrid)b;
-                if (self._headerView != null && self.HeaderBordersVisible)
-                {
-                    self._headerView.BackgroundColor = n;
-                }
 
-                if (self.Columns != null && self.ItemsSource != null)
-                {
-                    self.Reload();
-                }
+                self.Reload();
             });
 
     public static readonly BindableProperty ItemSizingStrategyProperty =
@@ -508,7 +501,7 @@ private void OnItemsSourceCollectionChanged(object? sender, NotifyCollectionChan
         BindablePropertyExtensions.Create(false, BindingMode.TwoWay);
 
     public static readonly BindableProperty BorderThicknessProperty =
-        BindablePropertyExtensions.Create(new Thickness(1),
+        BindablePropertyExtensions.Create(1d,
             propertyChanged: (b, _, _) =>
             {
                 if (b is DataGrid self)
@@ -517,11 +510,6 @@ private void OnItemsSourceCollectionChanged(object? sender, NotifyCollectionChan
                 }
             });
 
-    public static readonly BindableProperty HeaderBordersVisibleProperty =
-        BindablePropertyExtensions.Create(true,
-            propertyChanged: (b, _, n) => ((DataGrid)b)._headerView.BackgroundColor =
-                n ? ((DataGrid)b).BorderColor : ((DataGrid)b).HeaderBackground);
-
     public static readonly BindableProperty SortedColumnIndexProperty =
         BindablePropertyExtensions.Create<SortData>(null, BindingMode.TwoWay,
             (b, v) =>
@@ -841,24 +829,14 @@ public bool RefreshingEnabled
     }
 
     /// <summary>
-    /// Border thickness for header &amp; each cell
+    /// Border thickness for cells
     /// </summary>
-    public Thickness BorderThickness
+    public double BorderThickness
     {
-        get => (Thickness)GetValue(BorderThicknessProperty);
+        get => (double)GetValue(BorderThicknessProperty);
         set => SetValue(BorderThicknessProperty, value);
     }
 
-    /// <summary>
-    /// Determines to show the borders of header cells.
-    /// Default value is <c>true</c>
-    /// </summary>
-    public bool HeaderBordersVisible
-    {
-        get => (bool)GetValue(HeaderBordersVisibleProperty);
-        set => SetValue(HeaderBordersVisibleProperty, value);
-    }
-
     /// <summary>
     /// Column index and sorting order for the DataGrid
     /// </summary>
@@ -996,52 +974,59 @@ internal void Reload()
 
     #region Header Creation Methods
 
-    private View GetHeaderViewForColumn(DataGridColumn column)
+    private View GetHeaderCell(DataGridColumn column)
     {
+        var cellBorder = new Border { Stroke = BorderColor, Margin = 0, Padding = 0, StrokeThickness = BorderThickness };
+
         column.HeaderLabel.Style = column.HeaderLabelStyle ?? HeaderLabelStyle ?? _defaultHeaderStyle;
 
         if (!IsSortable || !column.SortingEnabled || !column.IsSortable(this))
         {
-            return new ContentView
+            cellBorder.Content = new ContentView
             {
                 Content = column.HeaderLabel
             };
+
+            return cellBorder;
         }
 
         var sortIconSize = HeaderHeight * 0.3;
         column.SortingIconContainer.HeightRequest = sortIconSize;
         column.SortingIconContainer.WidthRequest = sortIconSize;
         column.SortingIcon.Style = SortIconStyle ?? _defaultSortIconStyle;
 
-        var grid = new Grid
+        var cellGrid = new Grid
         {
             ColumnSpacing = 0,
             Padding = new(0, 0, 4, 0),
             ColumnDefinitions = HeaderColumnDefinitions,
-            Children = { column.HeaderLabel, column.SortingIconContainer },
-            GestureRecognizers =
-                {
-                    new TapGestureRecognizer
-                    {
-                        Command = new Command(() =>
-                        {
-                            // This is to invert SortOrder when the user taps on a column.
-                            var order = column.SortingOrder == SortingOrder.Ascendant
-                                ? SortingOrder.Descendant
-                                : SortingOrder.Ascendant;
+            Children = { column.HeaderLabel, column.SortingIconContainer }
+        };
 
-                            var index = Columns.IndexOf(column);
+        var sortRecognizer = new TapGestureRecognizer
+        {
+            Command = new Command(() =>
+            {
+                // This is to invert SortOrder when the user taps on a column.
+                var order = column.SortingOrder == SortingOrder.Ascendant
+                    ? SortingOrder.Descendant
+                    : SortingOrder.Ascendant;
 
-                            SortedColumnIndex = new(index, order);
+                var index = Columns.IndexOf(column);
 
-                            column.SortingOrder = order;
-                        }, () => column.SortingEnabled)
-                    }
-                }
+                SortedColumnIndex = new(index, order);
+
+                column.SortingOrder = order;
+            }, () => column.SortingEnabled)
         };
 
+        cellBorder.GestureRecognizers.Add(sortRecognizer);
+
         Grid.SetColumn(column.SortingIconContainer, 1);
-        return grid;
+
+        cellBorder.Content = cellGrid;
+
+        return cellBorder;
     }
 
     private void InitHeaderView()
@@ -1052,9 +1037,6 @@ private void InitHeaderView()
         _headerView.ColumnDefinitions.Clear();
         ResetSortingOrders();
 
-        _headerView.Padding = new(BorderThickness.Left, BorderThickness.Top, BorderThickness.Right, 0);
-        _headerView.ColumnSpacing = BorderThickness.HorizontalThickness;
-
         if (Columns == null)
         {
             return;
@@ -1075,7 +1057,7 @@ private void InitHeaderView()
                 continue;
             }
 
-            col.HeaderView ??= GetHeaderViewForColumn(col);
+            col.HeaderView ??= GetHeaderCell(col);
 
             col.HeaderView.SetBinding(BackgroundColorProperty, new Binding(nameof(HeaderBackground), source: this));
 

diff --git a/Maui.DataGrid/DataGridRow.cs b/Maui.DataGrid/DataGridRow.cs
@@ -51,7 +51,7 @@ private void CreateView()
         ColumnDefinitions.Clear();
         Children.Clear();
 
-        SetStyling();
+        UpdateColors();
 
         for (var i = 0; i < DataGrid.Columns.Count; i++)
         {
@@ -71,29 +71,23 @@ private void CreateView()
         }
     }
 
-    private void SetStyling()
-    {
-        UpdateColors();
-
-        // We are using the spacing between rows to generate visible borders, and thus the background color is the border color.
-        BackgroundColor = DataGrid.BorderColor;
-
-        var borderThickness = DataGrid.BorderThickness;
-
-        Padding = new(borderThickness.Left, borderThickness.Top, borderThickness.Right, 0);
-        ColumnSpacing = borderThickness.HorizontalThickness;
-        Margin = new Thickness(0, 0, 0, borderThickness.Bottom); // Row Spacing
-    }
-
     private View CreateCell(DataGridColumn col)
     {
+        var cellBorder = new Border
+        {
+            BackgroundColor = _bgColor,
+            Stroke = DataGrid.BorderColor,
+            StrokeThickness = DataGrid.BorderThickness,
+            Margin = 0,
+            Padding = 0
+        };
+
         View cell;
 
         if (col.CellTemplate != null)
         {
             cell = new ContentView
             {
-                BackgroundColor = _bgColor,
                 Content = col.CellTemplate.CreateContent() as View
             };
 
@@ -108,7 +102,6 @@ private View CreateCell(DataGridColumn col)
             cell = new Label
             {
                 TextColor = _textColor,
-                BackgroundColor = _bgColor,
                 VerticalOptions = LayoutOptions.Fill,
                 HorizontalOptions = LayoutOptions.Fill,
                 VerticalTextAlignment = col.VerticalContentAlignment.ToTextAlignment(),
@@ -127,7 +120,9 @@ private View CreateCell(DataGridColumn col)
                 new Binding(DataGrid.FontFamilyProperty.PropertyName, BindingMode.Default, source: DataGrid));
         }
 
-        return cell;
+        cellBorder.Content = cell;
+
+        return cellBorder;
     }
 
     private void UpdateColors()
@@ -145,16 +140,13 @@ private void UpdateColors()
                 : DataGrid.RowsBackgroundColorPalette.GetColor(rowIndex, BindingContext);
         _textColor = DataGrid.RowsTextColorPalette.GetColor(rowIndex, BindingContext);
 
-        foreach (var v in Children)
+        foreach (var border in Children.OfType<Border>())
         {
-            if (v is View view)
-            {
-                view.BackgroundColor = _bgColor;
+            border.BackgroundColor = _bgColor;
 
-                if (view is Label label)
-                {
-                    label.TextColor = _textColor;
-                }
+            if (border.Content is Label label)
+            {
+                label.TextColor = _textColor;
             }
         }
     }

diff --git a/Maui.DataGrid/Maui.DataGrid.csproj b/Maui.DataGrid/Maui.DataGrid.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
 	<PropertyGroup>
-		<TargetFrameworks>net6.0;net7.0</TargetFrameworks>
+		<TargetFrameworks>net7.0</TargetFrameworks>
 		<UseMaui>true</UseMaui>
 		<SingleProject>true</SingleProject>
 		<ImplicitUsings>enable</ImplicitUsings>
@@ -36,5 +36,11 @@
 	    <Generator>MSBuild:Compile</Generator>
 	  </MauiXaml>
 	</ItemGroup>
+	<ItemGroup>
+	  <PackageReference Update="Microsoft.Maui.Controls" Version="8.0.0-preview.7.8842" />
+	</ItemGroup>
+	<ItemGroup>
+	  <PackageReference Update="Microsoft.Maui.Controls.Compatibility" Version="8.0.0-preview.7.8842" />
+	</ItemGroup>
 
 </Project>