feat: add search functionality to VariablesDemo and update layout.

This commit is contained in:
Zhang Dian
2025-09-25 17:57:00 +08:00
parent 1c69f53c3c
commit cd9daf11da
3 changed files with 128 additions and 88 deletions

View File

@@ -11,84 +11,95 @@
<Design.DataContext> <Design.DataContext>
<vm:VariablesDemoViewModel /> <vm:VariablesDemoViewModel />
</Design.DataContext> </Design.DataContext>
<DataGrid <Grid RowDefinitions="Auto, *">
Margin="8" <TextBox
CanUserReorderColumns="True" Grid.Row="0"
CanUserResizeColumns="True" Width="600"
CanUserSortColumns="True" Margin="8"
HeadersVisibility="All" Classes="ClearButton"
IsReadOnly="True" Text="{Binding SearchText}"
ItemsSource="{Binding GridData}"> Watermark="Input Variable Category/ResourceKey/Type/Value/Description" />
<DataGrid.Columns>
<DataGridTemplateColumn <DataGrid
Width="300" Grid.Row="1"
x:DataType="vm:VariableItem" Margin="8"
Header="ResourceKey"> CanUserReorderColumns="True"
<DataGridTemplateColumn.CellTemplate> CanUserResizeColumns="True"
<DataTemplate DataType="vm:VariableItem"> CanUserSortColumns="True"
<SelectableTextBlock HeadersVisibility="All"
Margin="12,0" IsReadOnly="True"
VerticalAlignment="Center" ItemsSource="{Binding GridData}">
Text="{Binding ResourceKey}" /> <DataGrid.Columns>
</DataTemplate> <DataGridTemplateColumn
</DataGridTemplateColumn.CellTemplate> Width="300"
</DataGridTemplateColumn> x:DataType="vm:VariableItem"
<DataGridTemplateColumn Header="ResourceKey">
Width="200" <DataGridTemplateColumn.CellTemplate>
x:DataType="vm:VariableItem" <DataTemplate DataType="vm:VariableItem">
Header="Type"> <SelectableTextBlock
<DataGridTemplateColumn.CellTemplate> Margin="12,0"
<DataTemplate DataType="vm:VariableItem"> VerticalAlignment="Center"
<SelectableTextBlock Text="{Binding ResourceKey}" />
Margin="12,0" </DataTemplate>
VerticalAlignment="Center" </DataGridTemplateColumn.CellTemplate>
Text="{Binding Type.Name}" /> </DataGridTemplateColumn>
</DataTemplate> <DataGridTemplateColumn
</DataGridTemplateColumn.CellTemplate> Width="200"
</DataGridTemplateColumn> x:DataType="vm:VariableItem"
<DataGridTemplateColumn Header="Type">
Width="200" <DataGridTemplateColumn.CellTemplate>
x:DataType="vm:VariableItem" <DataTemplate DataType="vm:VariableItem">
Header="Value"> <SelectableTextBlock
<DataGridTemplateColumn.CellTemplate> Margin="12,0"
<DataTemplate DataType="vm:VariableItem"> VerticalAlignment="Center"
<SelectableTextBlock Text="{Binding Type.Name}" />
Margin="12,0" </DataTemplate>
VerticalAlignment="Center" </DataGridTemplateColumn.CellTemplate>
Text="{Binding Value}" </DataGridTemplateColumn>
TextWrapping="Wrap" /> <DataGridTemplateColumn
</DataTemplate> Width="200"
</DataGridTemplateColumn.CellTemplate> x:DataType="vm:VariableItem"
</DataGridTemplateColumn> Header="Value">
<DataGridTemplateColumn <DataGridTemplateColumn.CellTemplate>
Width="*" <DataTemplate DataType="vm:VariableItem">
x:DataType="vm:VariableItem" <SelectableTextBlock
Header="Description"> Margin="12,0"
<DataGridTemplateColumn.CellTemplate> VerticalAlignment="Center"
<DataTemplate DataType="vm:VariableItem"> Text="{Binding Value}"
<SelectableTextBlock TextWrapping="Wrap" />
Margin="12,0" </DataTemplate>
VerticalAlignment="Center" </DataGridTemplateColumn.CellTemplate>
Text="{Binding Description}" </DataGridTemplateColumn>
TextWrapping="Wrap" /> <DataGridTemplateColumn
</DataTemplate> Width="*"
</DataGridTemplateColumn.CellTemplate> x:DataType="vm:VariableItem"
</DataGridTemplateColumn> Header="Description">
<DataGridTemplateColumn <DataGridTemplateColumn.CellTemplate>
Width="100" <DataTemplate DataType="vm:VariableItem">
x:DataType="vm:VariableItem" <SelectableTextBlock
Header="CopyText" Margin="12,0"
SortMemberPath="Duration"> VerticalAlignment="Center"
<DataGridTemplateColumn.CellTemplate> Text="{Binding Description}"
<DataTemplate DataType="vm:VariableItem"> TextWrapping="Wrap" />
<Button </DataTemplate>
Command="{Binding $parent[pages:VariablesDemo].Copy}" </DataGridTemplateColumn.CellTemplate>
CommandParameter="{Binding CopyText}" </DataGridTemplateColumn>
Theme="{DynamicResource IconBorderlessButton}" <DataGridTemplateColumn
Content="{StaticResource SemiIconCopy}" /> Width="100"
</DataTemplate> x:DataType="vm:VariableItem"
</DataGridTemplateColumn.CellTemplate> Header="CopyText"
</DataGridTemplateColumn> SortMemberPath="Duration">
</DataGrid.Columns> <DataGridTemplateColumn.CellTemplate>
</DataGrid> <DataTemplate DataType="vm:VariableItem">
<Button
Command="{Binding $parent[pages:VariablesDemo].Copy}"
CommandParameter="{Binding CopyText}"
Theme="{DynamicResource IconBorderlessButton}"
Content="{StaticResource SemiIconCopy}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</Grid>
</UserControl> </UserControl>

View File

@@ -1,4 +1,5 @@
using System.Collections.Generic; using System;
using System.Collections.Generic;
using System.Collections.ObjectModel; using System.Collections.ObjectModel;
using System.Linq; using System.Linq;
using Avalonia.Controls; using Avalonia.Controls;
@@ -37,9 +38,9 @@ public partial class IconDemoViewModel : ObservableObject
}; };
if (key.ToString().EndsWith("Stroked")) if (key.ToString().EndsWith("Stroked"))
_strokedIcons[key.ToString().ToLowerInvariant()] = icon; _strokedIcons[key.ToString()] = icon;
else else
_filledIcons[key.ToString().ToLowerInvariant()] = icon; _filledIcons[key.ToString()] = icon;
} }
} }
@@ -48,16 +49,16 @@ public partial class IconDemoViewModel : ObservableObject
partial void OnSearchTextChanged(string? value) partial void OnSearchTextChanged(string? value)
{ {
var search = value?.ToLowerInvariant() ?? string.Empty; var search = string.IsNullOrWhiteSpace(value) ? string.Empty : value.Trim();
FilteredFilledIcons.Clear(); FilteredFilledIcons.Clear();
foreach (var pair in _filledIcons.Where(i => i.Key.Contains(search))) foreach (var pair in _filledIcons.Where(kv => kv.Key.Contains(search, StringComparison.InvariantCultureIgnoreCase)))
{ {
FilteredFilledIcons.Add(pair.Value); FilteredFilledIcons.Add(pair.Value);
} }
FilteredStrokedIcons.Clear(); FilteredStrokedIcons.Clear();
foreach (var pair in _strokedIcons.Where(i => i.Key.Contains(search))) foreach (var pair in _strokedIcons.Where(kv => kv.Key.Contains(search, StringComparison.InvariantCultureIgnoreCase)))
{ {
FilteredStrokedIcons.Add(pair.Value); FilteredStrokedIcons.Add(pair.Value);
} }

View File

@@ -10,9 +10,10 @@ using Semi.Avalonia.Tokens;
namespace Semi.Avalonia.Demo.ViewModels; namespace Semi.Avalonia.Demo.ViewModels;
public class VariablesDemoViewModel : ObservableObject public partial class VariablesDemoViewModel : ObservableObject
{ {
public DataGridCollectionView GridData { get; set; } public DataGridCollectionView GridData { get; set; }
[ObservableProperty] private string _searchText = string.Empty;
public VariablesDemoViewModel() public VariablesDemoViewModel()
{ {
@@ -30,7 +31,7 @@ public class VariablesDemoViewModel : ObservableObject
GridData.GroupDescriptions.Add(new DataGridPathGroupDescription(nameof(VariableItem.Category))); GridData.GroupDescriptions.Add(new DataGridPathGroupDescription(nameof(VariableItem.Category)));
} }
private static string GetValueString(object? value) private static string? GetValueString(object? value)
{ {
if (value is null) return string.Empty; if (value is null) return string.Empty;
@@ -45,6 +46,28 @@ public class VariablesDemoViewModel : ObservableObject
}; };
} }
partial void OnSearchTextChanged(string value)
{
if (string.IsNullOrWhiteSpace(value))
{
GridData.Filter = _ => true;
GridData.Refresh();
return;
}
var search = value.Trim();
GridData.Filter = item =>
{
if (item is not VariableItem variableItem) return false;
return (variableItem.Category?.Contains(search, StringComparison.InvariantCultureIgnoreCase) ?? false) ||
(variableItem.ResourceKey?.Contains(search, StringComparison.InvariantCultureIgnoreCase) ?? false) ||
(variableItem.Value?.Contains(search, StringComparison.InvariantCultureIgnoreCase) ?? false) ||
(variableItem.Type?.Name.Contains(search, StringComparison.InvariantCultureIgnoreCase) ?? false) ||
(variableItem.Description?.Contains(search, StringComparison.InvariantCultureIgnoreCase) ?? false);
};
GridData.Refresh();
}
private static List<VariableItem> Tokens { get; set; } = private static List<VariableItem> Tokens { get; set; } =
[ [
new("Height", "SemiHeightControlSmall"), new("Height", "SemiHeightControlSmall"),
@@ -55,6 +78,11 @@ public class VariablesDemoViewModel : ObservableObject
new("Icon Size", "SemiWidthIconMedium"), new("Icon Size", "SemiWidthIconMedium"),
new("Icon Size", "SemiWidthIconLarge"), new("Icon Size", "SemiWidthIconLarge"),
new("Icon Size", "SemiWidthIconExtraLarge"), new("Icon Size", "SemiWidthIconExtraLarge"),
new("Border CornerRadius Spacing", "SemiBorderRadiusSpacingExtraSmall"),
new("Border CornerRadius Spacing", "SemiBorderRadiusSpacingSmall"),
new("Border CornerRadius Spacing", "SemiBorderRadiusSpacingMedium"),
new("Border CornerRadius Spacing", "SemiBorderRadiusSpacingLarge"),
new("Border CornerRadius Spacing", "SemiBorderRadiusSpacingFull"),
new("Border CornerRadius", "SemiBorderRadiusExtraSmall"), new("Border CornerRadius", "SemiBorderRadiusExtraSmall"),
new("Border CornerRadius", "SemiBorderRadiusSmall"), new("Border CornerRadius", "SemiBorderRadiusSmall"),
new("Border CornerRadius", "SemiBorderRadiusMedium"), new("Border CornerRadius", "SemiBorderRadiusMedium"),