Merge pull request #259 from enisn/maui/SelectionView

Implement SelectionView for MAUI

Author: enisn

sandbox/SandboxMAUI/MainPage.xaml

@@ -12,9 +12,11 @@
             <Button Text="Radio Button" Clicked="GoToRadioButtonPage" />
 
             <Button Text="Advanced Entry &amp; FormView" Clicked="GoToAdvancedEntryPage" />
-            
+
             <Button Text="Advanced Slider" Clicked="GoToAdvancedSliderPage" />
 
+            <Button Text="SelectionView" Clicked="GoToSelectionViewPage" />
+
         </StackLayout>
     </ScrollView>
 

sandbox/SandboxMAUI/MainPage.xaml.cs

@@ -27,4 +27,9 @@ async void GoToAdvancedSliderPage(System.Object sender, System.EventArgs e)
     {
         await Navigation.PushAsync(new AdvancedSliderPage());
     }
+
+    private async void GoToSelectionViewPage(object sender, EventArgs e)
+    {
+        await Navigation.PushAsync(new SelectionViewPage());
+    }
 }

sandbox/SandboxMAUI/Pages/SelectionViewPage.xaml

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="SandboxMAUI.Pages.SelectionViewPage"
+             xmlns:vm="clr-namespace:SandboxMAUI.ViewModels"
+             xmlns:input="clr-namespace:InputKit.Shared.Controls;assembly=InputKit.Maui"
+             Title="SelectionViewPage">
+    <ContentPage.BindingContext>
+        <vm:SampleItemsViewModel />
+    </ContentPage.BindingContext>
+
+    <ContentPage.Content>
+
+        <StackLayout Padding="25" Spacing="15">
+            <Picker x:Name="picker" SelectedIndexChanged="Picker_SelectedIndexChanged" />
+            <Picker x:Name="labelPositionPicker" SelectedIndexChanged="LabelPositionChanged" />
+
+            <input:SelectionView
+                 x:Name="selectionView"
+                 ColumnNumber="2"
+                 ColumnSpacing="10"
+                 ItemDisplayBinding="{Binding Name}"
+                 ItemsSource="{Binding Items}"
+                 RowSpacing="10"
+                 SelectionType="Button" />
+        </StackLayout>
+    </ContentPage.Content>
+</ContentPage>

sandbox/SandboxMAUI/Pages/SelectionViewPage.xaml.cs

@@ -0,0 +1,29 @@
+using InputKit.Shared;
+
+namespace SandboxMAUI.Pages;
+
+public partial class SelectionViewPage : ContentPage
+{
+	public SelectionViewPage()
+	{
+		InitializeComponent();
+        picker.ItemsSource = Enum.GetValues(typeof(SelectionType));
+        picker.SelectedItem = SelectionType.Button;
+
+        labelPositionPicker.SelectedItem = LabelPosition.Before;
+        labelPositionPicker.ItemsSource = Enum.GetValues(typeof(LabelPosition));
+    }
+
+    private void Picker_SelectedIndexChanged(object sender, EventArgs e)
+    {
+        selectionView.SelectionType = (SelectionType)picker.SelectedItem;
+    }
+
+    private void LabelPositionChanged(object sender, EventArgs e)
+    {
+        if (sender is Picker pkr)
+        {
+            selectionView.LabelPosition = (LabelPosition)pkr.SelectedItem;
+        }
+    }
+}

sandbox/SandboxMAUI/SandboxMAUI.csproj

@@ -60,4 +60,10 @@
 	  <ProjectReference Include="..\..\src\InputKit.Maui\InputKit.Maui.csproj" />
 	</ItemGroup>
 
+	<ItemGroup>
+	  <MauiXaml Update="Pages\SelectionViewPage.xaml">
+	    <Generator>MSBuild:Compile</Generator>
+	  </MauiXaml>
+	</ItemGroup>
+
 </Project>

sandbox/SandboxMAUI/ViewModels/SampleClassViewModel.cs

@@ -0,0 +1,34 @@
+using System.Collections.ObjectModel;
+using System.ComponentModel;
+using System.Runtime.CompilerServices;
+
+namespace SandboxMAUI.ViewModels;
+public class SampleItemsViewModel : INotifyPropertyChanged
+{
+    public IList<SampleItem> Items { get; set; } = new ObservableCollection<SampleItem>();
+    private SampleItem _selectedItem;
+
+    public SampleItemsViewModel()
+    {
+        FillData();
+    }
+
+    public SampleItem SelectedItem
+    {
+        get => _selectedItem;
+        set { _selectedItem = value; OnPropertyChanged(); }
+    }
+
+    void FillData()
+    {
+        for (int i = 0; i < 6; i++)
+        {
+            Items.Add(new SampleItem { Id = i, Name = "Option " + (i + 1) });
+        }
+    }
+
+    #region INotifyPropertyChanged Implementation
+    public event PropertyChangedEventHandler PropertyChanged;
+    public void OnPropertyChanged([CallerMemberName] string propName = "") => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
+    #endregion
+}

sandbox/SandboxMAUI/ViewModels/SampleItem.cs

@@ -0,0 +1,8 @@
+namespace SandboxMAUI.ViewModels;
+
+public class SampleItem
+{
+    public int Id { get; set; }
+    public string Name { get; set; }
+    public override string ToString() => Name;
+}

sandbox/SandboxXF/SandboxXF/MainViewModel.cs

@@ -13,10 +13,9 @@ public MainViewModel()
         {
             FillData();
         }
+
         public IList<SampleClass> MyList { get; set; } = new ObservableCollection<SampleClass>();
         private SampleClass _selectedItem;
-        private int _selectedIndex;
-
         public SampleClass SelectedItem
         {
             get => _selectedItem;

src/InputKit.Maui/Shared/Controls/SelectionView.cs

@@ -24,12 +24,12 @@ public partial class SelectionView : Grid
     public static GlobalSetting GlobalSetting { get; private set; } = new GlobalSetting
     {
         Color = InputKitOptions.GetAccentColor(),
-        BackgroundColor = (Color)VisualElement.BackgroundColorProperty.DefaultValue,
+        BackgroundColor = Colors.LightGray,
         BorderColor = (Color)Button.BorderColorProperty.DefaultValue,
         CornerRadius = 20,
         FontSize = Device.GetNamedSize(NamedSize.Default, typeof(Button)),
         Size = -1,
-        TextColor = (Color)Button.TextColorProperty.DefaultValue,
+        TextColor = (Color)Label.TextColorProperty.DefaultValue,
         LabelPosition = LabelPosition.After
     };
 
@@ -209,6 +209,9 @@ private void UpdateView()
         if (ItemsSource == null) return;
 
         Children.Clear();
+
+        SetRowAndColumnDefinitions();
+
         SetValue(SelectedItemProperty, null);
         foreach (var item in ItemsSource)
         {
@@ -227,9 +230,10 @@ private void UpdateView()
                     _View.IsDisabled = true;
 
                 var addedView = _View as View;
-                this.Add(addedView,
-                    column: Children.Count % ColumnNumber,
-                    row: Children.Count % ColumnNumber);
+                var column = Children.Count % ColumnNumber;
+                var row = Children.Count / ColumnNumber;
+
+                this.Add(addedView, column, row);
 
                 _View.IsSelected = Children.Count == _selectedIndex; //to keep selected index when content is changed
             }
@@ -240,6 +244,21 @@ private void UpdateView()
         }
     }
 
+
+    protected void SetRowAndColumnDefinitions()
+    {
+        this.ColumnDefinitions.Clear();
+        for (int i = 0; i < ColumnNumber; i++)
+        {
+            this.ColumnDefinitions.Add(new ColumnDefinition(GridLength.Star));
+        }
+
+        this.RowDefinitions.Clear();
+        for (int i = 0; i < ItemsSource.Count / ColumnNumber; i++)
+        {
+            this.RowDefinitions.Add(new RowDefinition(GridLength.Auto));
+        }
+    }
     /// <summary>
     /// Updates colors of inside, when color property changed on runtime
     /// </summary>
@@ -426,7 +445,6 @@ public class SelectableButton : Button, ISelection
         private Color _selectionColor = InputKitOptions.GetAccentColor();
         private Color _unselectedColor;
 
-
         /// <summary>
         /// Default constructor
         /// </summary>
@@ -497,7 +515,7 @@ private void UpdateColors()
             else
             {
                 BackgroundColor = UnselectedColor;
-                TextColor = GlobalSetting.TextColor;
+                TextColor = GlobalSetting.TextColor ?? UnselectedColor?.ToSurfaceColor();
             }
         }