Skip to content

Commit 6be3dbf

Browse files
enisnenisn
authored
Merge pull request #275 from enisn/shapes-separations
Separate Predefined Shapes from Controls
2 parents 61f118a + 810b56c commit 6be3dbf

File tree

7 files changed

+89
-69
lines changed

7 files changed

+89
-69
lines changed

‎sandbox/SandboxMAUI/MainPage.xaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
<ScrollView>
77
<StackLayout
8+
x:Name="mainLayout"
89
Padding="{OnPlatform iOS='30,60,30,30', Default='30'}" Spacing="10"
910
MaximumWidthRequest="400">
1011

‎sandbox/SandboxMAUI/MainPage.xaml.cs‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
using SandboxMAUI.Pages;
1+
using Microsoft.Maui.Controls;
2+
using SandboxMAUI.Pages;
23

34
namespace SandboxMAUI;
45

@@ -8,9 +9,12 @@ public MainPage()
89
{
910
InitializeComponent();
1011
}
12+
1113
async void GoToCheckBoxPage(System.Object sender, System.EventArgs e)
1214
{
1315
await Navigation.PushAsync(new CheckBoxPage());
16+
17+
mainLayout.HorizontalOptions = LayoutOptions.Center;
1418
}
1519

1620
async void GoToRadioButtonPage(System.Object sender, System.EventArgs e)

‎sandbox/SandboxMAUI/Pages/CheckBoxPage.xaml‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
33
xmlns:input="clr-namespace:InputKit.Shared.Controls;assembly=InputKit.Maui"
44
x:Class="SandboxMAUI.Pages.CheckBoxPage"
5-
Title="CheckBoxPage"
6-
BackgroundColor="White">
5+
Title="CheckBoxPage">
76
<ScrollView>
87
<StackLayout
98
x:Name="mainLayout"
@@ -13,15 +12,17 @@
1312

1413
<Button Text="Randomize colors" Clicked="Button_Clicked" />
1514

16-
<BoxView Color="Black" HeightRequest="1" HorizontalOptions="Fill" Margin="5,10" />
15+
<BoxView Color="{AppThemeBinding Dark=White, Light=Black}" HeightRequest="1" HorizontalOptions="Fill" Margin="5,10" />
1716

18-
<input:CheckBox Text="Option 0 with Box Type" Type="Box"/>
19-
<input:CheckBox Text="Option 1 with Check Type" Type="Check" />
20-
<input:CheckBox Text="Option 2 with Line Type" Type="Line" />
21-
<input:CheckBox Text="Option 3 with Material Type" Type="Material" />
22-
<input:CheckBox Text="Option 4 with Custom Type (X)" Type="Custom" CustomIconGeometry="M17.705 7.705l-1.41-1.41L12 10.59 7.705 6.295l-1.41 1.41L10.59 12l-4.295 4.295 1.41 1.41L12 13.41l4.295 4.295 1.41-1.41L13.41 12l4.295-4.295z"/>
23-
<input:CheckBox Text="Option 5 with Material Custom Type (X)" Type="Material" CustomIconGeometry="M17.705 7.705l-1.41-1.41L12 10.59 7.705 6.295l-1.41 1.41L10.59 12l-4.295 4.295 1.41 1.41L12 13.41l4.295 4.295 1.41-1.41L13.41 12l4.295-4.295z"/>
24-
<input:CheckBox Text="Option 6 (Position)" Type="Check" LabelPosition="Before"/>
17+
<input:CheckBox Text="Option 0 Plain Checkbox" />
18+
<input:CheckBox Text="Option 1 with Filled Type" Type="Filled" />
19+
<input:CheckBox Text="Option 2 with Material Type" Type="Material" />
20+
<input:CheckBox Text="Option 2 with Square Shape" IconGeometry="{x:Static input:PredefinedShapes.Square}" />
21+
<input:CheckBox Text="Option 3 with Line Shape" IconGeometry="{x:Static input:PredefinedShapes.Line}" />
22+
<input:CheckBox Text="Option 3 with Line Shape with Material Type" Type="Material" IconGeometry="{x:Static input:PredefinedShapes.Line}" />
23+
<input:CheckBox Text="Option 3 with Custom Type (X)" Type="Custom" IconGeometry="M17.705 7.705l-1.41-1.41L12 10.59 7.705 6.295l-1.41 1.41L10.59 12l-4.295 4.295 1.41 1.41L12 13.41l4.295 4.295 1.41-1.41L13.41 12l4.295-4.295z"/>
24+
<input:CheckBox Text="Option 5 with Material Custom Type (X)" Type="Material" IconGeometry="M17.705 7.705l-1.41-1.41L12 10.59 7.705 6.295l-1.41 1.41L10.59 12l-4.295 4.295 1.41 1.41L12 13.41l4.295 4.295 1.41-1.41L13.41 12l4.295-4.295z"/>
25+
<input:CheckBox Text="Option 6 (Position)" Type="Regular" LabelPosition="Before"/>
2526

2627
</StackLayout>
2728
</ScrollView>

‎sandbox/SandboxMAUI/Pages/RadioButtonPage.xaml‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,16 @@
88
<StackLayout Padding="25" Spacing="15" MaximumWidthRequest="400">
99

1010
<Button Text="Randomize Colors" Clicked="RandomizeColors" />
11-
<BoxView Color="Black" HeightRequest="1" HorizontalOptions="Fill" Margin="5,10" />
11+
<BoxView Color="{AppThemeBinding Dark=White, Light=Black}" HeightRequest="1" HorizontalOptions="Fill" Margin="5,10" />
1212

1313
<input:RadioButtonGroupView x:Name="groupView">
1414
<input:RadioButton Text="Option 1" />
1515
<input:RadioButton Text="Option 2" />
16-
<input:RadioButton Text="Option 3 Label Position Before" LabelPosition="Before"/>
17-
<input:RadioButton Text="Option 4 with Custom Image" SelectedIconGeomerty="M12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 Z M8,10 L6,12 L11,17 L18,10 L16,8 L11,13 L8,10 Z"/>
18-
<input:RadioButton Text="Dolor ullamcorper sit justo magna "/>
19-
<input:RadioButton Text="Option 5 Disabled" IsDisabled="True"/>
16+
<input:RadioButton Text="Option 3 with Check Shape" SelectedIconGeomerty="{x:Static input:PredefinedShapes.Check}" />
17+
<input:RadioButton Text="Option 4 with CheckCircle Shape" SelectedIconGeomerty="{x:Static input:PredefinedShapes.CheckCircle}"/>
18+
<input:RadioButton Text="Option 5 with Custom Shape" SelectedIconGeomerty="M 15.6038 7.1366 v 5.8061 c 0 0.8669 -0.8266 1.6934 -1.6934 1.6934 h -5.0803 c -1.0547 0 -1.9094 -0.1302 -2.903 -0.4838 c -0.3068 -0.1092 -1.2096 -0.4838 -1.2096 -0.4838 V 6.8947 l 3.9939 -4.6913 L 9.072 0.121 h 0.7258 c 0.804 0 1.3703 0.6415 1.3703 1.4456 v 0.4522 c 0 1.0321 -0.0622 2.0633 -0.1862 3.0879 L 10.9412 5.4432 H 13.9104 C 14.7773 5.4432 15.6038 6.2698 15.6038 7.1366 z M 0.121 14.3942 h 3.6288 V 6.169 H 0.121 V 14.3942 z"/>
19+
<input:RadioButton Text="Option 6 Label Position Before" LabelPosition="Before"/>
20+
<input:RadioButton Text="Option 7 Disabled" IsDisabled="True"/>
2021
</input:RadioButtonGroupView>
2122

2223
</StackLayout>

‎src/InputKit.Maui/Shared/Controls/CheckBox.cs‎

Lines changed: 40 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
using InputKit.Shared.Layouts;
55
using Microsoft.Maui.Controls.Shapes;
66
using System.ComponentModel;
7+
using System.Globalization;
78
using System.Windows.Input;
89
using Path = Microsoft.Maui.Controls.Shapes.Path;
910

@@ -21,15 +22,12 @@ public partial class CheckBox : StatefulStackLayout, IValidatable
2122
BorderColor = Colors.Black,
2223
TextColor = (Color)Label.TextColorProperty.DefaultValue,
2324
Size = 25,
24-
CornerRadius = 4,
25+
CornerRadius = 2,
2526
FontSize = 14,
2627
LabelPosition = LabelPosition.After
2728
};
2829

2930
#region Constants
30-
public const string PATH_CHECK = "M 6.5212 16.4777 l -6.24 -6.24 c -0.3749 -0.3749 -0.3749 -0.9827 0 -1.3577 l 1.3576 -1.3577 c 0.3749 -0.3749 0.9828 -0.3749 1.3577 0 L 7.2 11.7259 L 16.2036 2.7224 c 0.3749 -0.3749 0.9828 -0.3749 1.3577 0 l 1.3576 1.3577 c 0.3749 0.3749 0.3749 0.9827 0 1.3577 l -11.04 11.04 c -0.3749 0.3749 -0.9828 0.3749 -1.3577 -0 z";
31-
public const string PATH_SQUARE = "M12 12H0V0h12v12z";
32-
public const string PATH_LINE = "M 17.2026 6.7911 H 0.9875 C 0.4422 6.7911 0 7.2332 0 7.7784 v 2.6331 c 0 0.5453 0.442 0.9873 0.9875 0.9873 h 16.2151 c 0.5453 0 0.9873 -0.442 0.9873 -0.9873 v -2.6331 C 18.1901 7.2332 17.7481 6.7911 17.2026 6.7911 z";
3331
internal const double CHECK_SIZE_RATIO = .65;
3432
#endregion
3533

@@ -42,6 +40,7 @@ public partial class CheckBox : StatefulStackLayout, IValidatable
4240
StrokeThickness = 2,
4341
WidthRequest = GlobalSetting.Size,
4442
HeightRequest = GlobalSetting.Size,
43+
RadiusX = GlobalSetting.CornerRadius,
4544
};
4645
protected Path selectedIcon = new Path
4746
{
@@ -90,6 +89,7 @@ public CheckBox()
9089

9190
ApplyLabelPosition(LabelPosition);
9291
UpdateType();
92+
UpdateShape();
9393
GestureRecognizers.Add(new TapGestureRecognizer
9494
{
9595
Command = new Command(() => { if (IsDisabled) return; IsChecked = !IsChecked; ExecuteCommand(); CheckChanged?.Invoke(this, new EventArgs()); ValidationChanged?.Invoke(this, new EventArgs()); }),
@@ -188,7 +188,7 @@ public Color Color
188188
/// <summary>
189189
/// Which icon will be shown when checkbox is checked
190190
/// </summary>
191-
public CheckType Type { get => _type; set { _type = value; UpdateType(value); } }
191+
public CheckType Type { get => _type; set { _type = value; UpdateType(); } }
192192

193193
/// <summary>
194194
/// Size of Checkbox
@@ -233,7 +233,7 @@ public Color Color
233233
public ImageSource CustomIcon { get => default; set { } }
234234

235235
[TypeConverter(typeof(PathGeometryConverter))]
236-
public Geometry CustomIconGeometry { get => (Geometry)GetValue(CustomIconGeometryProperty); set => SetValue(CustomIconGeometryProperty, value); }
236+
public Geometry IconGeometry { get => (Geometry)GetValue(IconGeometryProperty); set => SetValue(IconGeometryProperty, value); }
237237

238238
public bool IsPressed { get; set; }
239239
/// <summary>
@@ -265,7 +265,7 @@ public LabelPosition LabelPosition
265265
public static readonly BindableProperty TextFontSizeProperty = BindableProperty.Create(nameof(TextFontSize), typeof(double), typeof(CheckBox), GlobalSetting.FontSize, propertyChanged: (bo, ov, nv) => (bo as CheckBox).TextFontSize = (double)nv);
266266
public static readonly BindableProperty BorderColorProperty = BindableProperty.Create(nameof(BorderColor), typeof(Color), typeof(CheckBox), GlobalSetting.BorderColor, propertyChanged: (bo, ov, nv) => (bo as CheckBox).UpdateBorderColor());
267267
public static readonly BindableProperty FontFamilyProperty = BindableProperty.Create(nameof(FontFamily), typeof(string), typeof(CheckBox), Label.FontFamilyProperty.DefaultValue, propertyChanged: (bo, ov, nv) => (bo as CheckBox).UpdateFontFamily(nv?.ToString()));
268-
public static readonly BindableProperty CustomIconGeometryProperty = BindableProperty.Create(nameof(CustomIconGeometry), typeof(Geometry), typeof(CheckBox), defaultValue: GeometryConverter.FromPath(PATH_CHECK), propertyChanged: (bo, ov, nv) => (bo as CheckBox).UpdateType(CheckType.Custom));
268+
public static readonly BindableProperty IconGeometryProperty = BindableProperty.Create(nameof(IconGeometry), typeof(Geometry), typeof(CheckBox), defaultValue: PredefinedShapes.Check, propertyChanged: (bo, ov, nv) => (bo as CheckBox).UpdateShape());
269269
public static readonly BindableProperty IsPressedProperty = BindableProperty.Create(nameof(IsPressed), typeof(bool), typeof(CheckBox), propertyChanged: (bo, ov, nv) => (bo as CheckBox).ApplyIsPressedAction(bo as CheckBox, (bool)nv));
270270
public static readonly BindableProperty CornerRadiusProperty = BindableProperty.Create(nameof(CornerRadius), typeof(float), typeof(CheckBox), GlobalSetting.CornerRadius, propertyChanged: (bo, ov, nv) => (bo as CheckBox).outlineBox.RadiusX = (float)nv);
271271
public static readonly BindableProperty LabelPositionProperty = BindableProperty.Create(
@@ -312,17 +312,27 @@ void UpdateColors()
312312
{
313313
//selectedIcon.Fill = Color;
314314

315-
if (Type == CheckType.Material)
315+
switch (Type)
316316
{
317-
outlineBox.Stroke = Color;
318-
outlineBox.Fill = IsChecked ? Color : Colors.Transparent;
319-
selectedIcon.Fill = Color.ToSurfaceColor();
320-
}
321-
else
322-
{
323-
outlineBox.Stroke = IsChecked ? Color : BorderColor;
324-
outlineBox.Fill = BoxBackgroundColor;
325-
selectedIcon.Fill = IconColor == Colors.Transparent ? Color : IconColor;
317+
case CheckType.Regular:
318+
outlineBox.Stroke = IsChecked ? Color : BorderColor;
319+
outlineBox.Fill = BoxBackgroundColor;
320+
selectedIcon.Fill = IconColor == Colors.Transparent ? Color : IconColor;
321+
break;
322+
case CheckType.Filled:
323+
outlineBox.Fill = IsChecked ? BorderColor : Colors.Transparent;
324+
selectedIcon.Fill = IsChecked ? Color : Colors.Transparent;
325+
break;
326+
case CheckType.Material:
327+
outlineBox.Stroke = Color;
328+
outlineBox.Fill = IsChecked ? Color : Colors.Transparent;
329+
selectedIcon.Fill = Color.ToSurfaceColor();
330+
break;
331+
default:
332+
outlineBox.Stroke = IsChecked ? Color : BorderColor;
333+
outlineBox.Fill = BoxBackgroundColor;
334+
selectedIcon.Fill = IconColor == Colors.Transparent ? Color : IconColor;
335+
break;
326336
}
327337
}
328338

@@ -342,31 +352,13 @@ void SetBoxSize(double size)
342352
//selectedIcon.MaximumWidthRequest = size * CHECK_SIZE_RATIO;
343353
}
344354

345-
void UpdateType(CheckType _Type = CheckType.Custom)
355+
void UpdateShape()
346356
{
347-
switch (_Type)
348-
{
349-
case CheckType.Box:
350-
selectedIcon.Data = GeometryConverter.FromPath(PATH_SQUARE);
351-
break;
352-
case CheckType.Line:
353-
selectedIcon.Data = GeometryConverter.FromPath(PATH_LINE);
354-
break;
355-
356-
case CheckType.Check:
357-
case CheckType.Star:
358-
case CheckType.Cross:
359-
selectedIcon.Data = GeometryConverter.FromPath(PATH_CHECK);
360-
break;
361-
case CheckType.Material:
362-
outlineBox.RadiusX = 5;
363-
selectedIcon.Data = GeometryConverter.FromPath(PATH_CHECK);
364-
break;
365-
case CheckType.Custom:
366-
selectedIcon.Data = CustomIconGeometry;
367-
break;
368-
}
357+
selectedIcon.Data = IconGeometry;
358+
}
369359

360+
void UpdateType()
361+
{
370362
UpdateColors();
371363
}
372364

@@ -432,14 +424,18 @@ public static async void ApplyIsPressed(CheckBox checkBox, bool isPressed)
432424

433425
public enum CheckType
434426
{
427+
[Obsolete("This option is removed. Use IconGeometry instead.")]
435428
Box,
429+
[Obsolete("This option is removed. Use IconGeometry instead")]
436430
Check,
437-
[Obsolete("This option is removed. Use another one.")]
431+
[Obsolete("This option is removed. Use IconGeometry instead")]
438432
Cross,
439-
[Obsolete("This option is removed. Use another one.")]
433+
[Obsolete("This option is removed. Use IconGeometry instead")]
440434
Star,
435+
[Obsolete("This option is removed. Use IconGeometry instead")]
436+
Custom = 90,
437+
Regular,
438+
Filled,
441439
Material,
442-
Line,
443-
Custom = 90
444440
}
445441
}

‎src/InputKit.Maui/Shared/Controls/PredefinedShapes.cs‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
using InputKit.Shared.Helpers;
2+
using Microsoft.Maui.Controls.Shapes;
3+
4+
namespace InputKit.Shared.Controls;
5+
public static class PredefinedShapes
6+
{
7+
public static Geometry Check = GeometryConverter.FromPath(Paths.Check);
8+
public static Geometry CheckCircle = GeometryConverter.FromPath(Paths.CheckCircle);
9+
public static Geometry Line = GeometryConverter.FromPath(Paths.LineHorizontal);
10+
public static Geometry Square = GeometryConverter.FromPath(Paths.Square);
11+
public static Geometry Dot = GeometryConverter.FromPath(Paths.Dot);
12+
13+
public static class Paths
14+
{
15+
public const string Check = "M 6.5212 16.4777 l -6.24 -6.24 c -0.3749 -0.3749 -0.3749 -0.9827 0 -1.3577 l 1.3576 -1.3577 c 0.3749 -0.3749 0.9828 -0.3749 1.3577 0 L 7.2 11.7259 L 16.2036 2.7224 c 0.3749 -0.3749 0.9828 -0.3749 1.3577 0 l 1.3576 1.3577 c 0.3749 0.3749 0.3749 0.9827 0 1.3577 l -11.04 11.04 c -0.3749 0.3749 -0.9828 0.3749 -1.3577 -0 z";
16+
public const string CheckCircle = "M12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 Z M8,10 L6,12 L11,17 L18,10 L16,8 L11,13 L8,10 Z";
17+
public const string Square = "M12 12H0V0h12v12z";
18+
public const string LineHorizontal = "M 17.2026 6.7911 H 0.9875 C 0.4422 6.7911 0 7.2332 0 7.7784 v 2.6331 c 0 0.5453 0.442 0.9873 0.9875 0.9873 h 16.2151 c 0.5453 0 0.9873 -0.442 0.9873 -0.9873 v -2.6331 C 18.1901 7.2332 17.7481 6.7911 17.2026 6.7911 z";
19+
public const string Dot = "M12 18a6 6 0 100-12 6 6 0 000 12z";
20+
}
21+
}

‎src/InputKit.Maui/Shared/Controls/RadioButton.cs‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,6 @@ public class RadioButton : StatefulStackLayout
2929
};
3030
#endregion
3131

32-
#region Constants
33-
public const string PATH_DOT = "M12 18a6 6 0 100-12 6 6 0 000 12z";
34-
#endregion
35-
3632
#region Fields
3733
protected internal Grid IconLayout;
3834
protected internal Ellipse iconCircle = new Ellipse
@@ -92,7 +88,7 @@ public RadioButton()
9288
};
9389

9490
ApplyLabelPosition(LabelPosition);
95-
UpdateType();
91+
UpdateShape();
9692

9793
GestureRecognizers.Add(new TapGestureRecognizer { Command = new Command(Tapped) });
9894
}
@@ -220,7 +216,7 @@ public LabelPosition LabelPosition
220216
public static readonly BindableProperty CommandParameterProperty = BindableProperty.Create(nameof(CommandParameter), typeof(object), typeof(RadioButton), propertyChanged: (bo, ov, nv) => (bo as RadioButton).CommandParameter = nv);
221217
public static readonly BindableProperty IsPressedProperty = BindableProperty.Create(nameof(IsPressed), typeof(bool), typeof(RadioButton), propertyChanged: (bo, ov, nv) => (bo as RadioButton).ApplyIsPressedAction((bool)nv));
222218
public static readonly BindableProperty FontFamilyProperty = BindableProperty.Create(nameof(FontFamily), typeof(string), typeof(RadioButton), propertyChanged: (bo, ov, nv) => (bo as RadioButton).FontFamily = (string)nv);
223-
public static readonly BindableProperty SelectedIconGeomertyProperty = BindableProperty.Create(nameof(SelectedIconGeomerty), typeof(Geometry), typeof(RadioButton), GeometryConverter.FromPath(PATH_DOT), propertyChanged: (bo, ov, nv) => (bo as RadioButton).UpdateType());
219+
public static readonly BindableProperty SelectedIconGeomertyProperty = BindableProperty.Create(nameof(SelectedIconGeomerty), typeof(Geometry), typeof(RadioButton), PredefinedShapes.Dot, propertyChanged: (bo, ov, nv) => (bo as RadioButton).UpdateShape());
224220
public static readonly BindableProperty LabelPositionProperty = BindableProperty.Create(
225221
propertyName: nameof(LabelPosition), declaringType: typeof(RadioButton),
226222
returnType: typeof(LabelPosition), defaultBindingMode: BindingMode.TwoWay,
@@ -235,19 +231,19 @@ private void ApplyLabelPosition(LabelPosition position)
235231
Children.Clear();
236232
if (position == LabelPosition.After)
237233
{
238-
IconLayout.HorizontalOptions = LayoutOptions.Center;
234+
lblText.HorizontalOptions = LayoutOptions.Start;
239235
Children.Add(IconLayout);
240236
Children.Add(lblText);
241237
}
242238
else
243239
{
244-
IconLayout.HorizontalOptions = LayoutOptions.Center;
240+
lblText.HorizontalOptions = LayoutOptions.FillAndExpand;
245241
Children.Add(lblText);
246242
Children.Add(IconLayout);
247243
}
248244
}
249245

250-
private protected virtual void UpdateType()
246+
private protected virtual void UpdateShape()
251247
{
252248
iconChecked.Data = SelectedIconGeomerty;
253249
}

0 commit comments

Comments
 (0)