feat: using DataGridCollectionView.

This commit is contained in:
Zhang Dian
2025-01-22 15:53:18 +08:00
parent 7530061ca4
commit a5255bd032
4 changed files with 145 additions and 215 deletions

View File

@@ -129,95 +129,4 @@ public static class ColorTokens
new("SemiColorShadow", "Shadow"), new("SemiColorShadow", "Shadow"),
new("SemiShadowElevated", "Shadow Elevated"), new("SemiShadowElevated", "Shadow Elevated"),
}; };
public static IReadOnlyList<Tuple<string, string>> HeightTokens { get; } = new List<Tuple<string, string>>
{
new("SemiHeightControlSmall", ""),
new("SemiHeightControlDefault", ""),
new("SemiHeightControlLarge", ""),
};
public static IReadOnlyList<Tuple<string, string>> IconSizeTokens { get; } = new List<Tuple<string, string>>
{
new("SemiWidthIconExtraSmall", ""),
new("SemiWidthIconSmall", ""),
new("SemiWidthIconMedium", ""),
new("SemiWidthIconLarge", ""),
new("SemiWidthIconExtraLarge", ""),
};
public static IReadOnlyList<Tuple<string, string>> CornerRadiusTokens { get; } = new List<Tuple<string, string>>
{
new("SemiBorderRadiusExtraSmall", ""),
new("SemiBorderRadiusSmall", ""),
new("SemiBorderRadiusMedium", ""),
new("SemiBorderRadiusLarge", ""),
new("SemiBorderRadiusFull", ""),
};
public static IReadOnlyList<Tuple<string, string>> BorderSpacingTokens { get; } = new List<Tuple<string, string>>
{
new("SemiBorderSpacing", ""),
new("SemiBorderSpacingControl", ""),
new("SemiBorderSpacingControlFocus", ""),
};
public static IReadOnlyList<Tuple<string, string>> BorderThicknessTokens { get; } = new List<Tuple<string, string>>
{
new("SemiBorderThickness", ""),
new("SemiBorderThicknessControl", ""),
new("SemiBorderThicknessControlFocus", ""),
};
public static IReadOnlyList<Tuple<string, string>> SpacingTokens { get; } = new List<Tuple<string, string>>
{
new("SemiSpacingNone", ""),
new("SemiSpacingSuperTight", ""),
new("SemiSpacingExtraTight", ""),
new("SemiSpacingTight", ""),
new("SemiSpacingBaseTight", ""),
new("SemiSpacingBase", ""),
new("SemiSpacingBaseLoose", ""),
new("SemiSpacingLoose", ""),
new("SemiSpacingExtraLoose", ""),
new("SemiSpacingSuperLoose", ""),
};
public static IReadOnlyList<Tuple<string, string>> ThicknessTokens { get; } = new List<Tuple<string, string>>
{
new("SemiThicknessNone", ""),
new("SemiThicknessSuperTight", ""),
new("SemiThicknessExtraTight", ""),
new("SemiThicknessTight", ""),
new("SemiThicknessBaseTight", ""),
new("SemiThicknessBase", ""),
new("SemiThicknessBaseLoose", ""),
new("SemiThicknessLoose", ""),
new("SemiThicknessExtraLoose", ""),
new("SemiThicknessSuperLoose", ""),
};
public static IReadOnlyList<Tuple<string, string>> FontSizeTokens { get; } = new List<Tuple<string, string>>
{
new("SemiFontSizeSmall", ""),
new("SemiFontSizeRegular", ""),
new("SemiFontSizeHeader6", ""),
new("SemiFontSizeHeader5", ""),
new("SemiFontSizeHeader4", ""),
new("SemiFontSizeHeader3", ""),
new("SemiFontSizeHeader2", ""),
new("SemiFontSizeHeader1", ""),
};
public static IReadOnlyList<Tuple<string, string>> FontWeightTokens { get; } = new List<Tuple<string, string>>
{
new("SemiFontWeightLight", ""),
new("SemiFontWeightRegular", ""),
new("SemiFontWeightBold", ""),
};
public static IReadOnlyList<Tuple<string, string>> FontFamilyTokens { get; } = new List<Tuple<string, string>>
{
new("SemiFontFamilyRegular", ""),
};
} }

View File

@@ -10,74 +10,73 @@
<Design.DataContext> <Design.DataContext>
<vm:VariablesDemoViewModel /> <vm:VariablesDemoViewModel />
</Design.DataContext> </Design.DataContext>
<ScrollViewer> <DataGrid
<StackPanel> Margin="8"
<ItemsControl ItemsSource="{Binding VariableGrid}"> CanUserReorderColumns="True"
<ItemsControl.ItemTemplate> CanUserResizeColumns="True"
<DataTemplate> CanUserSortColumns="True"
<HeaderedContentControl HeadersVisibility="All"
Header="{Binding Title}" IsReadOnly="True"
Content="{Binding VariableItems}"> ItemsSource="{Binding GridData}">
<HeaderedContentControl.HeaderTemplate> <DataGrid.Columns>
<DataTemplate DataType="x:String"> <DataGridTemplateColumn
<SelectableTextBlock Width="300"
Classes="H3" x:DataType="vm:VariableItem"
Text="{Binding}" Header="ResourceKey">
Theme="{DynamicResource TitleSelectableTextBlock}" /> <DataGridTemplateColumn.CellTemplate>
</DataTemplate> <DataTemplate DataType="vm:VariableItem">
</HeaderedContentControl.HeaderTemplate> <SelectableTextBlock
<HeaderedContentControl.ContentTemplate> Margin="12,0"
<DataTemplate> VerticalAlignment="Center"
<DataGrid IsReadOnly="True" ItemsSource="{Binding}"> Text="{Binding ResourceKey}" />
<DataGrid.Columns>
<DataGridTemplateColumn Width="300" Header="ResourceKey">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate DataType="vm:VariableItemViewModel">
<SelectableTextBlock
Margin="12,0"
VerticalAlignment="Center"
Text="{Binding ResourceKey}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Width="200" Header="Value">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate DataType="vm:VariableItemViewModel">
<SelectableTextBlock
Margin="12,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="{Binding Value}"
TextWrapping="Wrap" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Width="100" Header="CopyText">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate DataType="vm:VariableItemViewModel">
<Button
Command="{Binding $parent[pages:VariablesDemo].Copy}"
CommandParameter="{Binding CopyText}"
Theme="{DynamicResource IconBorderlessButton}"
Content="{StaticResource SemiIconCopy}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn
Width="*"
x:DataType="vm:VariableItemViewModel"
Binding="{Binding Description}"
IsVisible="False"
CanUserSort="False"
Header="Description" />
</DataGrid.Columns>
</DataGrid>
</DataTemplate>
</HeaderedContentControl.ContentTemplate>
</HeaderedContentControl>
</DataTemplate> </DataTemplate>
</ItemsControl.ItemTemplate> </DataGridTemplateColumn.CellTemplate>
</ItemsControl> </DataGridTemplateColumn>
</StackPanel> <DataGridTemplateColumn
</ScrollViewer> Width="200"
x:DataType="vm:VariableItem"
Header="Value">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate DataType="vm:VariableItem">
<SelectableTextBlock
Margin="12,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="{Binding Value}"
TextWrapping="Wrap" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn
Width="*"
x:DataType="vm:VariableItem"
Header="Description">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate DataType="vm:VariableItem">
<SelectableTextBlock
Margin="12,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="{Binding Description}"
TextWrapping="Wrap" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn
Width="100"
x:DataType="vm:VariableItem"
Header="CopyText"
SortMemberPath="Duration">
<DataGridTemplateColumn.CellTemplate>
<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>
</UserControl> </UserControl>

View File

@@ -1,7 +1,5 @@
using System.Threading.Tasks; using System.Threading.Tasks;
using Avalonia.Controls; using Avalonia.Controls;
using Avalonia.Controls.Primitives;
using Avalonia.Threading;
using Semi.Avalonia.Demo.ViewModels; using Semi.Avalonia.Demo.ViewModels;
namespace Semi.Avalonia.Demo.Pages; namespace Semi.Avalonia.Demo.Pages;
@@ -14,13 +12,6 @@ public partial class VariablesDemo : UserControl
this.DataContext = new VariablesDemoViewModel(); this.DataContext = new VariablesDemoViewModel();
} }
protected override async void OnApplyTemplate(TemplateAppliedEventArgs e)
{
base.OnApplyTemplate(e);
var vm = this.DataContext as VariablesDemoViewModel;
await Dispatcher.UIThread.InvokeAsync(() => { vm?.InitializeResources(); });
}
public async Task Copy(object? o) public async Task Copy(object? o)
{ {
if (o is null) return; if (o is null) return;

View File

@@ -1,57 +1,32 @@
using System; using System;
using System.Collections.Generic; using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Globalization; using System.Globalization;
using Avalonia; using Avalonia;
using Avalonia.Collections;
using Avalonia.Controls; using Avalonia.Controls;
using Avalonia.Media; using Avalonia.Media;
using CommunityToolkit.Mvvm.ComponentModel; using CommunityToolkit.Mvvm.ComponentModel;
using Semi.Avalonia.Demo.Constant;
using Semi.Avalonia.Tokens; using Semi.Avalonia.Tokens;
namespace Semi.Avalonia.Demo.ViewModels; namespace Semi.Avalonia.Demo.ViewModels;
public partial class VariablesDemoViewModel : ObservableObject public class VariablesDemoViewModel : ObservableObject
{ {
private readonly IResourceDictionary? _dictionary; public DataGridCollectionView GridData { get; set; }
public ObservableCollection<VariableGridViewModel> VariableGrid { get; set; } = [];
public VariablesDemoViewModel() public VariablesDemoViewModel()
{ {
_dictionary = new Variables(); IResourceDictionary dictionary = new Variables();
} foreach (var token in Tokens)
public void InitializeResources()
{
VariableGrid.Add(new VariableGridViewModel("Height", _dictionary, ColorTokens.HeightTokens));
VariableGrid.Add(new VariableGridViewModel("Icon Size", _dictionary, ColorTokens.IconSizeTokens));
VariableGrid.Add(new VariableGridViewModel("Border CornerRadius", _dictionary, ColorTokens.CornerRadiusTokens));
VariableGrid.Add(new VariableGridViewModel("Border Spacing", _dictionary, ColorTokens.BorderSpacingTokens));
VariableGrid.Add(new VariableGridViewModel("Border Thickness", _dictionary, ColorTokens.BorderThicknessTokens));
VariableGrid.Add(new VariableGridViewModel("Spacing", _dictionary, ColorTokens.SpacingTokens));
VariableGrid.Add(new VariableGridViewModel("Thickness", _dictionary, ColorTokens.ThicknessTokens));
VariableGrid.Add(new VariableGridViewModel("FontSize", _dictionary, ColorTokens.FontSizeTokens));
VariableGrid.Add(new VariableGridViewModel("FontWeight", _dictionary, ColorTokens.FontWeightTokens));
VariableGrid.Add(new VariableGridViewModel("FontFamily", _dictionary, ColorTokens.FontFamilyTokens));
}
}
public partial class VariableGridViewModel : ObservableObject
{
[ObservableProperty] private string? _title;
public ObservableCollection<VariableItemViewModel> VariableItems { get; set; } = [];
public VariableGridViewModel(string title, IResourceDictionary? dictionary,
IReadOnlyList<Tuple<string, string>> tokens)
{
Title = title;
foreach (var (key, name) in tokens)
{ {
if (dictionary?.TryGetValue(key, out var value) ?? false) if (token.ResourceKey is not null && dictionary.TryGetValue(token.ResourceKey, out var value))
{ {
VariableItems.Add(new VariableItemViewModel(name, GetValueString(value), key)); token.Value = GetValueString(value);
} }
} }
GridData = new DataGridCollectionView(Tokens);
GridData.GroupDescriptions.Add(new DataGridPathGroupDescription(nameof(VariableItem.Category)));
} }
private static string GetValueString(object? value) private static string GetValueString(object? value)
@@ -68,23 +43,79 @@ public partial class VariableGridViewModel : ObservableObject
_ => value.ToString() _ => value.ToString()
}; };
} }
private static List<VariableItem> Tokens { get; set; } =
[
new("Height", "SemiHeightControlSmall"),
new("Height", "SemiHeightControlDefault"),
new("Height", "SemiHeightControlLarge"),
new("Icon Size", "SemiWidthIconExtraSmall"),
new("Icon Size", "SemiWidthIconSmall"),
new("Icon Size", "SemiWidthIconMedium"),
new("Icon Size", "SemiWidthIconLarge"),
new("Icon Size", "SemiWidthIconExtraLarge"),
new("Border CornerRadius", "SemiBorderRadiusExtraSmall"),
new("Border CornerRadius", "SemiBorderRadiusSmall"),
new("Border CornerRadius", "SemiBorderRadiusMedium"),
new("Border CornerRadius", "SemiBorderRadiusLarge"),
new("Border CornerRadius", "SemiBorderRadiusFull"),
new("Border Spacing", "SemiBorderSpacing"),
new("Border Spacing", "SemiBorderSpacingControl"),
new("Border Spacing", "SemiBorderSpacingControlFocus"),
new("Border Thickness", "SemiBorderThickness"),
new("Border Thickness", "SemiBorderThicknessControl"),
new("Border Thickness", "SemiBorderThicknessControlFocus"),
new("Spacing", "SemiSpacingNone"),
new("Spacing", "SemiSpacingSuperTight"),
new("Spacing", "SemiSpacingExtraTight"),
new("Spacing", "SemiSpacingTight"),
new("Spacing", "SemiSpacingBaseTight"),
new("Spacing", "SemiSpacingBase"),
new("Spacing", "SemiSpacingBaseLoose"),
new("Spacing", "SemiSpacingLoose"),
new("Spacing", "SemiSpacingExtraLoose"),
new("Spacing", "SemiSpacingSuperLoose"),
new("Thickness", "SemiThicknessNone"),
new("Thickness", "SemiThicknessSuperTight"),
new("Thickness", "SemiThicknessExtraTight"),
new("Thickness", "SemiThicknessTight"),
new("Thickness", "SemiThicknessBaseTight"),
new("Thickness", "SemiThicknessBase"),
new("Thickness", "SemiThicknessBaseLoose"),
new("Thickness", "SemiThicknessLoose"),
new("Thickness", "SemiThicknessExtraLoose"),
new("Thickness", "SemiThicknessSuperLoose"),
new("FontSize", "SemiFontSizeSmall"),
new("FontSize", "SemiFontSizeRegular"),
new("FontSize", "SemiFontSizeHeader6"),
new("FontSize", "SemiFontSizeHeader5"),
new("FontSize", "SemiFontSizeHeader4"),
new("FontSize", "SemiFontSizeHeader3"),
new("FontSize", "SemiFontSizeHeader2"),
new("FontSize", "SemiFontSizeHeader1"),
new("FontWeight", "SemiFontWeightLight"),
new("FontWeight", "SemiFontWeightRegular"),
new("FontWeight", "SemiFontWeightBold"),
new("FontFamily", "SemiFontFamilyRegular"),
];
} }
public partial class VariableItemViewModel : ObservableObject public class VariableItem()
{ {
[ObservableProperty] private string? _resourceKey; public string? Category { get; set; }
[ObservableProperty] private string? _description; public string? ResourceKey { get; set; }
[ObservableProperty] private string? _value; public string? Description { get; set; }
public string? Value { get; set; }
public VariableItem(string category, string resourceKey, string description = "") : this()
{
Category = category;
ResourceKey = resourceKey;
Description = description;
}
public string CopyText => public string CopyText =>
$""" $"""
<StaticResource x:Key="" ResourceKey="{ResourceKey}" /> <StaticResource x:Key="" ResourceKey="{ResourceKey}" />
"""; """;
public VariableItemViewModel(string description, object value, string resourceKey)
{
ResourceKey = resourceKey;
Description = description;
Value = value.ToString();
}
} }