|
1 | | -<?xml version="1.0" encoding="utf-8" ?> |
| 1 | +<?xml version="1.0" encoding="utf-8" ?> |
2 | 2 | <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" |
3 | 3 | xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" |
4 | 4 | xmlns:dg="clr-namespace:KumikoUI.Maui;assembly=KumikoUI.Maui" |
5 | 5 | xmlns:core="clr-namespace:KumikoUI.Core.Models;assembly=KumikoUI.Core" |
6 | 6 | xmlns:render="clr-namespace:KumikoUI.Core.Rendering;assembly=KumikoUI.Core" |
| 7 | + xmlns:editing="clr-namespace:KumikoUI.Core.Editing;assembly=KumikoUI.Core" |
7 | 8 | x:Class="SampleApp.Maui.MvvmActionsPage" |
8 | | - Title="MVVM Row Actions"> |
| 9 | + Title="MVVM + Column EditTriggers"> |
9 | 10 |
|
10 | | - <Grid RowDefinitions="Auto,*" Padding="0"> |
11 | | - <Label Text="MVVM Row Actions — Tap Delete or Details on any row" |
| 11 | + <Grid RowDefinitions="Auto,Auto,*" Padding="0"> |
| 12 | + |
| 13 | + <Label Text="Column-Level EditTriggers" |
12 | 14 | FontSize="18" |
13 | 15 | FontAttributes="Bold" |
14 | | - Padding="16,12" |
| 16 | + Padding="16,12,16,2" |
15 | 17 | Grid.Row="0" /> |
16 | 18 |
|
| 19 | + <!-- Per-column trigger legend --> |
| 20 | + <VerticalStackLayout Grid.Row="1" Padding="16,0,16,8" Spacing="2"> |
| 21 | + <Label FontSize="12" TextColor="Gray"> |
| 22 | + <Label.FormattedText> |
| 23 | + <FormattedString> |
| 24 | + <Span Text="Name " FontAttributes="Bold" /> |
| 25 | + <Span Text="Single-tap, F2, or type to edit" FontAttributes="Italic" /> |
| 26 | + <Span Text=" " FontAttributes="Bold" /> |
| 27 | + <Span Text="Department " FontAttributes="Bold" /> |
| 28 | + <Span Text="Double-tap or F2 only" FontAttributes="Italic" /> |
| 29 | + </FormattedString> |
| 30 | + </Label.FormattedText> |
| 31 | + </Label> |
| 32 | + <Label FontSize="12" TextColor="Gray"> |
| 33 | + <Label.FormattedText> |
| 34 | + <FormattedString> |
| 35 | + <Span Text="Level " FontAttributes="Bold" /> |
| 36 | + <Span Text="Double-tap only" FontAttributes="Italic" /> |
| 37 | + <Span Text=" " FontAttributes="Bold" /> |
| 38 | + <Span Text="Salary " FontAttributes="Bold" /> |
| 39 | + <Span Text="F2 key only (most protected)" FontAttributes="Italic" /> |
| 40 | + <Span Text=" " FontAttributes="Bold" /> |
| 41 | + <Span Text="Actions " FontAttributes="Bold" /> |
| 42 | + <Span Text="Single-tap (column override)" FontAttributes="Italic" /> |
| 43 | + </FormattedString> |
| 44 | + </Label.FormattedText> |
| 45 | + </Label> |
| 46 | + </VerticalStackLayout> |
| 47 | + |
17 | 48 | <!-- |
18 | | - x:Name="actionsGrid" is referenced below by the command bindings. |
19 | | - actionsGrid.BindingContext = MvvmActionsViewModel (set in code-behind). |
| 49 | + Grid-level EditTriggers = Default (DoubleTap | F2Key | Typing). |
| 50 | + Each column below overrides this with its own EditTriggers value, |
| 51 | + demonstrating the full range of per-column trigger configurations. |
| 52 | +
|
| 53 | + x:Name="actionsGrid" is referenced by the command bindings below. |
| 54 | + BindingContext = MvvmActionsViewModel (set in code-behind). |
20 | 55 | --> |
21 | 56 | <dg:DataGridView x:Name="actionsGrid" |
22 | | - Grid.Row="1" |
| 57 | + Grid.Row="2" |
23 | 58 | ItemsSource="{Binding Employees}" |
24 | | - EditTriggers="SingleTap,F2Key" |
| 59 | + EditTriggers="DoubleTap, F2Key, Typing" |
25 | 60 | RowHeight="44" |
26 | 61 | HeaderHeight="40"> |
27 | 62 | <dg:DataGridView.Columns> |
| 63 | + |
| 64 | + <!-- Id \u2014 read-only; no EditTriggers needed --> |
28 | 65 | <core:DataGridColumn Header="Id" |
29 | 66 | PropertyName="Id" |
30 | 67 | ColumnType="Numeric" |
31 | 68 | Width="52" |
32 | 69 | IsReadOnly="True" |
33 | 70 | AllowTabStop="False" /> |
34 | 71 |
|
| 72 | + <!-- |
| 73 | + Name \u2014 single-tap, F2, OR typing starts editing. |
| 74 | + Most accessible column; overrides the grid-level Default. |
| 75 | + --> |
35 | 76 | <core:DataGridColumn Header="Name" |
36 | 77 | PropertyName="Name" |
37 | 78 | Width="160" |
38 | | - IsReadOnly="True" /> |
| 79 | + EditTriggers="SingleTap, F2Key, Typing" /> |
39 | 80 |
|
| 81 | + <!-- |
| 82 | + Department \u2014 double-tap or F2 only. |
| 83 | + Typing excluded to prevent accidental edits on a ComboBox. |
| 84 | + --> |
40 | 85 | <core:DataGridColumn Header="Department" |
41 | 86 | PropertyName="Department" |
| 87 | + ColumnType="ComboBox" |
42 | 88 | Width="130" |
43 | | - IsReadOnly="True" /> |
| 89 | + EditorItemsString="Engineering,Marketing,Finance,HR,Design,Product,Sales" |
| 90 | + EditTriggers="DoubleTap, F2Key" /> |
44 | 91 |
|
| 92 | + <!-- |
| 93 | + Level \u2014 double-tap ONLY; no F2, no typing. |
| 94 | + Picker columns benefit from explicit intent before opening a scroll wheel. |
| 95 | + --> |
45 | 96 | <core:DataGridColumn Header="Level" |
46 | 97 | PropertyName="Level" |
| 98 | + ColumnType="Picker" |
47 | 99 | Width="90" |
48 | | - IsReadOnly="True" /> |
| 100 | + EditorItemsString="Junior,Mid,Senior,Lead,Principal" |
| 101 | + EditTriggers="DoubleTap" /> |
49 | 102 |
|
| 103 | + <!-- |
| 104 | + Salary \u2014 F2 key ONLY. |
| 105 | + Protects financial data: pointer gestures cannot open the editor; |
| 106 | + the user must deliberately press F2 on a keyboard-attached device. |
| 107 | + --> |
50 | 108 | <core:DataGridColumn Header="Salary" |
51 | 109 | PropertyName="Salary" |
52 | 110 | ColumnType="Numeric" |
53 | 111 | Format="C0" |
54 | 112 | Width="110" |
55 | | - IsReadOnly="True" |
56 | | - TextAlignment="Right" /> |
| 113 | + TextAlignment="Right" |
| 114 | + EditTriggers="F2Key" /> |
57 | 115 |
|
| 116 | + <!-- |
| 117 | + Active \u2014 Boolean; toggles on single-tap regardless of EditTriggers. |
| 118 | + No EditTriggers override needed; inherits grid default (unused for booleans). |
| 119 | + --> |
58 | 120 | <core:DataGridColumn Header="Active" |
59 | 121 | PropertyName="IsActive" |
60 | 122 | ColumnType="Boolean" |
61 | 123 | Width="60" |
62 | | - IsReadOnly="True" |
63 | 124 | AllowTabStop="False" /> |
64 | 125 |
|
65 | 126 | <!-- |
66 | | - Actions column. |
67 | | - PropertyName="" short-circuits DataGridSource.BuildAccessor to |
68 | | - return item => item, so both the renderer and the editor factory |
69 | | - receive the full Employee object as their 'value' argument. |
| 127 | + Actions column \u2014 Template with inline action buttons. |
| 128 | + Column-level EditTriggers="SingleTap" ensures buttons are always |
| 129 | + activatable with a single tap even though the grid default is DoubleTap. |
| 130 | + This is the primary use-case for the column-level override feature. |
70 | 131 |
|
71 | | - CustomCellRenderer is fully declared here in XAML. |
72 | | - MauiActionButtonDefinition is a BindableObject, so Command accepts |
73 | | - {Binding} expressions. MauiActionButtonDefinition is NOT in the |
74 | | - visual tree, so BindingContext is NOT inherited automatically — |
75 | | - use Source={x:Reference actionsGrid} to resolve the ViewModel. |
| 132 | + PropertyName="" short-circuits DataGridSource.BuildAccessor to |
| 133 | + return item => item, so both the renderer and editor factory |
| 134 | + receive the full Employee object as their value argument. |
76 | 135 |
|
77 | | - The editor factory (in code-behind) reuses this same Buttons list, |
78 | | - so commands are already bound when a row is tapped. |
| 136 | + MauiActionButtonDefinition is NOT in the visual tree so BindingContext |
| 137 | + is not inherited \u2014 use Source={x:Reference actionsGrid} to resolve the VM. |
79 | 138 | --> |
80 | 139 | <core:DataGridColumn x:Name="actionsColumn" |
81 | 140 | Header="Actions" |
|
87 | 146 | AllowFiltering="False" |
88 | 147 | AllowTabStop="False" |
89 | 148 | SizeMode="Star" |
90 | | - StarWeight="1"> |
| 149 | + StarWeight="1" |
| 150 | + EditTriggers="SingleTap"> |
91 | 151 | <core:DataGridColumn.CustomCellRenderer> |
92 | 152 | <render:ActionButtonsCellRenderer> |
93 | 153 | <render:ActionButtonsCellRenderer.Buttons> |
|
105 | 165 | </render:ActionButtonsCellRenderer> |
106 | 166 | </core:DataGridColumn.CustomCellRenderer> |
107 | 167 | </core:DataGridColumn> |
| 168 | + |
108 | 169 | </dg:DataGridView.Columns> |
109 | 170 | </dg:DataGridView> |
110 | 171 | </Grid> |
|
0 commit comments